asgardius/s3manager-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Upload folder feature

Browse source
This commit is contained in:
Tri Vo 2023-07-16 20:09:13 +07:00 committed by Lena Fuhrimann
parent 1982236804
commit 5667addaf0
2 changed files with 59 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
internal/app/s3manager/create_object.go
View file

@ -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, objectName, file, -1, opts)
_, err = s3.PutObject(r.Context(), bucketName, path, file, -1, opts)
if err != nil {
handleHTTPError(w, fmt.Errorf("error putting object: %w", err))
return

106
web/template/bucket.html.tmpl
View file

@ -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">
<form action="/api/buckets/{{ .BucketName }}/objects" method="POST" id="create-object-form" enctype="multipart/form-data">
<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>
<input type="file" id="upload-folder-input" webkitdirectory multiple style="display: none;">
<input type="file" id="upload-file-input" name="file" multiple style="display: none;">
<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) {
event.preventDefault();
function uploadFiles(files, url) {
uploadPromises = [];
for(file of files) {
uploadPromises.push(uploadFile(file, url));
}
Promise.all(uploadPromises).then(values => {
window.location.reload();
});
}
const form = event.target;
const url = new URL(form.action);
const formData = new FormData(form);
createNotification(formData.get("file").name)
fetch(url, {
function uploadFile(file, url) {
const formData = new FormData();
formData.append('file', file);
if( !!file.webkitRelativePath ) {
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.getElementsByTagName('p')[0].setHTML(fileName)
notification.removeAttribute("id")
notification.removeAttribute("style")
notifications = document.getElementById('notifications');
notifications.appendChild(notification)
notification = notificationTemplate.cloneNode(true);
notification.getElementsByTagName('p')[0].setHTML(fileName);
notification.removeAttribute("id");
notification.removeAttribute("style");
return notification;
}
window.onload = (event) => {
document.getElementById('create-folder-form').addEventListener('submit', handleCreateFolder);
document.getElementById('create-object-form').addEventListener('submit', handleCreateObject);
$('#create-folder-form').submit(handleCreateFolder)
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 }}