joachim/openwebrx-clone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

implement image upload error handling

Browse Source
This commit is contained in:
Jakob Ketterl 2021-04-29 19:07:10 +02:00
parent af553c422d
commit f481c3f8e3
2 changed files with 32 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
htdocs/css/admin.css
View File

@ -156,3 +156,7 @@ h1 {
.breadcrumb { .breadcrumb {
margin-top: .5rem; margin-top: .5rem;
} }
.imageupload.is-invalid ~ .invalid-feedback {
display: block;
}

35
htdocs/lib/settings/ImageUpload.js
View File

@ -1,12 +1,24 @@
$.fn.imageUpload = function() { $.fn.imageUpload = function() {
$.each(this, function(){ $.each(this, function(){
var $uploadButton = $(this).find('button.upload'); var $this = $(this);
var $restoreButton = $(this).find('button.restore'); var $uploadButton = $this.find('button.upload');
var $img = $(this).find('img'); var $restoreButton = $this.find('button.restore');
var $img = $this.find('img');
var originalUrl = $img.prop('src'); var originalUrl = $img.prop('src');
var $input = $(this).find('input'); var $input = $this.find('input');
var id = $input.prop('id'); var id = $input.prop('id');
var maxSize = $(this).data('max-size'); var maxSize = $this.data('max-size');
var $error;
var handleError = function(message) {
clearError();
$error = $('<div class="invalid-feedback">' + message + '</div>');
$this.after($error);
$this.addClass('is-invalid');
};
var clearError = function(message) {
if ($error) $error.remove();
$this.removeClass('is-invalid');
};
$uploadButton.click(function(){ $uploadButton.click(function(){
$uploadButton.prop('disabled', true); $uploadButton.prop('disabled', true);
var input = document.createElement('input'); var input = document.createElement('input');
@ -18,14 +30,14 @@ $.fn.imageUpload = function() {
reader.readAsArrayBuffer(e.target.files[0]); reader.readAsArrayBuffer(e.target.files[0]);
reader.onprogress = function(e) { reader.onprogress = function(e) {
if (e.loaded > maxSize) { if (e.loaded > maxSize) {
console.error('maximum file size exceeded, aborting file upload'); handleError('Maximum file size exceeded');
$uploadButton.prop('disabled', false); $uploadButton.prop('disabled', false);
reader.abort(); reader.abort();
} }
}; };
reader.onload = function(e) { reader.onload = function(e) {
if (e.loaded > maxSize) { if (e.loaded > maxSize) {
console.error('maximum file size exceeded, aborting file upload'); handleError('Maximum file size exceeded');
$uploadButton.prop('disabled', false); $uploadButton.prop('disabled', false);
return; return;
} }
@ -38,6 +50,14 @@ $.fn.imageUpload = function() {
}).done(function(data){ }).done(function(data){
$input.val(data.file); $input.val(data.file);
$img.prop('src', '/imageupload?file=' + data.file); $img.prop('src', '/imageupload?file=' + data.file);
clearError();
}).fail(function(xhr, error){
try {
var res = JSON.parse(xhr.responseText);
handleError(res.error || error);
} catch (e) {
handleError(error);
}
}).always(function(){ }).always(function(){
$uploadButton.prop('disabled', false); $uploadButton.prop('disabled', false);
}); });
@ -51,6 +71,7 @@ $.fn.imageUpload = function() {
$restoreButton.click(function(){ $restoreButton.click(function(){
$input.val('restore'); $input.val('restore');
$img.prop('src', originalUrl + "&mapped=false"); $img.prop('src', originalUrl + "&mapped=false");
clearError();
return false; return false;
}); });
}); });