WIP

code16 · Oct 16, 2023 · c3a30b8 · c3a30b8
1 parent 2cac1a3
commit c3a30b8
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 40 deletions.
diff --git a/demo/app/Sharp/TestForm/TestForm.php b/demo/app/Sharp/TestForm/TestForm.php
@@ -233,6 +233,7 @@ public function buildFormFields(FieldsContainer $formFields): void
             ->addField(
                 SharpFormUploadField::make('upload')
                     ->setLabel('Upload')
+                    ->setMaxFileSize(5)
                     ->setFileFilterImages()
                     ->setCropRatio('1:1')
                     ->setStorageDisk('local')

diff --git a/demo/public/build/assets/sharp-extension-0eaacacc.css b/demo/public/build/assets/sharp-extension-0eaacacc.css
diff --git a/demo/public/build/assets/sharp-extension-1f8815d0.css b/demo/public/build/assets/sharp-extension-1f8815d0.css
diff --git a/demo/public/build/manifest.json b/demo/public/build/manifest.json
@@ -1,6 +1,6 @@
 {
   "resources/css/sharp-extension.css": {
-    "file": "assets/sharp-extension-0eaacacc.css",
+    "file": "assets/sharp-extension-1f8815d0.css",
     "isEntry": true,
     "src": "resources/css/sharp-extension.css"
   },

diff --git a/demo/resources/views/sharp/_login-page-message.blade.php b/demo/resources/views/sharp/_login-page-message.blade.php
@@ -1,24 +1,27 @@
 
-<div class="bg-white rounded p-4 text-center">
-    <div class="text-sm mb-2">
-        Use these accounts to login&nbsp;:
+<div class="custom-tw">
+    <div class="bg-white rounded p-4 text-center">
+        <div class="text-sm mb-2">
+            Use these accounts to login&nbsp;:
+        </div>
+        <button
+            class="rounded-md bg-indigo-50 px-3 py-2 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100"
+            type="button"
+            onclick="fillForm('[email protected]')"
+        >
+            Admin
+        </button>
+        <button
+            class="rounded-md bg-indigo-50 px-3 py-2 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100"
+            type="button"
+            onclick="fillForm('[email protected]')"
+        >
+            Editor
+        </button>
     </div>
-    <button
-        class="rounded-md bg-indigo-50 px-3 py-2 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100"
-        type="button"
-        onclick="fillForm('[email protected]')"
-    >
-        Admin
-    </button>
-    <button
-        class="rounded-md bg-indigo-50 px-3 py-2 text-sm font-semibold text-indigo-600 shadow-sm hover:bg-indigo-100"
-        type="button"
-        onclick="fillForm('[email protected]')"
-    >
-        Editor
-    </button>
 </div>
 
+
 @push('script')
     <script>
         function fillForm(email) {

diff --git a/demo/tailwind.sharp.config.js b/demo/tailwind.sharp.config.js
@@ -1,6 +1,7 @@
 
-
+/** @type {import('tailwindcss').Config} */
 module.exports = {
+    important: '.custom-tw',
     content: [
         './resources/views/sharp/**/*.blade.php',
     ],

diff --git a/packages/form/src/components/fields/upload/Upload.vue b/packages/form/src/components/fields/upload/Upload.vue
@@ -11,6 +11,7 @@
     import { getErrorMessage, getXsrfToken, handleErrorAlert } from "@/api";
     import { getFiltersFromCropData } from "./util/filters";
     import { Button } from "@sharp/ui";
+    import { ArrowDownOnSquareIcon } from "@heroicons/vue/24/outline";
 
     import { __ } from "@/utils/i18n";
     import { filesizeLabel } from "@/utils/file";
@@ -144,11 +145,15 @@
         emit('input', {});
     }
 
+    const isDraggingOver = ref(false);
     const dropTarget = ref<HTMLElement>();
     watch(dropTarget, () => {
         if(dropTarget.value) {
             uppy.use(DropTarget, {
                 target: dropTarget.value,
+                onDragOver: () => isDraggingOver.value = true,
+                onDragLeave: () => isDraggingOver.value = false,
+                onDrop: () => isDraggingOver.value = false,
             });
         } else {
             uppy.removePlugin(uppy.getPlugin('DropTarget'));
@@ -255,29 +260,40 @@
         </div>
     </template>
     <template v-else>
-        <div class="[&_input]:hidden" ref="dropTarget">
-            <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 }">
+        <div class="relative flex justify-center rounded-lg border border-dashed  px-6 py-10"
+            :class="[isDraggingOver ? 'border-primary-600' : 'border-gray-900/25']"
+            ref="dropTarget"
+        >
+            <div class="text-center" :class="{ 'invisible': isDraggingOver }">
+                <div class="text-sm leading-6 text-gray-600">
+                    <UploadDropText>
+                        <template #link="{ text }">
                             <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" />
+                                <span>{{ text }}</span>
+                                <FileInput class="sr-only" :uppy="uppy" :props="{ pretty: false }" />
                             </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>
+                    </UploadDropText>
                 </div>
+                <p class="text-xs leading-5 text-gray-600">
+                    <template v-if="field.fileFilter?.length">
+                        <span class="uppercase">
+                            {{ field.fileFilter.map(extension => extension.replace('.', '')).join(', ') }}
+                        </span>
+                    </template>
+                    <template v-if="field.maxFileSize">
+                        {{ ' '+__('sharp::form.upload.help_text.max_file_size', { size: filesizeLabel(field.maxFileSize * 1024 * 1024) }) }}
+                    </template>
+                </p>
             </div>
+            <template v-if="isDraggingOver">
+                <div class="absolute inset-0 flex flex-col justify-center items-center pointer-events-none">
+                    <ArrowDownOnSquareIcon class="w-8 h-8 text-gray-400 mb-1" />
+                    <div class="text-sm leading-6 text-gray-600">
+                        Drop your file here
+                    </div>
+                </div>
+            </template>
         </div>
     </template>
 

diff --git a/packages/form/src/components/fields/upload/UploadDropText.vue b/packages/form/src/components/fields/upload/UploadDropText.vue
@@ -7,6 +7,6 @@
 
 <template>
     {{ text[1] }}
-    <slot :link-text="text[2]" />
+    <slot name="link" :text="text[2]" />
     {{ text[3] }}
 </template>
diff --git a/resources/lang/en/form.php b/resources/lang/en/form.php
@@ -32,7 +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',
+    'upload.help_text.max_file_size' => 'up to :size',
 
     'multiselect.placeholder' => 'Select option',
     'multiselect.max_text' => 'Maximum items reached',

diff --git a/resources/lang/fr/form.php b/resources/lang/fr/form.php
@@ -32,6 +32,7 @@
     'upload.message.file_too_big' => 'Le fichier sélectionné est trop grand (max. :size)',
     'upload.message.bad_extension' => 'L\'extension du fichier est invalide',
     'upload.edit_modal.description' => 'Utilisez la molette de la souris pour zoomer. Maintenir la souris pour déplacer l’image ou la zone de recadrage.',
+    'upload.help_text.max_file_size' => 'jusqu’à :size',
 
     'multiselect.placeholder' => 'Choisir',
     'multiselect.max_text' => 'Maximum atteint',