fix(Image Formats Converter): better UI and clean image extension and multiple files

Author: sharevb

components.d.ts

@@ -277,6 +277,7 @@ declare module '@vue/runtime-core' {
     NMenu: typeof import('naive-ui')['NMenu']
     NProgress: typeof import('naive-ui')['NProgress']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSpin: typeof import('naive-ui')['NSpin']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OcrImage: typeof import('./src/tools/ocr-image/ocr-image.vue')['default']

package.json

@@ -82,8 +82,7 @@
     "cidr-tools": "^7.0.7",
     "colord": "^2.9.3",
     "composerize": "^1.6.12",
-    "composerize-ts": "^0.6.2",
-    "composeverter": "^1.7.2",
+    "composeverter": "^1.7.4",
     "convert": "^5.5.1",
     "countries-and-timezones": "^3.7.2",
     "countries-db": "^1.2.0",

pnpm-lock.yaml

@@ -78,12 +78,17 @@ const outputFormatHasQuality = computed(() => {
 
 const svgWasmLoaded = ref(false);
 
+async function onFilesUploaded(uploadedFiles: File[]) {
+  for (const file of uploadedFiles) {
+    await onFileUploaded(file);
+  }
+}
 async function onFileUploaded(uploadedFile: File) {
   const outputFormatValue = outputFormat.value;
   file.value = uploadedFile;
   let fileBuffer = new Uint8Array(await uploadedFile.arrayBuffer());
 
-  fileName.value = `${uploadedFile.name}`;
+  fileName.value = uploadedFile.name.replace(/\.\w+$/, '');
   status.value = 'processing';
   try {
     if (outputFormatValue === 'webp') {
@@ -128,16 +133,7 @@ async function onFileUploaded(uploadedFile: File) {
 
 <template>
   <div>
-    <div style="flex: 0 0 100%" mb-2>
-      <div mx-auto max-w-600px>
-        <c-file-upload
-          title="Drag and drop an image file here, or click to select a file"
-          accept="image/*"
-          paste-image
-          @file-upload="onFileUploaded"
-        />
-      </div>
-    </div>
+    <h4>First, select output options:</h4>
 
     <c-select
       v-model:value="outputFormat"
@@ -157,6 +153,21 @@ async function onFileUploaded(uploadedFile: File) {
       </n-form-item>
     </div>
 
+    <h4>Then, drag and drop your images below and they will be converted and downloaded immediately:</h4>
+
+    <div style="flex: 0 0 100%" mb-2>
+      <div mx-auto max-w-600px>
+        <c-file-upload
+          title="Drag and drop images files here, or click to select some files"
+          accept="image/*"
+          paste-image
+          multiple
+          @file-upload="onFileUploaded"
+          @files-upload="onFilesUploaded"
+        />
+      </div>
+    </div>
+
     <div mt-3 flex justify-center>
       <c-alert v-if="status === 'error'" type="error">
         An error occured processing {{ fileName }}