WIP

package.json

@@ -66,6 +66,7 @@
     "@uppy/drop-target": "^2.0.1",
     "@uppy/file-input": "^3.0.3",
     "@uppy/thumbnail-generator": "^3.0.5",
+    "@uppy/vue": "^1.0.2",
     "@uppy/xhr-upload": "^3.4.1",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
     "apexcharts": "^3.35.4",

packages/form/src/components/fields/upload/Upload.vue

@@ -4,7 +4,7 @@
     import type { UppyFile } from "@uppy/core";
     import ThumbnailGenerator from '@uppy/thumbnail-generator';
     import XHRUpload from '@uppy/xhr-upload';
-    import FileInput from '@uppy/file-input';
+    import FileInput from '@uppy/vue/lib/file-input';
     import DropTarget from '@uppy/drop-target';
     import Cropper from 'cropperjs';
     import { computed, onUnmounted, ref, watch } from "vue";
@@ -16,6 +16,7 @@
     import { filesizeLabel } from "@/utils/file";
     import EditModal from "./EditModal.vue";
     import { useForm } from "../../../useForm";
+    import UploadDropText from "./UploadDropText.vue";
 
     const props = defineProps<{
         field: FormUploadFieldData,
@@ -149,12 +150,8 @@
             uppy.use(DropTarget, {
                 target: dropTarget.value,
             });
-            uppy.use(FileInput, {
-                target: dropTarget.value,
-            });
         } else {
             uppy.removePlugin(uppy.getPlugin('DropTarget'));
-            uppy.removePlugin(uppy.getPlugin('FileInput'));
         }
     });
 
@@ -259,9 +256,28 @@
     </template>
     <template v-else>
         <div class="[&_input]:hidden" ref="dropTarget">
-            <Button block :disabled="field.readOnly" @click="($refs.dropTarget as HTMLElement).querySelector('input').click()">
-                {{ __('sharp::form.upload.browse_button') }}
-            </Button>
+            <div class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10">
+                <div class="text-center">
+                    <div class="mt-4 flex text-sm leading-6 text-gray-600">
+                        <UploadDropText v-slot="{ linkText }">
+                            <label class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500">
+                                <span>{{ linkText }}</span>
+                                <FileInput class="sr-only" />
+                            </label>
+                        </UploadDropText>
+                    </div>
+                    <p class="text-xs leading-5 text-gray-600">
+                        <template v-if="field.fileFilter?.length">
+                            <span class="uppercase">
+                                {{ field.fileFilter.join(', ') }}.
+                            </span>
+                        </template>
+                        <template v-if="field.maxFileSize">
+                            {{ __('sharp::form.upload.help_text.max_file_size', { size: filesizeLabel(field.maxFileSize) }) }}
+                        </template>
+                    </p>
+                </div>
+            </div>
         </div>
     </template>
 

packages/form/src/components/fields/upload/UploadDropText.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+    import { __ } from "@/utils/i18n";
+
+    const text = __('sharp::form.list.bulk_upload.text')
+        .match(/(.*)\[(.+?)]\(\)(.*)/);
+</script>
+
+<template>
+    {{ text[1] }}
+    <slot :link-text="text[2]" />
+    {{ text[3] }}
+</template>

resources/lang/en/form.php

@@ -32,6 +32,7 @@
     'upload.message.file_too_big' => 'The selected file is too big (max. :size)',
     'upload.message.bad_extension' => 'File extension is incorrect',
     'upload.edit_modal.description' => 'Use the mouse wheel to zoom. Drag to move the image or the crop area',
+    'upload.help_text.max_file_size' => 'Up to :size',
 
     'multiselect.placeholder' => 'Select option',
     'multiselect.max_text' => 'Maximum items reached',

src/Http/Middleware/HandleSharpErrors.php

@@ -6,13 +6,15 @@
 use Code16\Sharp\Exceptions\SharpException;
 use Illuminate\Database\Eloquent\ModelNotFoundException;
 use Illuminate\Http\Request;
+use Illuminate\Http\Response;
 use Illuminate\Validation\ValidationException;
 use Symfony\Component\HttpKernel\Exception\HttpException;
 
 class HandleSharpErrors
 {
     public function handle(Request $request, Closure $next)
     {
+        /** @var Response $response */
         $response = $next($request);
 
         if($response->exception instanceof ValidationException) {