1 namespace("kivi.ImageUpload", function(ns) {
4 const MAXSIZE = 15*1024*1024; // 5MB size limit
8 ns.add_files = function(target) {
10 for (var i = 0; i < target.files.length; i++) {
11 files.push(target.files.item(i));
14 kivi.FileDB.store_image(files[0], files[0].name, () => {
20 ns.reload_images = function() {
21 kivi.FileDB.retrieve_all((data) => {
22 $('#stored-images').empty();
23 num_images = data.length;
25 data.forEach(ns.create_thumb_row);
26 ns.set_image_button_enabled();
30 ns.create_thumb_row = function(file) {
31 let URL = window.URL || window.webkitURL;
32 let file_url = URL.createObjectURL(file);
34 let $row = $("<div>").addClass("row image-upload-row");
35 let $button = $("<a>")
36 .addClass("btn-floating btn-large waves-effect waves-light red")
37 .click((event) => ns.remove_image(event, file.name))
38 .append($("<i>delete</i>").addClass("material-icons"));
39 $row.append($("<div>").addClass("col s3").append($button));
41 let $image = $('<img>').attr("src", file_url).addClass("materialboxed responsive-img");
42 $row.append($("<div>").addClass("col s9").append($image));
44 $("#stored-images").append($row);
47 ns.remove_image = function(event, key) {
48 let $row = $(event.target).closest(".image-upload-row");
49 kivi.FileDB.delete_key(key, () => {
52 ns.set_image_button_enabled();
56 ns.set_image_button_enabled = function() {
57 $('#upload_images_submit').attr("disabled", num_images == 0 || !$('#object_id').val());
61 ns.upload_files = function() {
62 let id = $('#object_id').val();
63 let type = $('#object_type').val();
65 ns.upload_selected_files(id, type, MAXSIZE);
68 ns.upload_selected_files = function(id, type, maxsize) {
69 $("#upload_modal").modal("open");
71 kivi.FileDB.retrieve_all((myfiles) => {
73 myfiles.forEach(file => {
74 filesize += file.size;
75 if (filesize > maxsize) {
76 $("#upload_result").html(kivi.t8("filesize too big: ") + filesize+ kivi.t8(" bytes, max=") + maxsize );
80 let data = new FormData();
81 data.append("uploadfiles[]", file);
82 data.append("action", "File/ajax_files_uploaded");
83 data.append("json", "1");
84 data.append("object_type", type);
85 data.append("object_id", id);
86 data.append("file_type", "attachment");
88 $("#upload_result").html(kivi.t8("start upload"));
90 let xhr = new XMLHttpRequest;
91 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;
101 ns.attProgress = function(event) {
102 if (event.lengthComputable) {
103 var percentComplete = (event.loaded / event.total) * 100;
104 $("#upload_result").html(percentComplete+" % "+ kivi.t8("uploaded"));
108 ns.attFailed = function() {
109 $('#upload_modal').modal('close');
110 $("#upload_result").html(kivi.t8("An error occurred while transferring the file."));
113 ns.attCanceled = function() {
114 $('#upload_modal').modal('close');
115 $("#upload_result").html(kivi.t8("The transfer has been canceled by the user."));
118 ns.attSuccess = function() {
119 $('#upload_modal').modal('close');
120 $("#upload_result").html(kivi.t8("Files have been uploaded successfully."));
123 ns.resolve_object = function(event) {
124 let obj_type = $('#object_type').val();
125 let number = event.target.value;
128 url: "controller.pl",
130 action: "ImageUpload/resolve_object_by_number",
131 object_type: obj_type,
132 object_number: number
137 $("#object_description").html("");
138 $("#object_id").val("");
140 $("#object_description").html(json.description);
141 $("#object_id").val(json.id);
143 ns.set_image_button_enabled();
146 $("#object_description").html("");
147 $("#object_id").val("");
148 ns.set_image_button_enabled();
153 ns.init = function() {
158 $(kivi.ImageUpload.init);