File uploading stuff

src/lib/components/FileUpload.svelte

@@ -7,6 +7,8 @@
     let files;
     let preview;
 
+    let progress = 0;
+
     function getBase64(image) {
         const reader = new FileReader();
         reader.readAsDataURL(image);
@@ -15,19 +17,40 @@
             uploadFunction(e.target.result);
         };
     };
+    async function uploadFunction(imageD) {
+        const imgData = imageD.split(',').pop();
 
-    async function uploadFunction(imgBase64) {
-        const imgData = imgBase64.split(',').pop();
+        var images = [];
 
-        var fData = (new FormData());
+        var fSize = 1024 * 256;
 
-        fData.append('img',imgData);
-        fData.append('extension',fileInput.value.split('.').pop());
+        for (var i = 0; i * fSize < imgData.length + 1; i++) {
+            images.push(imgData.substring(i * fSize, i * fSize + fSize));
+        }
+
+        var rId = (Math.random() + 1).toString(36).substring(7);;
+        var extension = fileInput.value.split('.').pop();
+
+        for (var i = 0; i < images.length; i++) {
+            var fData = (new FormData());
+
+            var image = images[i];
+            
+            fData.append('img',image);
+            fData.append('extension',extension);
+            fData.append('last',i == (images.length - 1));
+            fData.append('id',rId);
 
-        form = await fetch(`/api/fileCreate`, {
             method: 'POST',
-            body: fData
-        }).then(x => x.json());
+            form = await fetch(`/api/fileCreate`, {
+                method: 'POST',
+                body: fData,
+            }).then(x => x.json());
+
+            progress = (i+1) / (images.length);
+
+            await setTimeout(() => new Promise.resolve(),100);
+        }
     };
 </script>
 
@@ -42,13 +65,16 @@
     }
 </style>
 
-<form action='/api/postCreate' method='POST' >
+<form action='#' method='GET' >
     {#if preview}
         <img src={preview} alt="Image preview"/>
     {:else}
         <img src='/icon_sanifae.svg' alt="Image preview"/>
     {/if}
     <input class="hidden" id="file-to-upload" type="file" bind:files bind:this={fileInput} on:change={() => getBase64(files[0])}/>
+    <p>
+        Progress: {progress * 100}%
+    </p>
     <p> 
         <Button class="upload-btn" clickFunc={ () => fileInput.click() }>Upload</Button>
     </p>