web client: improve file upload

This commit is contained in:
Nicola Murino 2021-11-22 12:25:36 +01:00
parent 3d6b09e949
commit 8a8298ad46
No known key found for this signature in database
GPG key ID: 2F1FB59433D5A8CB
6 changed files with 45 additions and 9 deletions

View file

@ -98,6 +98,8 @@ func getMappedStatusCode(err error) int {
statusCode = http.StatusForbidden
case os.ErrNotExist:
statusCode = http.StatusNotFound
case common.ErrQuotaExceeded:
statusCode = http.StatusRequestEntityTooLarge
default:
statusCode = http.StatusInternalServerError
}

View file

@ -10372,7 +10372,7 @@ func TestWebUploadSFTP(t *testing.T) {
req.Header.Add("Content-Type", writer.FormDataContentType())
setBearerForReq(req, webAPIToken)
rr = executeRequest(req)
checkResponseCode(t, http.StatusInternalServerError, rr)
checkResponseCode(t, http.StatusRequestEntityTooLarge, rr)
assert.Contains(t, rr.Body.String(), "denying write due to space limit")
// delete the file
req, err = http.NewRequest(http.MethodDelete, userFilesPath+"?path=file.txt", nil)
@ -10388,7 +10388,7 @@ func TestWebUploadSFTP(t *testing.T) {
req.Header.Add("Content-Type", writer.FormDataContentType())
setBearerForReq(req, webAPIToken)
rr = executeRequest(req)
checkResponseCode(t, http.StatusInternalServerError, rr)
checkResponseCode(t, http.StatusRequestEntityTooLarge, rr)
assert.Contains(t, rr.Body.String(), "denying write due to space limit")
_, err = httpdtest.RemoveUser(sftpUser, http.StatusOK)

View file

@ -317,6 +317,9 @@ func TestMappedStatusCode(t *testing.T) {
err = os.ErrNotExist
code = getMappedStatusCode(err)
assert.Equal(t, http.StatusNotFound, code)
err = common.ErrQuotaExceeded
code = getMappedStatusCode(err)
assert.Equal(t, http.StatusRequestEntityTooLarge, code)
err = os.ErrClosed
code = getMappedStatusCode(err)
assert.Equal(t, http.StatusInternalServerError, code)

View file

@ -124,6 +124,8 @@ paths:
$ref: '#/components/responses/Unauthorized'
'403':
$ref: '#/components/responses/Forbidden'
'413':
$ref: '#/components/responses/RequestEntityTooLarge'
'500':
$ref: '#/components/responses/InternalServerError'
default:
@ -3610,6 +3612,8 @@ paths:
$ref: '#/components/responses/Unauthorized'
'403':
$ref: '#/components/responses/Forbidden'
'413':
$ref: '#/components/responses/RequestEntityTooLarge'
'500':
$ref: '#/components/responses/InternalServerError'
default:
@ -3750,6 +3754,12 @@ components:
application/json:
schema:
$ref: '#/components/schemas/ApiResponse'
RequestEntityTooLarge:
description: Request Entity Too Large, max allowed size exceeded
content:
application/json:
schema:
$ref: '#/components/schemas/ApiResponse'
InternalServerError:
description: Internal Server Error
content:

View file

@ -215,8 +215,8 @@
],
"templates_path": "templates",
"static_files_path": "static",
"backups_path": "backups",
"openapi_path": "openapi",
"backups_path": "backups",
"web_root": "",
"certificate_file": "",
"certificate_key_file": "",

View file

@ -84,15 +84,15 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="uploadFilesModalLabel">
Upload one or more files
Upload a file
</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form id="upload_files_form" action="" method="POST" enctype="multipart/form-data">
<form id="upload_files_form" action="{{.FilesURL}}?path={{.CurrentDir}}" method="POST" enctype="multipart/form-data">
<div class="modal-body">
<input type="file" class="form-control-file" id="files_name" name="filenames" required multiple>
<input type="file" class="form-control-file" id="files_name" name="filenames" required>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
@ -159,6 +159,13 @@
</div>
</div>
</div>
<div class="modal fade" id="spinnerModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered justify-content-center" role="document">
<span style="color: #333333;" class="fa fa-spinner fa-spin fa-3x"></span>
<!-- <span id="uploadProgress" style="color: #3A3B3C;" class="mx-3"></span> -->
</div>
</div>
{{end}}
{{define "extra_js"}}
@ -329,6 +336,13 @@
});
}
function keepAlive() {
$.ajax({
url: '{{.ProfileURL}}',
timeout: 15000
});
}
$(document).ready(function () {
$("#create_dir_form").submit(function (event) {
event.preventDefault();
@ -368,7 +382,7 @@
$("#upload_files_form").submit(function (event){
event.preventDefault();
$('uploadFilesModal').modal('hide');
var keepAliveTimer = setInterval(keepAlive, 90000);
var path = '{{.FilesURL}}?path={{.CurrentDir}}';
$.ajax({
url: path,
@ -377,11 +391,18 @@
processData: false,
contentType: false,
headers: { 'X-CSRF-TOKEN': '{{.CSRFToken}}' },
timeout: 15000,
timeout: 0,
beforeSend: function () {
$('#uploadFilesModal').modal('hide');
$('#spinnerModal').modal('show');
},
success: function (result) {
clearInterval(keepAliveTimer);
location.reload();
},
error: function ($xhr, textStatus, errorThrown) {
clearInterval(keepAliveTimer);
$('#spinnerModal').modal('hide');
var txt = "Error uploading files";
if ($xhr) {
var json = $xhr.responseJSON;