Improve error handling

Author: jmsche

CHANGELOG-1.x.md

@@ -1,3 +1,10 @@
+1.4.0
+-----
+
+* File uploads: improve message when the request may be truncated
+* Error events: add response parameter to JS function call
+* Error events: allow to call different JS functions for each event
+
 1.3.2
 -----
 

README.md

@@ -364,13 +364,27 @@ import 'froala-editor/css/plugins.pkgd.min.css';
 
 window.FroalaEditor = FroalaEditor;
 
-function froalaDisplayError(p_editor, error ) {
+/**
+ * @param editor Editor instance
+ * @param error Error object generated by Froala
+ * @param response Response object coming from the server
+ */
+function froalaDisplayError(editor, error, response) {
     alert(`Error ${error.code}: ${error.message}`);
 }
 
 window.froalaDisplayError = froalaDisplayError;
 ```
 
+Instead of defining a generic `froalaDisplayError` function, you can also define one per error event, using these
+function names:
+
+* `froalaImageErrorEventHandler`
+* `froalaImageManagerErrorEventHandler`
+* `froalaSaveErrorEventHandler`
+* `froalaFileErrorEventHandler`
+* `froalaVideoErrorEventHandler`
+
 Now you can disable Froala bundle CSS/JS inclusion:
 
 ```yaml

src/Controller/MediaController.php

@@ -18,10 +18,10 @@ public function __construct(private MediaManager $mediaManager, private KernelIn
 
     public function uploadImage(Request $request): JsonResponse
     {
-        $path = $request->request->get('path');
-        $folder = $request->request->get('folder');
+        $path = $request->request->get('path', '');
+        $folder = $request->request->get('folder', '');
         $rootDir = $this->kernel->getProjectDir();
-        $publicDir = $request->request->get('public_dir');
+        $publicDir = $request->request->get('public_dir', '');
         $basePath = $request->getBasePath();
 
         return $this->mediaManager->uploadImage($request->files, $rootDir, $publicDir, $basePath, $folder, $path);
@@ -52,21 +52,21 @@ public function loadImages(Request $request): JsonResponse
 
     public function uploadFile(Request $request): JsonResponse
     {
-        $path = $request->request->get('path');
-        $folder = $request->request->get('folder');
+        $path = $request->request->get('path', '');
+        $folder = $request->request->get('folder', '');
         $rootDir = $this->kernel->getProjectDir();
-        $publicDir = $request->request->get('public_dir');
+        $publicDir = $request->request->get('public_dir', '');
         $basePath = $request->getBasePath();
 
         return $this->mediaManager->uploadFile($request->files, $rootDir, $publicDir, $basePath, $folder, $path);
     }
 
     public function uploadVideo(Request $request): JsonResponse
     {
-        $path = $request->request->get('path');
-        $folder = $request->request->get('folder');
+        $path = $request->request->get('path', '');
+        $folder = $request->request->get('folder', '');
         $rootDir = $this->kernel->getProjectDir();
-        $publicDir = $request->request->get('public_dir');
+        $publicDir = $request->request->get('public_dir', '');
         $basePath = $request->getBasePath();
 
         return $this->mediaManager->uploadVideo($request->files, $rootDir, $publicDir, $basePath, $folder, $path);

src/Resources/public/misc.js

@@ -1,8 +1,8 @@
 /**
- * Display errors.
- * @param p_editor is the editor.
- * @param error is the error object.
+ * @param editor Editor instance
+ * @param error Error object generated by Froala
+ * @param response Response object coming from the server
  */
-function froalaDisplayError(p_editor, error ) {
+function froalaDisplayError(editor, error, response) {
 	alert(`Error ${error.code}: ${error.message}`);
 }

src/Resources/views/Form/froala_widget.html.twig

@@ -66,20 +66,40 @@
                     {% endfor %}
 
                     events: {
-                        'image.error': function ( error ) {
-                            froalaDisplayError(  this, error );
+                        'image.error': function (error, response) {
+                            if (typeof froalaImageErrorEventHandler === 'function') {
+                                froalaImageErrorEventHandler(this, error, response);
+                            } else {
+                                froalaDisplayError(this, error, response);
+                            }
                         },
-                        'imageManager.error': function ( error ) {
-                            froalaDisplayError(  this, error );
+                        'imageManager.error': function (error, response) {
+                            if (typeof froalaImageManagerErrorEventHandler === 'function') {
+                                froalaImageManagerErrorEventHandler(this, error, response);
+                            } else {
+                                froalaDisplayError(this, error, response);
+                            }
                         },
-                        'save.error': function ( error ) {
-                            froalaDisplayError(  this, error );
+                        'save.error': function (error, response) {
+                            if (typeof froalaSaveErrorEventHandler === 'function') {
+                                froalaSaveErrorEventHandler(this, error, response);
+                            } else {
+                                froalaDisplayError(this, error, response);
+                            }
                         },
-                        'file.error': function ( error, responses ) {
-                            froalaDisplayError(  this, error );
+                        'file.error': function (error, response) {
+                            if (typeof froalaFileErrorEventHandler === 'function') {
+                                froalaFileErrorEventHandler(this, error, response);
+                            } else {
+                                froalaDisplayError(this, error, response);
+                            }
                         },
-                        'video.error': function ( error, responses ) {
-                            froalaDisplayError(  this, error );
+                        'video.error': function (error, response) {
+                            if (typeof froalaVideoErrorEventHandler === 'function') {
+                                froalaVideoErrorEventHandler(this, error, response);
+                            } else {
+                                froalaDisplayError(this, error, response);
+                            }
                         }
                         {% for event, func in froala_events %}
                     ,'{{ event }}': {{ func }}

src/Service/MediaManager.php

@@ -82,7 +82,7 @@ private function handleFileUpload(FileBag $fileBag, string $rootDir, string $pub
         $file = $fileBag->get('file');
         if (null === $file) {
             $response->setData([
-                'error' => 'No file received.',
+                'error' => 'No file received. Maybe file size exceeded maximum file size allowed?',
             ]);
             $response->setStatusCode(400);