Upload folder feature

internal/app/s3manager/create_object.go

@@ -21,7 +21,7 @@ func HandleCreateObject(s3 S3, sseInfo SSEType) http.HandlerFunc {
 			handleHTTPError(w, fmt.Errorf("error parsing multipart form: %w", err))
 			return
 		}
-		file, header, err := r.FormFile("file")
+		file, _, err := r.FormFile("file")
 		path := r.FormValue("path")
 		if err != nil {
 			handleHTTPError(w, fmt.Errorf("error getting file from form: %w", err))
@@ -51,8 +51,7 @@ func HandleCreateObject(s3 S3, sseInfo SSEType) http.HandlerFunc {
 			}
 		}
 
-		objectName := fmt.Sprintf("%s%s", path, header.Filename)
+		_, err = s3.PutObject(r.Context(), bucketName, path, file, -1, opts)
-		_, err = s3.PutObject(r.Context(), bucketName, objectName, file, -1, opts)
 		if err != nil {
 			handleHTTPError(w, fmt.Errorf("error putting object: %w", err))
 			return

web/template/bucket.html.tmpl

@@ -102,50 +102,27 @@
 </div>
 
 <div class="fixed-action-btn">
-    <button type="button" class="btn-floating btn-large red modal-trigger" data-target="modal-create-object">
+    <button type="button" class="btn-floating btn-large red tooltipped" id="upload-file-btn" data-position="top" data-tooltip="Upload files">
         <i class="large material-icons">add</i>
     </button>
 
-     <button type="button" class="btn-floating btn-large red modal-trigger" data-target="modal-create-folder">
+    <button type="button" class="btn-floating btn-large red tooltipped" id="upload-folder-btn" data-position="top" data-tooltip="Upload folder">
         <i class="large material-icons">create_new_folder</i>
     </button>
+
+     <button type="button" class="btn-floating btn-large red modal-trigger tooltipped" data-target="modal-create-folder" data-position="top" data-tooltip="Change path">
+        <i class="large material-icons">create</i>
+    </button>
 </div>
 
-<div id="modal-create-object" class="modal">
+<input type="file" id="upload-folder-input" webkitdirectory multiple style="display: none;">
-    <form action="/api/buckets/{{ .BucketName }}/objects" method="POST" id="create-object-form" enctype="multipart/form-data">
+<input type="file" id="upload-file-input" name="file" multiple style="display: none;">
-
-        <div class="modal-content">
-            <h4>Create Object</h4>
-            <br>
-            <div class="row">
-                <div class="col s6">
-                    <div class="file-field input-field">
-                        <div class="btn">
-                            <span>File</span>
-                            <input type="file" name="file">
-                        </div>
-                        <div class="file-path-wrapper">
-                            <input class="file-path validate" type="text">
-                        </div>
-                        <input type="hidden" name="path" value="{{ $.CurrentPath }}">
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="modal-footer">
-            <button type="button" class="modal-close waves-effect waves-green btn-flat">Cancel</button>
-            <button type="submit" class="modal-close waves-effect waves-green btn">Upload</button>
-        </div>
-
-    </form>
-</div>
 
 <div id="modal-create-folder" class="modal">
     <form id="create-folder-form" enctype="multipart/form-data">
 
         <div class="modal-content">
-            <h4>Create Folder</h4>
+            <h4>Change directory path</h4>
             <br>
             <div class="row">
                 <div class="col s6">
@@ -181,6 +158,12 @@ function deleteBucket(bucketName) {
     })
 }
 
+function handleUploadFiles(event) {
+    files = event.target.files
+    url = "/api/buckets/{{ .BucketName }}/objects"
+    uploadFiles(files, url);
+}
+
 function handleCreateFolder(event) {
     event.preventDefault();
 
@@ -196,35 +179,60 @@ function handleCreateFolder(event) {
     window.location.href = newHref
 }
 
-function handleCreateObject(event) {
+function uploadFiles(files, url) {
-    event.preventDefault();
+    uploadPromises = [];
+    for(file of files) {
+        uploadPromises.push(uploadFile(file, url));
+    }
+    Promise.all(uploadPromises).then(values => {
+        window.location.reload();
+    });
+}
 
-    const form = event.target;
+function uploadFile(file, url) {
-    const url = new URL(form.action);
+    const formData = new FormData();
-    const formData = new FormData(form);
+    formData.append('file', file);
-    createNotification(formData.get("file").name)
+    if( !!file.webkitRelativePath ) {
-    fetch(url, {
+        formData.append('path', "{{ .CurrentPath }}" + file.webkitRelativePath );
+    } else {
+        formData.append('path', "{{ .CurrentPath }}" + file.name );
+    }
+
+    const notification = createNotification(file.name);
+    notifications = document.getElementById('notifications');
+    notifications.appendChild(notification);
+
+    return fetch(url, {
         method: "POST",
         body: formData
     }).then(response => {
-        window.location.reload();
+        notifications.removeChild(notification);
     })
 }
 
 function createNotification(fileName) {
     notificationTemplate = document.getElementById('notification-template');
-    notification = notificationTemplate.cloneNode(true)
+    notification = notificationTemplate.cloneNode(true);
-    notification.getElementsByTagName('p')[0].setHTML(fileName)
+    notification.getElementsByTagName('p')[0].setHTML(fileName);
-    notification.removeAttribute("id")
+    notification.removeAttribute("id");
-    notification.removeAttribute("style")
+    notification.removeAttribute("style");
-
+    return notification;
-    notifications = document.getElementById('notifications');
-    notifications.appendChild(notification)
 }
 
 window.onload = (event) => {
-    document.getElementById('create-folder-form').addEventListener('submit', handleCreateFolder);
+    $('#create-folder-form').submit(handleCreateFolder)
-    document.getElementById('create-object-form').addEventListener('submit', handleCreateObject);
+
+    uploadFolderInput = $('#upload-folder-input');
+    $('#upload-folder-btn').click(event => uploadFolderInput.click());
+    uploadFolderInput.change(handleUploadFiles);
+
+    uploadFileInput = $('#upload-file-input');
+    $('#upload-file-btn').click(event => uploadFileInput.click());
+    uploadFileInput.change(handleUploadFiles);
+
+    $(document).ready(function(){
+        $('.tooltipped').tooltip();
+    });
 };
 </script>
 {{ end }}