openwebrx-clone/htdocs/lib/settings/ImageUpload.js

87 lines
3.4 KiB
JavaScript
Raw Normal View History

2021-02-08 22:29:24 +00:00
$.fn.imageUpload = function() {
$.each(this, function(){
2021-04-29 17:07:10 +00:00
var $this = $(this);
var $uploadButton = $this.find('button.upload');
var $restoreButton = $this.find('button.restore');
var $img = $this.find('img');
2021-02-10 20:29:46 +00:00
var originalUrl = $img.prop('src');
2021-04-29 17:07:10 +00:00
var $input = $this.find('input');
var id = $input.prop('id');
2021-04-29 17:07:10 +00:00
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');
};
2021-02-10 20:29:46 +00:00
$uploadButton.click(function(){
var input = document.createElement('input');
input.type = 'file';
2021-05-07 14:57:54 +00:00
input.accept = 'image/jpeg, image/png, image/webp';
2021-02-08 22:29:24 +00:00
input.onchange = function(e) {
2021-05-07 15:33:10 +00:00
$uploadButton.prop('disabled', true);
var $spinner = $('<span class="spinner-border spinner-border-sm mr-1" role="status"></span>');
$uploadButton.prepend($spinner);
var reader = new FileReader()
reader.readAsArrayBuffer(e.target.files[0]);
2021-04-29 16:18:18 +00:00
reader.onprogress = function(e) {
if (e.loaded > maxSize) {
2021-04-29 17:07:10 +00:00
handleError('Maximum file size exceeded');
2021-04-29 16:18:18 +00:00
$uploadButton.prop('disabled', false);
2021-05-07 15:33:10 +00:00
$spinner.remove();
2021-04-29 16:18:18 +00:00
reader.abort();
}
};
reader.onload = function(e) {
2021-04-29 16:18:18 +00:00
if (e.loaded > maxSize) {
2021-04-29 17:07:10 +00:00
handleError('Maximum file size exceeded');
2021-04-29 16:18:18 +00:00
$uploadButton.prop('disabled', false);
2021-05-07 15:33:10 +00:00
$spinner.remove();
2021-04-29 16:18:18 +00:00
return;
}
$.ajax({
2021-04-29 17:41:06 +00:00
url: '../imageupload?id=' + id,
type: 'POST',
data: e.target.result,
processData: false,
contentType: 'application/octet-stream',
}).done(function(data){
$input.val(data.file);
$img.one('load', function() {
$uploadButton.prop('disabled', false);
$spinner.remove();
});
2021-04-29 17:53:43 +00:00
$img.prop('src', '../imageupload?file=' + data.file);
2021-04-29 17:07:10 +00:00
clearError();
}).fail(function(xhr, error){
try {
var res = JSON.parse(xhr.responseText);
handleError(res.error || error);
} catch (e) {
handleError(error);
}
2021-02-10 20:29:46 +00:00
$uploadButton.prop('disabled', false);
2021-05-07 15:33:10 +00:00
$spinner.remove();
});
}
};
2021-02-08 22:29:24 +00:00
input.click();
return false;
});
2021-02-10 20:29:46 +00:00
$restoreButton.click(function(){
$input.val('restore');
$img.prop('src', originalUrl + "&mapped=false");
2021-04-29 17:07:10 +00:00
clearError();
2021-02-10 20:29:46 +00:00
return false;
});
2021-02-08 22:29:24 +00:00
});
}