feat: add ability in dropzone to remove selected files and upload them on by one

Author: SerVitasik

adminforth/documentation/docs/tutorial/03-Customization/07-alert.md

@@ -24,7 +24,6 @@ Next variants are supported:
 * `warning`
 * `info`
 
-// ...existing code...
 ### Making alert responsive
 You can pass buttons in the alert method and receive a response like:
 

adminforth/spa/src/afcl/Dropzone.vue

@@ -16,37 +16,78 @@
           'h-32': !props.multiple,
         }"
       >
-          <div class="flex flex-col items-center justify-center pt-5 pb-6">
-              
-            
-              <svg v-if="!selectedFiles.length" class="w-8 h-8 mb-4 text-lightDropzoneIcon dark:text-darkDropzoneIcon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
-                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
-              </svg>
-              <div v-else class="flex items-center justify-center flex-wrap gap-1 w-full mt-1 mb-4">
-                <template v-for="file in selectedFiles">
-                  <p class="text-sm text-lightDropzoneIcon dark:text-darkDropzoneIcon flex items-center gap-1">
-                    <IconFileSolid class="w-5 h-5" />
-                    {{ file.name }} ({{ humanifySize(file.size) }})
-                  </p>
-                </template>
-
+        <input
+          :id="id"
+          type="file"
+          class="hidden"
+          :accept="props.extensions.join(',')"
+          @change="$event.target && doEmit(($event.target as HTMLInputElement).files!)"
+          :multiple="props.multiple || false"
+        />
+
+        <div class="flex flex-col items-center justify-center pt-5 pb-6">
+          <svg
+            v-if="!selectedFiles.length"
+            class="w-8 h-8 mb-4 text-lightDropzoneIcon dark:text-darkDropzoneIcon"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 20 16"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 
+                5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 
+                0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+            />
+          </svg>
+
+          <div
+            v-else
+            class="flex items-center justify-center  py-1 flex-wrap gap-2 w-full gap-2 mt-1 mb-4 px-4"
+          >
+            <template v-for="(file, index) in selectedFiles" :key="index">
+              <div
+                class="text-sm text-lightDropzoneIcon dark:text-darkDropzoneIcon  bg-lightDropzoneBackgroundHover dark:bg-darkDropzoneBackgroundHover rounded-md 
+                      flex items-center gap-1 px-2 py-1 group"
+              >
+                <IconFileSolid class="w-4 h-4 flex-shrink-0" />
+                <span class="truncate max-w-[200px]">{{ file.name }}</span>
+                <span class="text-xs">({{ humanifySize(file.size) }})</span>
+                <button
+                  type="button"
+                  @click.prevent.stop="removeFile(index)"
+                  class="text-lightDropzoneIcon dark:text-darkDropzoneIcon hover:text-red-600 dark:hover:text-red-400 
+                        opacity-70 hover:opacity-100 transition-all"
+                  :title="$t('Remove file')"
+                >
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
               </div>
-
-              <p v-if="!selectedFiles.length" class="mb-2 text-sm text-lightDropzoneText dark:text-darkDropzoneText"><span class="font-semibold">{{ $t('Click to upload') }}</span> {{ $t('or drag and drop') }}</p>
-              <p class="text-xs text-lightDropzoneText dark:text-darkDropzoneText">
-                {{ props.extensions.join(', ').toUpperCase().replace(/\./g, '') }}
-                <template v-if="props.maxSizeBytes">
-                 (Max size: {{ humanifySize(props.maxSizeBytes) }})
-                </template>
-              </p>
+            </template>
           </div>
-          <input :id="id" type="file" class="hidden" 
-            :accept="props.extensions.join(', ')"
-            @change="$event.target && doEmit(($event.target as HTMLInputElement).files!)"
-            :multiple="props.multiple || false"
-          />
+
+          <p
+            v-if="!selectedFiles.length"
+            class="mb-2 text-sm text-lightDropzoneText dark:text-darkDropzoneText"
+          >
+            <span class="font-semibold">{{ $t('Click to upload') }}</span>
+            {{ $t('or drag and drop') }}
+          </p>
+
+          <p class="text-xs text-lightDropzoneText dark:text-darkDropzoneText">
+            {{ props.extensions.join(', ').toUpperCase().replace(/\./g, '') }}
+            <template v-if="props.maxSizeBytes">
+              (Max size: {{ humanifySize(props.maxSizeBytes) }})
+            </template>
+          </p>
+        </div>
       </label>
-    </form> 
+    </form>
 </template>
 
 <script setup lang="ts">
@@ -73,12 +114,17 @@ const selectedFiles: Ref<{
   mime: string,
 }[]> = ref([]);
 
+const storedFiles: Ref<File[]> = ref([]);
+
 watch(() => props.modelValue, (files) => {
-  selectedFiles.value = Array.from(files).map(file => ({
-    name: file.name,
-    size: file.size,
-    mime: file.type,
-  }));
+  if (files && files.length > 0) {
+    selectedFiles.value = Array.from(files).map(file => ({
+      name: file.name,
+      size: file.size,
+      mime: file.type,
+    }));
+    storedFiles.value = Array.from(files);
+  }
 });
 
 function doEmit(filesIn: FileList) {
@@ -110,26 +156,37 @@ function doEmit(filesIn: FileList) {
       });
       return;
     }
-
+    
     validFiles.push(file);
   });
 
   if (!multiple) {
-    validFiles.splice(1);
+    storedFiles.value = validFiles.slice(0, 1);
+  } else {
+    storedFiles.value = [...storedFiles.value, ...validFiles];
   }
-  selectedFiles.value = validFiles.map(file => ({
+  
+  selectedFiles.value = storedFiles.value.map(file => ({
     name: file.name,
     size: file.size,
     mime: file.type,
   }));
 
-  emit('update:modelValue', validFiles);
+  emit('update:modelValue', storedFiles.value);
+
 }
 
 const dragging = ref(false);
 
+function removeFile(index: number) {
+  storedFiles.value = storedFiles.value.filter((_, i) => i !== index);
+  selectedFiles.value = selectedFiles.value.filter((_, i) => i !== index);
+  emit('update:modelValue', storedFiles.value);
+}
+
 function clear() {
   selectedFiles.value = [];
+  storedFiles.value = [];
   emit('update:modelValue', []);
   const form = document.getElementById(id)?.closest('form');
   form?.reset();