js/kivi.ImageUpload.js

   1 namespace("kivi.ImageUpload", function(ns) {
   2   "use strict";
   3
   4   const MAXSIZE = 15*1024*1024; // 5MB size limit
   5
   6   let num_images = 0;
   7
   8   ns.add_files = function(target) {
   9     let files = [];
  10     for (var i = 0; i < target.files.length; i++) {
  11       files.push(target.files.item(i));
  12     }
  13
  14     kivi.FileDB.store_image(files[0], files[0].name, () => {
  15       ns.reload_images();
  16       target.value = null;
  17     });
  18   };
  19
  20   ns.reload_images = function() {
  21     kivi.FileDB.retrieve_all((data) => {
  22       $('#stored-images').empty();
  23       num_images = data.length;
  24
  25       data.forEach(ns.create_thumb_row);
  26       ns.set_image_button_enabled();
  27     });
  28   };
  29
  30   ns.create_thumb_row = function(file)  {
  31     let URL = window.URL || window.webkitURL;
  32     let file_url = URL.createObjectURL(file);
  33
  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));
  40
  41     let $image = $('<img>').attr("src", file_url).addClass("materialboxed responsive-img");
  42     $row.append($("<div>").addClass("col s9").append($image));
  43
  44     $("#stored-images").append($row);
  45   };
  46
  47   ns.remove_image = function(event, key) {
  48     let $row = $(event.target).closest(".image-upload-row");
  49     kivi.FileDB.delete_key(key, () => {
  50       $row.remove();
  51       num_images--;
  52       ns.set_image_button_enabled();
  53     });
  54   };
  55
  56   ns.set_image_button_enabled = function() {
  57     $('#upload_images_submit').attr("disabled", num_images == 0 || !$('#object_id').val());
  58   };
  59
  60
  61   ns.upload_files = function() {
  62     let id = $('#object_id').val();
  63     let type = $('#object_type').val();
  64
  65     ns.upload_selected_files(id, type, MAXSIZE);
  66   };
  67
  68   ns.upload_selected_files = function(id, type, maxsize) {
  69     $("#upload_modal").modal("open");
  70
  71     kivi.FileDB.retrieve_all((myfiles) => {
  72       let filesize  = 0;
  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 );
  77           return;
  78         }
  79
  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");
  87
  88         $("#upload_result").html(kivi.t8("start upload"));
  89
  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;
  96         xhr.send(data);
  97       });
  98     });
  99   };
 100
 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"));
 105     }
 106   };
 107
 108   ns.attFailed = function() {
 109     $('#upload_modal').modal('close');
 110     $("#upload_result").html(kivi.t8("An error occurred while transferring the file."));
 111   };
 112
 113   ns.attCanceled = function() {
 114     $('#upload_modal').modal('close');
 115     $("#upload_result").html(kivi.t8("The transfer has been canceled by the user."));
 116   };
 117
 118   ns.attSuccess = function() {
 119     $('#upload_modal').modal('close');
 120     $("#upload_result").html(kivi.t8("Files have been uploaded successfully."));
 121   };
 122
 123   ns.resolve_object = function(event) {
 124     let obj_type = $('#object_type').val();
 125     let number   = event.target.value;
 126
 127     $.ajax({
 128       url: "controller.pl",
 129       data: {
 130         action: "ImageUpload/resolve_object_by_number",
 131         object_type: obj_type,
 132         object_number: number
 133       },
 134       type: "json",
 135       success: (json) => {
 136         if (json.error) {
 137           $("#object_description").html("");
 138           $("#object_id").val("");
 139         } else {
 140           $("#object_description").html(json.description);
 141           $("#object_id").val(json.id);
 142         }
 143         ns.set_image_button_enabled();
 144       },
 145       error: () => {
 146         $("#object_description").html("");
 147         $("#object_id").val("");
 148         ns.set_image_button_enabled();
 149       }
 150     });
 151   };
 152
 153   ns.init = function() {
 154     ns.reload_images();
 155   };
 156 });
 157
 158 $(kivi.ImageUpload.init);