I work with dropzone:
<form action="#" class="dropzone" ></form>
In the code js, the dropzone upload images only if a button with id=startUpload
is clicked.
Dropzone.autoDiscover = false;
$(function() {
var myDropzone = new Dropzone(".dropzone", {
url: "upload_hotel_image.php",
paramName: "file",
maxFilesize: 20,
maxFiles: 20,
acceptedFiles: "image/*,
autoProcessQueue: false,
});
$(document).ready(function(){
$('#startUpload').click(function(){
myDropzone.processQueue();
});
});
});
Now, how can i add more data to send with dropzone when images are uploaded, for exapmle,i need send description with every image uploaded.
//do this in your init function
this.on("sending", function(file, xhr, formData) {
$("form").find("input").each(function(){
formData.append($(this).attr("name"), $(this).val());
});
Related
I would like to upload images by using dropzone. It is working fine on localhost. I am able to upload files. But when I uploaded my code server it is not initializing. I am triggering event on click of button.
My code -
//other fields
<div class="dropzone" id="addProductDropzoneNew"></div>
//other fields
Js -
Dropzone.options.addProductDropzoneNew= {
url: '/admin/product/store',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 1,
acceptedFiles: '.jpeg,.jpg,.png,.PNG',
addRemoveLinks: true,
init: function() {
dzClosure = this;
document.getElementById("new-product-btn").addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
if (dzClosure.getQueuedFiles().length === 0) {
var blob = new Blob();
blob.upload = { 'chunked': dzClosure.defaultOptions.chunking };
dzClosure.uploadFile(blob);
} else {
dzClosure.processQueue();
}
});
this.on("sendingmultiple", function(data, xhr, formData) {
formData.append("_token", jQuery("#token").val());
formData.append("id", jQuery("#productId").val());
formData.append("name", jQuery("#name").val());
formData.append("sku", jQuery("#sku").val());
formData.append("menuId", jQuery("#menuId").val());
formData.append("categoryId", jQuery("#category").val());
formData.append("subCategory", jQuery("#sub").val());
formData.append("price", jQuery("#price").val());
formData.append("discount", jQuery("#discount").val());
formData.append("stock", jQuery("#stock").val());
formData.append("color", jQuery("#color").val());
formData.append("size", jQuery("#size").val());
formData.append("height", jQuery("#height").val());
formData.append("width", jQuery("#width").val());
formData.append("weight", jQuery("#weight").val());
formData.append("description", jQuery("#description").val());
formData.append("isPublish", jQuery("#isPublish").val());
formData.append("isB2B", jQuery("#isB2B").val());
formData.append("title", jQuery("#title").val());
formData.append("keyword", jQuery("#keyword").val());
formData.append("metaDescription", jQuery("#metaDescription").val());
formData.append("brandId", jQuery("#brandId").val());
formData.append("isFreeShipping", jQuery("#shipping").val());
});
},
success: function(data)
{
clearError();
if(data.status=='success'){
location.href='/admin/product';
} else {
displayError(data.xhr.response);
}
}
}
I am not sure but it is working fine on local. But i guess it is not initializing on server.
Here is screenshot of local -
This is a screenshot of dropzone div on server -
Also, in developer console log not getting any error. Please check image -
Thank you for your help in advance.
I have created a dropzone file upload.My html code is
<form action="upload.php" class="dropzone" id="myDropzone"></form>
And options are
$(document).ready(function() {
Dropzone.options.myDropzone = {
dictDefaultMessage: "Select photos",
paramName: "file",
maxFilesize: 0.5,
clickable: false,
renameFile: function (file) {
return file.name = new Date().getTime() + '_' + file.name;
}
};
});
But the options are not working.I am new to dropzone.How can i do this
https://codesandbox.io/s/peaceful-varahamihira-cci6y
It's easier to create an instance of Dropzone than trying to use "auto discover" feature.
$(document).ready(function() {
// Prevent Dropzone from auto discovering this element:
Dropzone.options.myDropzone = false;
// This is useful when you want to create the
// Dropzone programmatically later
// Disable auto discover for all elements:
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#myDropzone", {
url: "upload.php",
dictDefaultMessage: "Select photos",
paramName: "file",
maxFilesize: 0.5,
clickable: false,
renameFile: function(file) {
return new Date().getTime() + "_" + file.name;
}
});
myDropzone.on("complete", function(file) {
console.log(file);
});
});
I wanna know how to disabled upload if i have 1 file has uploaded. But if i remove file, the ddropzone been enabled to upload.
here's my code on js:
Dropzone.options.attachmenacc = {
maxFiles: 1,
accept: function(file, done) {
},
init: function() {
this.on("maxfilesexceeded", function(file){
alert("No more files please!");
});
},
addRemoveLinks: true,
removedfile: function(file) {
var name = file.name;
$.ajax({
type: 'POST',
url: host+'upload/bank/unfile',
data: "id="+name,
dataType: 'html'
});
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
//console.log();
},
}
Well on my code now, if i add upload file more, it show alert, and these file (expected first file) wont uploaded, but it still show that file was uploaded.
In my bootstrap modal I have a div panel inside of that is my form of dropzone, in every time I tried to click the modal nothing is showing. It's working properly if outside of the modal. I also try the Dropzone.autoDiscover = false; not working either.
<div class="panel-body" id="id_dropzone">
<form action="UploadImages"
class="dropzone"
id="my-awesome-dropzone" enctype="multipart/form-data">
</form>
</div>
The JS
$(document).on('click','#add_newContestant', function(e){
e.preventDefault();
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#id_dropzone", { url: 'UploadImages'});
});
Try this way, here i didn't use Dropzone.autoDiscover = false;
// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
accept: function(file, done) {
if (file.name == "anything.jpg") {
done("false");
}
else { done(); }
}
};
and
Dropzone.options.myAwesomeDropzone = {
paramName: "file",
maxFilesize: 10,
url: 'UploadImages',
previewsContainer: "#dropzone-previews",
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 20,
init: function () {
var cd;
this.on("success", function (file, response) {
$('.dz-progress').hide();
$('.dz-size').hide();
$('.dz-error-mark').hide();
console.log(response);
console.log(file);
cd = response;
});
.......
Please check this fiddle Dropzone in Modal . I think this will help you
I'm using dropzone and PHP to upload and delete files. When I load my upload page I create some mockfiles with the following params: name, size, thumbnail and id. This mock is set using pre uploaded data.
So when someone click on remove file button, I call the php method that delete the image.
My problem is when the user uploads an file and tries to delete it without loading the page. When it happens, dropzone file object just can't be altered.
I'm trying:
var dropZone3 = new Dropzone("#file3",{
init: function() {
this.on('success', function (file) {
console.log(file);
file['test'] = 'test';
file.test = 'test';
console.log(file);
})
},
paramName: 'file3',
autoProcessQueue:true,
uploadMultiple: false,
parallelUploads: 1,
maxFiles: 3,
maxFilesize: 5,
addRemoveLinks: true
My problem is that the first console.log and the second one inside init on success function shows me the same file.
Anyone knows how to fix it?
Thank you in advance.
It's possible to add properties directly to file object (dropzone v4.3.0)
var dropZone = new Dropzone(document.querySelector('.js-dropzone'), {
url: '/file/upload'
});
dropZone.on('success', function (file, response) {
var res = JSON.parse(response);
if (res.result == true) {
file.test = 'test';
file.id = res.id;
}
});
Don't think you can add a property to the file object when is already uploaded, but you can add it before on the accept property:
var dropZone3 = new Dropzone("#file3", {
url: "upload.php",
init: function () {
this.on('success', function (file) {
console.log(file);
})
},
accept: function(file, done) {
file.test = "test";
return done();
},
paramName: 'file3',
autoProcessQueue: true,
uploadMultiple: false,
parallelUploads: 1,
maxFiles: 3,
maxFilesize: 5,
addRemoveLinks: true
});