js/kivi.ImageUpload.js

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