I´m using Dropzone.js but my option are not recognized at all. I tried to place the code different places, but I´m not sure where it should be placed. I read that the Dropzone.options must be out of document.ready or it wont work.
<form action="/" method="post" class="dropzone" id="my-dropzone"></form>
<script>
var myDropzone = new Dropzone("#my-dropzone");
// Disabling autoDiscover, otherwise Dropzone will try to attach twice.
Dropzone.autoDiscover = false;
Dropzone.options.myDropzone = {
paramName: 'photo',
acceptedFiles: '.jpg, .jpeg, .png',
maxFilesize: 1,
init: function() {
this.on("uploadprogress", function(file, progress) {
console.log("File progress", progress);
});
}
}
Maybe you can try this, I hope it helps.
Click here for the JSFiddle Demo.
Other alternative code, click here.
$(function() {
Dropzone.options.myDropzone = {
maxFilesize: 1,
addRemoveLinks: true,
dictResponseError: 'Server not Configured',
acceptedFiles: ".png,.jpg,.jpeg",
init: function() {
var self = this;
// config
self.options.addRemoveLinks = true;
self.options.dictRemoveFile = "Delete";
//New file added
self.on("addedfile", function(file) {
console.log('new file added ', file);
});
// Send file starts
self.on("sending", function(file) {
console.log('upload started', file);
$('.meter').show();
});
// File upload Progress
self.on("totaluploadprogress", function(progress) {
console.log("progress ", progress);
$('.roller').width(progress + '%');
});
self.on("queuecomplete", function(progress) {
$('.meter').delay(999).slideUp(999);
});
// On removing file
self.on("removedfile", function(file) {
console.log(file);
});
}
};
})
Related
In my application I have added image upload fields dynamically using jquery append
So I use dropzone js and it not work when it append because it not initialize in document load.
So how could I load that dynamically
$(add_button).click(function(e){
$(wrapper).append(
'<div class="dropzone small-dropzone feedDropZone">' +
'<div class="dz-message" data-dz-message><p>Drop image or click to select</p></div></div>');
}
});
Dropzone code is
$('#add').on('click', '.feedDropZone', function(){
// do something here
Dropzone.autoDiscover = false;
var minImageWidth = 800, minImageHeight = 600;
$(this).dropzone({
url: base_url + "admin/feed/upload",
maxFiles: 1,
maxFilesize: 5,
acceptedFiles: ".jpeg,.jpg",
addRemoveLinks: true,
maxfilesexceeded: function (file) {
},
createImageThumbnails: true,
success: function (file, response) {
imgObject = JSON.parse(response);
},
error: function (file, response) {
},
init: function () {
this.on("thumbnail", function (file) {
if (file.width < minImageWidth || file.height < minImageHeight) {
file.rejectDimensions();
}else if(file.size/(1024*1024) > 5){
file.rejectFilesize();
}
else {
file.acceptDimensions();
}
});
}
});
});
I'm getting below error:
Error: No URL provided.
throw new Error("No URL provided.");
I'm trying to get the real image that is queued in the Dropzone and show a preview, but the only image i can get is the one of the thumbnail, is there a way to get the real image?
here is my code:
var uploadDrop = new Dropzone("#my-awesome-dropzone", {
acceptedFiles: "image/png",
url: "${g.createLink(controller:'perfil',action: 'saveFile')}",
maxFiles: 1, // Number of files at a time
maxFilesize: 1, //in MB
autoProcessQueue: false,
maxfilesexceeded: function(file){
alert('You have uploaded more than 1 Image. Only the first file will be uploaded!');
},
init: function(){
this.on("addedfile", function() {
if (this.files[1]!=null){
this.removeFile(this.files[0]);
}
});
},
thumbnail: function(file, dataUrl) {
// Display the image in your file.previewElement
$(file.previewElement).removeClass("dz-file-preview").addClass("dz-image-preview");
$(file.previewElement).find(".dz-image img").attr("src",dataUrl);
$("#preview").attr("src",dataUrl);
},
success: function (response) {
var x = JSON.parse(response.xhr.responseText);
var message=x.data.message;
if (message.pass) {
originalLogoName=x.data.data.logoName
pasoPorSubida=true;
simpleMessage(message.title, message.body, "success");
this.removeAllFiles(); // This removes all files after upload to reset dropzone for next upload
} else {
simpleMessage(message.title, message.body, "error");
}
},
addRemoveLinks: true,
removedfile: function(file) {
var _ref; // Remove file on clicking the 'Remove file' button
if(!success){
$("#preview").attr("src",originalLogoUrl+"/"+originalLogoName);
}else{
success=false;
}
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
}
});
I am using dropzone for uploading files , I have set the file limitations upto maximum six files, this code is working if I upload one image at a time, but if I select more then six images by pressing control button at the start of uploading files then it does not validate the files and uploads all files. I am using laravel for backend, My code is:-
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 1, // MB
maxFiles: 6,
acceptedFiles: ".jpeg,.jpg,.png,.gif",
clickable: true,
init: function () {
this.on("success", function(file, responseText) {
file.previewTemplate.setAttribute('id',responseText[0].id);
});
this.on("thumbnail", function(file) {
if (file.width < 350 || file.height < 200) {
file.rejectDimensions()
}
else {
file.acceptDimensions();
}
});
},
accept: function(file, done) {
file.acceptDimensions = done;
file.rejectDimensions = function() { done("Image width or height should be greater than 350*200"); };
},
removedfile: function(file){
var name = file.name;
$.ajax({
type: 'POST',
url: ajax_url+'listing/deleteListingImage/'+name,
dataType: 'html'
});
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
},
dictDefaultMessage: "Drop your files to upload"
}
Thanks
You can remove the extra files using the method removeFile(file) when maxfilesexceeded is called.
Like this:
Dropzone.options.myAwesomeDropzone = {
maxFiles: 2,
autoProcessQueue: false,
init: function(){
var myDropZone = this;
myDropZone.on('maxfilesexceeded', function(file) {
myDropZone.removeFile(file);
});
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script>
<form action="/file-upload"
class="dropzone"
id="my-awesome-dropzone">
</form>
http://output.jsbin.com/dodajij
So I have a form with Dropzone, plus another textarea, which I want to submit - if I insert an oversize file or too many I get the "oversize" error in the preview container, etc. BUT the form continues to process upon button clicking the form submit (due to my listener). How can I only submit if there file size is correct for both files and doesn't exceed max file limit? I can't see a Dropzone event for say "no errors" to add a click event listener - I think I'm close but semi stuck now, I have the below:
$(function() {
var minImageWidth = 300, minImageHeight = 300;
Dropzone.options.jobApplicationUpload = {
autoProcessQueue: false,
addRemoveLinks: true,
uploadMultiple: true,
paramName: 'file',
previewsContainer: '.dropzone-previews',
acceptedFiles: '.pdf, .doc, .docx',
maxFiles: 2,
maxFilesize: 2, // MB
dictDefaultMessage: '',
clickable: '.fileinput-button',
accept: function(file, done) {
done();
},
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
if(myDropzone.files.length > 0) {
$('#job-application-container').hide();
$('#spinner-modal').modal('show');
$('#spinner-modal p').html('<b>Sending your application,</b> please wait...</p>');
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
}
});
this.on("success", function(files, response) {
// Gets triggered when the files have successfully been sent.
// Redirect user or notify of success.
$('#job-application-container').hide();
console.log('okay' + response);
localStorage['success'] = 'test';
location.reload();
});
}
};
});
If you want to verify dropzone errors, you can check the rejected files that it contains.
A simple example (with restricted for only one file, maxfilesize to 1Mb and use version 4.3.0):
var myDropzone = new Dropzone("div#myDropzone", {
url: "toLoadUrl",
autoProcessQueue: false,
uploadMultiple: false,
maxFiles: 1,
maxFilesize: 1,
init: function() {
this.on("addedfile", function() {
if (this.files[1]!=null){
this.removeFile(this.files[0]);
}
});
}
});
$('#toServerButton').on('click',function(e){
e.preventDefault();
if (myDropzone.files.length == 0){
alert("You should be select any file");
} else if(myDropzone.getRejectedFiles().length > 0) {
alert("The attached file is invalid");
} else {
myDropzone.processQueue();
}
});
I hope that it was useful to you.
Regards, Yecid
I used this code to upload image from database in init. Now I want when upload a new image to remove this initial image.
var o = $("div#uploader").dropzone({
url: "../../Merchant/UploadLogo",
paramName: "logo",
maxFiles: 1,
//enqueueForUpload: false,
maxfilesexceeded: function (file) {
this.removeAllFiles();
this.addFile(file);
},
addRemoveLinks: true,
uploadMultiple: false,
dictRemoveFile: "حذف",
removedfile: function(file) {
RemoveFile("Logo");
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
},
init: function() {
var mockFile = { name: "avatar1.jpg", size: 12345, type: 'image/jpeg', url: "../../Merchant/GetLogo" };
this.options.addedfile.call(this, mockFile);
this.options.thumbnail.call(this, mockFile, mockFile.url);//uploadsfolder is the folder where you have all those uploaded files
}
});
I'm assuming you want to replace the old image in the Dropzone whenever a new Image is successfully uploaded. You can do that by combining the this.on('success') and this.removeFile methods provided by Dropzone:
Dropzone.options.myDropzone = {
init: function() {
this.on('success', function(file, message) {
if (this.files.length > 1) {
this.removeFile(this.files[0]);
}
});
// ...
}
};
For this to work, your mockFile must also be registered as one of the files of your Dropzone. To do that, you can push it into the this.files array in your init, right after displaying it:
// Create and Display Mock File
var mockFile = { name: "avatar1.jpg", size: 12345, url: '/image.png' };
this.options.addedfile.call(this, mockFile);
this.options.thumbnail.call(this, mockFile, mockFile.url);
// Register it
this.files = [mockFile];
Source:
Dropzone#SuccessEvent,
Dropzone#Methods and Experience