Revision 8adadb6c
Von Sven Schöling vor mehr als 3 Jahren hinzugefügt
| js/kivi.FileDB.js | ||
|---|---|---|
| 75 | 75 |
}); |
| 76 | 76 |
}; |
| 77 | 77 |
|
| 78 |
ns.delete_all= function() {
|
|
| 79 |
ns.retrieve_all_keys((keys) => {
|
|
| 80 |
keys.forEach((key) => ns.delete_key(key)); |
|
| 78 |
ns.delete_all = function(success) {
|
|
| 79 |
ns.open_rw_store((store) => {
|
|
| 80 |
let request = store.clear(); |
|
| 81 |
request.onsuccess = success; |
|
| 82 |
request.onerror = ns.error; |
|
| 81 | 83 |
}); |
| 82 | 84 |
}; |
| 83 | 85 |
|
| 84 |
ns.delete_key= function(key, success) {
|
|
| 86 |
ns.delete_key = function(key, success) {
|
|
| 85 | 87 |
ns.open_rw_store((store) => {
|
| 86 | 88 |
let request = store.delete(key); |
| 87 | 89 |
request.onsuccess = (event) => { if (success) success(event.target.result); };
|
| 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 |
}; |
| templates/mobile_webpages/image_upload/local_list.html | ||
|---|---|---|
| 5 | 5 |
|
| 6 | 6 |
<h4>[% source.title | html %]</h4> |
| 7 | 7 |
|
| 8 |
<div id="updoad_result"></div> |
|
| 9 |
|
|
| 10 | 8 |
<p>Schritt 1: Bilder machen</p> |
| 11 | 9 |
|
| 12 | 10 |
<div id="stored-images" class="container"> |
| ... | ... | |
| 39 | 37 |
<div class="row"> |
| 40 | 38 |
[% P.M.input_tag("object_number", "", label=LxERP.t8("Number"), class="col s4", onkeyup="kivi.ImageUpload.resolve_object(event)") %]
|
| 41 | 39 |
<div id="object_description" class="col s8">-</div> |
| 42 |
[% P.M.button_tag("kivi.ImageUpload.upload_files()", LxERP.t8("Upload Images"), class="col s12") %]
|
|
| 40 |
[% P.M.button_tag("kivi.ImageUpload.upload_files()", LxERP.t8("Upload Images"), id="upload_images_submit", class="col s12") %]
|
|
| 43 | 41 |
</div> |
| 44 | 42 |
|
| 45 | 43 |
|
| ... | ... | |
| 58 | 56 |
<div class="modal-content"> |
| 59 | 57 |
<h4>Uploading</h4> |
| 60 | 58 |
|
| 61 |
<div class="progress"> |
|
| 59 |
<div id="upload_progress" class="progress">
|
|
| 62 | 60 |
<div class="indeterminate"></div> |
| 63 | 61 |
</div> |
| 64 | 62 |
</div> |
Auch abrufbar als: Unified diff
Image Upload: progress bar, success und error flash