fix: download file with same name it was uploaded (#26)

src/components/converter/index.tsx

@@ -3,8 +3,9 @@ import DraggerUpload from "../dragger-upload"
 import { Button, UploadFile } from "antd"
 import convertFiles from "../../services/converter"
 import { Format } from "../../model/format"
-import './converter.css'
+import { ConvertedFile } from "../../model/converted-file"
 
+import './converter.css'
 /** Properties of Converter */
 type ConverterProps = {
     /** Define allowed types to be uploaded */
@@ -20,14 +21,14 @@ function Converter(props: ConverterProps): JSX.Element {
         setFileList(files)
     }, [])
 
-    const downloadBlob = useCallback((blob: Blob) => {
-        const url = window.URL.createObjectURL(blob);
+    const downloadBlob = useCallback((convertedFile: ConvertedFile) => {
+        const url = window.URL.createObjectURL(convertedFile.blob);
         const a = document.createElement("a")
         document.body.appendChild(a)
         a.style.display = "none"
         a.href = url;
         a.target = "_blank"
-        a.download = 'test.gif';
+        a.download = convertedFile.newFileName;
         a.click();
         window.URL.revokeObjectURL(url);
     }, [])

src/model/converted-file.ts

@@ -0,0 +1,5 @@
+export type ConvertedFile = {
+    newFileName: string,
+    blob: Blob,
+    result: 'success' | 'error'
+}

src/services/converter.ts

@@ -1,8 +1,9 @@
 import { createFFmpeg } from "@ffmpeg/ffmpeg";
 import { UploadFile } from "antd";
+import { ConvertedFile } from "../model/converted-file";
 
-async function convertFiles(fileList: UploadFile[]): Promise<Blob[]>{
-    const blobList: Blob[] = []
+async function convertFiles(fileList: UploadFile[]): Promise<ConvertedFile[]>{
+    const blobList: ConvertedFile[] = []
 
     for (const file of fileList) {
         const sourceBuffer = await file.originFileObj?.arrayBuffer() as ArrayBuffer
@@ -22,7 +23,12 @@ async function convertFiles(fileList: UploadFile[]): Promise<Blob[]>{
           await ffmpeg.run("-i", file.name, outputName);
 
           const output = ffmpeg.FS("readFile", outputName);
-          blobList.push(new Blob([output.buffer], { type: "image/gif" }))
+          const blob = new Blob([output.buffer], { type: "image/gif" })
+          blobList.push({
+            newFileName: outputName,
+            blob,
+            result: "success"
+          })
     }
 
     return blobList