Friday 16 December 2016

DropZone Js with ajax & Multiple photo and file upload functionality

HTML=======>
 
%form.uploadform.dropzone.no-margin.dz-clickable{:action => ""}
  .dz-default.dz-message    %span Drop your Cover Picture here
  .event_photo_upload_btn#event_photo_upload_btn Upload



JAVASCRIPT====>>
Dropzone.autoDiscover = false; // keep this line if you have multiple dropzones in the same page

$(".uploadform").dropzone({  autoProcessQueue: false, // To stop auto upload  acceptedFiles: "image/jpeg",  url: 'file_photo_upload',  //maxFiles: 1, // Number of files at a time  //maxFilesize: 1, //in MB  maxfilesexceeded: function(file)  {    alert('You have uploaded more than 1 Image. Only the first file will be uploaded!');  },  init: function () {     var submitButton = document.querySelector("#event_photo_upload_btn")         myDropzone = this; // closure
     submitButton.addEventListener("click", function() {         //var status_message = $("#status_txtbox_post").val().trim();         var files = myDropzone.files.length;         console.log("No of files ="+files);         if(files > 0){           myDropzone.processQueue(); // To upload files         }else{              $("#my-dropzone").attr('style','border-color:red !important');         }     });
    this.on("sending", function(file, xhr, data) {      var event_id = $("#event_id").val();
      data.append("attachable_id", event_id);      data.append("event_id", event_id);      data.append("trip_id", trip_id);      data.append("isPhoto", true);      data.append("isDoc", false);      data.append("attachable_type", 'DailyItinerary');    });  },  success: function (response) {    var x = JSON.parse(response.xhr.responseText);    $('.icon').hide(); // Hide Cloud icon    //$('#uploader').modal('hide'); // On successful upload hide the modal window    $('.img').attr('src',x.img); // Set src for the image    $('.thumb').attr('src',x.thumb); // Set src for the thumbnail    $('img').addClass('imgdecoration');    //this.removeAllFiles(); // This removes all files after upload to reset dropzone for next upload    console.log('Image -> '+x.img+', Thumb -> '+x.thumb); // Just to return the JSON to the console.  },  addRemoveLinks: true,  removedfile: function(file) {    var _ref; // Remove file on clicking the 'Remove file' button    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;  }}); 

No comments:

Post a Comment