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