js/kivi.ImageUpload.js

   1 namespace("kivi.ImageUpload", function(ns) {
   2   "use strict";
   3
   4   const MAXSIZE = 5*1024*1024; // 5MB size limit
   5
   6   ns.add_files = function(target) {
   7     let files = [];
   8     for (var i = 0; i < target.files.length; i++) {
   9       files.push(target.files.item(i));
  10     }
  11
  12     kivi.FileDB.store_image(files[0], files[0].name, () => {
  13       ns.reload_images();
  14       target.value = null;
  15     });
  16   };
  17
  18   ns.reload_images = function() {
  19     kivi.FileDB.retrieve_all((data) => {
  20       $('#stored-images').empty();
  21       data.forEach(ns.create_thumb_row);
  22     });
  23   };
  24
  25   ns.create_thumb_row = function(file)  {
  26     let URL = window.URL || window.webkitURL;
  27     let file_url = URL.createObjectURL(file);
  28
  29     let $row = $("<div>").addClass("row image-upload-row");
  30     let $button = $("<a>")
  31       .addClass("btn-floating btn-large waves-effect waves-light red")
  32       .click((event) => ns.remove_image(event, file.name))
  33       .append($("<i>delete</i>").addClass("material-icons"));
  34     $row.append($("<div>").addClass("col s3").append($button));
  35
  36     let $image = $('<img>').attr("src", file_url).addClass("materialboxed responsive-img");
  37     $row.append($("<div>").addClass("col s9").append($image));
  38
  39     $("#stored-images").append($row);
  40   };
  41
  42   ns.remove_image = function(event, key) {
  43     let $row = $(event.target).closest(".image-upload-row");
  44     kivi.FileDB.delete_key(key, () => {
  45       $row.remove();
  46     });
  47   };
  48
  49   ns.upload_files = function() {
  50     let id = $('#object_id').val();
  51     let type = $('#object_type').val();
  52
  53     ns.upload_selected_files(id, type, MAXSIZE);
  54   };
  55
  56   ns.upload_selected_files = function(id, type, maxsize) {
  57     $("#upload_modal").modal("open");
  58
  59     kivi.FileDB.retrieve_all((myfiles) => {
  60       let filesize  = 0;
  61       myfiles.forEach(file => {
  62         filesize  += file.size;
  63         if (filesize > maxsize) {
  64           $("#upload_result").html(kivi.t8("filesize too big: ") + filesize+ kivi.t8(" bytes, max=") + maxsize );
  65           return;
  66         }
  67
  68         let data = new FormData();
  69         data.append("uploadfiles[]", file);
  70         data.append("action", "File/ajax_files_uploaded");
  71         data.append("json", "1");
  72         data.append("object_type", type);
  73         data.append("object_id", id);
  74         data.append("file_type", "attachment");
  75
  76         $("#upload_result").html(kivi.t8("start upload"));
  77
  78         let xhr = new XMLHttpRequest;
  79         xhr.open('POST', 'controller.pl', true);
  80         xhr.success = ns.attSuccess;
  81         xhr.progress = ns.attProgress;
  82         xhr.error = ns.attFailed;
  83         xhr.abort = ns.attCanceled;
  84         xhr.send(data);
  85       });
  86     });
  87   };
  88
  89   ns.attProgress = function(event) {
  90     if (event.lengthComputable) {
  91       var percentComplete = (event.loaded / event.total) * 100;
  92       $("#upload_result").html(percentComplete+" % "+ kivi.t8("uploaded"));
  93     }
  94   };
  95
  96   ns.attFailed = function() {
  97     $('#upload_modal').modal('close');
  98     $("#upload_result").html(kivi.t8("An error occurred while transferring the file."));
  99   };
 100
 101   ns.attCanceled = function() {
 102     $('#upload_modal').modal('close');
 103     $("#upload_result").html(kivi.t8("The transfer has been canceled by the user."));
 104   };
 105
 106   ns.attSuccess = function() {
 107     $('#upload_modal').modal('close');
 108     $("#upload_result").html(kivi.t8("Files have been uploaded successfully."));
 109   };
 110
 111   ns.resolve_object = function(event) {
 112     let obj_type = $('#object_type').val();
 113     let number   = event.target.value;
 114
 115     $.ajax({
 116       url: "controller.pl",
 117       data: {
 118         action: "ImageUpload/resolve_object_by_number",
 119         object_type: obj_type,
 120         object_number: number
 121       },
 122       type: "json",
 123       success: (json) => {
 124         if (json.error) {
 125           $("#object_description").html("");
 126           $("#object_id").val("");
 127         } else {
 128           $("#object_description").html(json.description);
 129           $("#object_id").val(json.id);
 130         }
 131       },
 132       error: () => {
 133         $("#object_description").html("");
 134         $("#object_id").val("");
 135       }
 136     });
 137   };
 138
 139   ns.init = function() {
 140     ns.reload_images();
 141   };
 142
 143
 144 });
 145
 146 $(kivi.ImageUpload.init);