Show better error messages for failed file uploads

source-data · Jun 14, 2022 · 4ff247f · 4ff247f
1 parent 8b88680
commit 4ff247f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/app/Http/Controllers/API/FileController.php b/app/Http/Controllers/API/FileController.php
@@ -46,10 +46,15 @@ public function store(Panel $panel, Request $request)
     {
         $user = auth()->user();
 
-        $request->validate([
-            'file'  => ['required_without:url', 'max:4096'],
-            'url'   => ['required_without:file', 'url']
-        ]);
+        $maxFileSizeInMB = 4;
+        $maxFileSizeInBytes = 4 * 1000;
+        $rules = [
+            'file' => ['required', 'mimes:jpeg,png,jpg,gif,pdf,tif', "max:$maxFileSizeInBytes"],
+        ];
+        $messages = [
+            'file.max' => "Source files may not be larger than $maxFileSizeInMB MB",
+        ];
+        $this->validate($request, $rules, $messages);
 
         if (Gate::allows('modify-panel', $panel)) {
 

diff --git a/app/Http/Controllers/API/PanelController.php b/app/Http/Controllers/API/PanelController.php
@@ -145,9 +145,16 @@ public function listPublicGroupPanels(Request $request, Group $group)
      */
     public function store(Request $request)
     {
-        $request->validate([
-            'file' => ['required', 'mimes:jpeg,png,jpg,gif,pdf,tif', 'max:4096']
-        ]);
+        $maxFileSizeInMegaBytes = 4;
+        $maxFileSizeInKiloBytes = 4 * 1000;
+        $rules = [
+            'file' => ['required_without:url', "max:$maxFileSizeInKiloBytes"],
+            'url'  => ['required_without:file', 'url'],
+        ];
+        $messages = [
+            'file.max' => "SmartFigure images may not be larger than $maxFileSizeInMegaBytes MB",
+        ];
+        $this->validate($request, $rules, $messages);
 
         $user = auth()->user();
 

diff --git a/resources/js/components/files/FileUploads.vue b/resources/js/components/files/FileUploads.vue
@@ -352,7 +352,7 @@ export default {
                 this.$store.commit('setPendingUpload', false);
                 this.file = null
             }).catch(error => {
-                this.$snotify.error(error.data.message, "Upload failed")
+                this.$snotify.error(error.data.errors.file[0], "Upload failed")
                 this.$store.commit('setPendingUpload', false);
             })
         },