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

components.d.ts

@@ -144,9 +144,10 @@ declare module '@vue/runtime-core' {
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
-    NSpace: typeof import('naive-ui')['NSpace']
+    NProgress: typeof import('naive-ui')['NProgress']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSpin: typeof import('naive-ui')['NSpin']
-    NTable: typeof import('naive-ui')['NTable']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']

src/tools/image-converter/image-converter.vue

@@ -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>
+    <h4>First, select output options:</h4>
-      <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>
 
     <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 }}