mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-30 19:39:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source
This commit is contained in:
ShareVB 2025-01-12 11:43:57 +01:00
parent e9a55414d9
commit c35bacaebd
3 changed files with 2449 additions and 1913 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/tools/image-converter/image-converter.vue
View file

@ -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 }}