I am initializing a dropzone element and based on some parameters I should toggle the clickable function so that some users are able to upload the files and some are not.
I am setting the value of the clickable function to false but still the element is clickable.
How can I rectify this error?
function initializeAttachmentsDropzone(){
Dropzone.autoDiscover = false;
// Dropzone stuff
myDropzone = new Dropzone("div#attachments", { url: "/app/attachments/",
paramName: "attachments",
// maxFiles: 10,
uploadMultiple: true,
addRemoveLinks: true,
autoProcessQueue: false,
parallelUploads: 10,
maxFilesize: 2000,
thumbnailHeight: 250,
thumbnailWidth: 250,
dictRemoveFileConfirmation: "Are you sure you want to delete this file?",
accept: function(file, done) {
if (file.size == 0) {
done("Empty files will not be uploaded.");
}
else { done(); }
},
headers: {
"X-CSRFToken": csrftoken
},
init: function(){
this.removeAllFiles();
}
});
myDropzone.on("removedfile", deleteAttachment);
}
function disableFieldsOnUpdate(){
if ($("#page_details").val()){
$(".dev-page").prop("disabled", true);
myDropzone.options.clickable = false;
}
else {
$(".dev-page").prop("disabled", false);
myDropzone.options.clickable = true;
}
}
$(document).ready(function(){
initializeAttachmentsDropzone();
disableFieldsOnUpdate();
});
Here in the browser when I check the value of clickable it is false but even then I am able to click the attachments element. How can I toggle the functionality as per the requirement?
EDIT
The only solution that worked for me is as below:
let isRemoveEnabledInAttachments;
function getRemoveEnabled() {
if ($("#page_details").val()){
isRemoveEnabledInAttachments = false;
}
if ($("#page_details").attr("update_fields") && $("#page_details").attr("has_permission") == "True"){
isRemoveEnabledInAttachments = true;
}
return isRemoveEnabledInAttachments;
}
function initializeAttachmentsDropzone(){
Dropzone.autoDiscover = false;
// Dropzone stuff
myDropzone = new Dropzone("div#attachments", { url: "/app/attachments/",
paramName: "attachments",
// maxFiles: 10,
uploadMultiple: true,
addRemoveLinks: true,
autoProcessQueue: false,
parallelUploads: 10,
maxFilesize: 2000,
thumbnailHeight: 250,
thumbnailWidth: 250,
dictRemoveFileConfirmation: "Are you sure you want to delete this file?",
accept: function(file, done) {
if (file.size == 0) {
done("Empty files will not be uploaded.");
}
else { done(); }
},
headers: {
"X-CSRFToken": csrftoken
},
init: function(){
this.removeAllFiles();
if (isRemoveEnabledInAttachments) {
this.enable();
} else {
this.disable();
}
}
});
myDropzone.on("removedfile", deleteAttachment);
}
But here even if I disable the remove file link is shown.
EDIT 2
I had to add
this.options.addRemoveLinks = false;
inside the init function itself. Even setting it as global variable and using Dropzone.options.myDropzone.options as stated in the comments did not work.
replace your function as below:
function disableFieldsOnUpdate(){
if ($("#page_details").val()){
$(".dz-hidden-input").prop("disabled",true);
}
else
{
$(".dz-hidden-input").prop("disabled",false);
}
}
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 tried setting up the limit of uploading files to only one. I have tried all the suggestions from the previous questions here but nothing worked for me. Each time I was able to upload multiple files and as many as like.
This was one of my attempts:
var token = "{{ csrf_token() }}";
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#dropzoneFileUpload", {
url: "/admin/upload",
params: {
_token: token
}
});
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
addRemoveLinks: true,
maxFiles: 1,
init: function() {
this.on("maxfilesexceeded", function() {
if (this.files[1]!=null){
this.removeFile(this.files[0]);
}
});
},
accept: function(file, done) {
}
};
And this is how I call the scripts:
<script src="{{ asset('js/dropzone/dropzone.js') }}"></script>
<script src="{{ asset('js/image-upload.js') }}"></script>
You are splitting the dropzone configuration into two different methods. And only the first one is being used the one that contains the url option, the second, that contains the maxFiles option is ignored.
You have to either include all the configuration inside the first method that creates dropzone programmatically like this:
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#dropzoneFileUpload", {
url: "/admin/upload",
params: {
_token: token
},
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
addRemoveLinks: true,
maxFiles: 1,
init: function() {
this.on("maxfilesexceeded", function() {
if (this.files[1]!=null){
this.removeFile(this.files[0]);
}
});
},
accept: function(file, done) {
}
});
Or with second method that uses the dropzone autodiscover feature, if your dropzone element has the id #dropzoneFileUpload do it like this:
Dropzone.options.dropzoneFileUpload = {
url: "/admin/upload",
params: {
_token: token
},
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
addRemoveLinks: true,
maxFiles: 1,
init: function() {
this.on("maxfilesexceeded", function() {
if (this.files[1]!=null){
this.removeFile(this.files[0]);
}
});
},
accept: function(file, done) {
}
};
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
When a form is submitted, if there are errors in any of the form fields (title for example) the files must be reuploaded by the user.
I am trying to implement this code into my script to fix this issue but it is not working
Dropzone.prototype.requeueFiles = function(files){
for (var i = 0, l = files.length, file; i < l; i++){
file = files[i];
file.status = Dropzone.ADDED;
file.upload.progress = 0;
file.upload.bytesSent = 0;
}
}
//...on submit
self.requeueFiles(self.files);
Note the comment:
I think you may set the status to Dropzone.QUEUED
Here is my current code:
$(document).ready(function() {
var dropzone;
Dropzone.autoDiscover = false;
dropzone = new Dropzone('#dropform', {
maxFiles: 2,
maxFilesize: 2.5,
paramName: 'photo[picture]',
headers: {
"X-CSRF-Token": $('meta[name="csrf-token"]').attr('content')
},
addRemoveLinks: true,
clickable: '.dz-default.dz-message',
previewsContainer: '.dz-default.dz-message',
thumbnailWidth: 200,
thumbnailHeight: 200,
parallelUploads: 100,
autoProcessQueue: false,
uploadMultiple: false
});
$('#item-submit').click(function(e) {
e.preventDefault();
e.stopPropagation();
if (dropzone.getQueuedFiles().length > 0) {
return dropzone.processQueue();
}
else {
return $('#dropform').submit();
}
});
dropzone.on('error', function(file, errorMessage, xhr) {
console.log('error');
$('.idea').html(errorMessage + ". Please try again. Thank you.");
});
return dropzone.on('success', function(file, responseText) {
return window.location.href = '/photos/' + responseText.id;
});
});
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
});