implement s3 upload from drag and drop

frontend/src/components/home.js

@@ -1,7 +1,7 @@
 function getFilesDataTransferItems(dataTransferItems) {
     function traverseFileTreePromise(item, path = "", folder) {
         return new Promise(resolve => {
-            if (item === null) {
+            if (item === null || typeof item === 'undefined') {
                 // nothing to do
             } else if (item.isFile) {
                 item.file(file => {
@@ -28,10 +28,17 @@ function getFilesDataTransferItems(dataTransferItems) {
     let files = [];
     return new Promise((resolve, reject) => {
         let entriesPromises = [];
-        for (let it of dataTransferItems)
+        for (let it of dataTransferItems) {
+            let entry;
+            if (typeof it.webkitGetAsEntry === 'function') {
+                entry = it.webkitGetAsEntry();
+            } else if (typeof it.getAsEntry === 'function') {
+                entry = it.getAsEntry();
+            }
             entriesPromises.push(
-                traverseFileTreePromise(it.webkitGetAsEntry(), "", files)
+                traverseFileTreePromise(entry, "", files)
             );
+        }
         Promise.all(entriesPromises).then(entries => {
             resolve(files);
         });
@@ -42,6 +49,30 @@ export function get_files_data_transfer_items(data_transfer_items) {
     return getFilesDataTransferItems(data_transfer_items);
 }
 
-export function upload_file(file, url) {
-    new Promise(resolve => console.log(file, url));
+function read_file(file) {
+    return new Promise((resolve, reject) => {
+        let reader = new FileReader();
+        reader.onloadend = () => {
+            resolve(reader.result)
+        };
+        reader.onerror = reject;
+        reader.readAsArrayBuffer(file);
+    });
+}
+
+export function upload_file(file, url) {
+    return new Promise(resolve => {
+        console.log("hi");
+        read_file(file).then((content) => {
+            fetch(url, {
+                method: 'PUT',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'multipart/form-data',
+                },
+                body: new Blob([content], { type: file.type }),
+            }).then(response => resolve(response));
+        },
+        reject => console.log(reject));
+    });
 }