Revision 53baaec8
Von Sven Schöling vor mehr als 3 Jahren hinzugefügt
| js/kivi.ImageUpload.js | ||
|---|---|---|
| 2 | 2 |
"use strict"; |
| 3 | 3 |
|
| 4 | 4 |
const MAXSIZE = 15*1024*1024; // 5MB size limit |
| 5 |
const M = kivi.Materialize; |
|
| 5 | 6 |
|
| 6 | 7 |
let num_images = 0; |
| 7 | 8 |
|
| ... | ... | |
| 73 | 74 |
myfiles.forEach(file => {
|
| 74 | 75 |
filesize += file.size; |
| 75 | 76 |
if (filesize > maxsize) {
|
| 76 |
$("#upload_result").html(kivi.t8("filesize too big: ") + filesize+ kivi.t8(" bytes, max=") + maxsize );
|
|
| 77 |
M.flash(kivi.t8("filesize too big: ") + ns.format_si(filesize) + kivi.t8(" > ") + ns.format_si(maxsize));
|
|
| 78 |
$("#upload_modal").modal("close");
|
|
| 77 | 79 |
return; |
| 78 | 80 |
} |
| 79 | 81 |
|
| ... | ... | |
| 89 | 91 |
|
| 90 | 92 |
let xhr = new XMLHttpRequest; |
| 91 | 93 |
xhr.open('POST', 'controller.pl', true);
|
| 92 |
xhr.success = ns.attSuccess;
|
|
| 93 |
xhr.progress = ns.attProgress; |
|
| 94 |
xhr.error = ns.attFailed; |
|
| 95 |
xhr.abort = ns.attCanceled; |
|
| 94 |
xhr.onload = ns.attSuccess;
|
|
| 95 |
xhr.upload.onprogress = ns.attProgress;
|
|
| 96 |
xhr.upload.onerror = ns.attFailed;
|
|
| 97 |
xhr.upload.onabort = ns.attCanceled;
|
|
| 96 | 98 |
xhr.send(data); |
| 97 | 99 |
}); |
| 98 | 100 |
}); |
| ... | ... | |
| 100 | 102 |
|
| 101 | 103 |
ns.attProgress = function(event) {
|
| 102 | 104 |
if (event.lengthComputable) {
|
| 103 |
var percentComplete = (event.loaded / event.total) * 100;
|
|
| 104 |
$("#upload_result").html(percentComplete+" % "+ kivi.t8("uploaded"));
|
|
| 105 |
var percent_complete = (event.loaded / event.total) * 100;
|
|
| 106 |
$("#upload_progress div").removeClass("indeterminate").addClass("determinate").attr("style", "width: " + percent_complete + "%");
|
|
| 105 | 107 |
} |
| 106 | 108 |
}; |
| 107 | 109 |
|
| 108 | 110 |
ns.attFailed = function() {
|
| 109 | 111 |
$('#upload_modal').modal('close');
|
| 110 |
$("#upload_result").html(kivi.t8("An error occurred while transferring the file."));
|
|
| 112 |
M.flash(kivi.t8("An error occurred while transferring the file."));
|
|
| 111 | 113 |
}; |
| 112 | 114 |
|
| 113 | 115 |
ns.attCanceled = function() {
|
| 114 | 116 |
$('#upload_modal').modal('close');
|
| 115 |
$("#upload_result").html(kivi.t8("The transfer has been canceled by the user."));
|
|
| 117 |
M.flash(kivi.t8("The transfer has been canceled by the user."));
|
|
| 116 | 118 |
}; |
| 117 | 119 |
|
| 118 | 120 |
ns.attSuccess = function() {
|
| 119 | 121 |
$('#upload_modal').modal('close');
|
| 120 |
$("#upload_result").html(kivi.t8("Files have been uploaded successfully."));
|
|
| 122 |
M.flash(kivi.t8("Files have been uploaded successfully."));
|
|
| 123 |
kivi.FileDB.delete_all(ns.reload_images); |
|
| 121 | 124 |
}; |
| 122 | 125 |
|
| 123 | 126 |
ns.resolve_object = function(event) {
|
| ... | ... | |
| 150 | 153 |
}); |
| 151 | 154 |
}; |
| 152 | 155 |
|
| 156 |
/* this tries to format the number human readable. 3 significant digits, si suffix, */ |
|
| 157 |
ns.format_si = function(n) {
|
|
| 158 |
const prefixes = ["", "K" , "M", "G", "T", "P"]; |
|
| 159 |
let i = 0; |
|
| 160 |
while (n >= 1024) {
|
|
| 161 |
n /= 1024; |
|
| 162 |
i++; |
|
| 163 |
} |
|
| 164 |
|
|
| 165 |
return kivi.format_amount(n, 3 - (n|0).toString().length) + prefixes[i] + "B"; |
|
| 166 |
}; |
|
| 167 |
|
|
| 153 | 168 |
ns.init = function() {
|
| 154 | 169 |
ns.reload_images(); |
| 155 | 170 |
}; |
Auch abrufbar als: Unified diff
Image Upload: progress bar, success und error flash