Dropzone dynamically allow duplicates images - javascript

Using dropzone Js i have a checkbox what i want to do is allow the user to select whether to allow duplicates or not I need to change this property preventDuplicates from true to false and vice versa
I'm tried to google my error but I cant find any relevant answers
My Options
var uploadoptions = {
url: '{{URL('photographer/postEventImages') }}',
params: {
"_token": "{{ csrf_token() }}",
"event_id": $("#event_id").val(),
"folder_id": $("#folder_id").val(),
},
uploadMultiple: false,
thumbnailWidth: 80,
thumbnailHeight: 80,
parallelUploads: 12,
maxFiles: max_files,
acceptedFiles: "image/jpeg,image/jpg",
previewTemplate: previewTemplate,
dictDuplicateFile: "Duplicate Files Cannot Be Uploaded",
preventDuplicates: true,
//autoQueue: false,
previewsContainer:
clickable: ".fileinput-button",
autoProcessQueue: false,
createImageThumbnails: true,// Define the element that should be used as click trigger to select files.
success: function (file, response) {
file.previewElement.querySelector(".progress-bar").classList.remove('bg-warning');
file.previewElement.querySelector(".progress-bar").classList.add('bg-success')
}
};
My initialization
var myDropzone = new Dropzone('#previews', uploadoptions);
$('#startUpload').click(function(){
myDropzone.processQueue()
})

so I solved it I just had to take out the property
and add this
$('#duplicates').click(function(){
if($(this).is(':checked')){
myDropzone.options.preventDuplicates = false;
}else{
myDropzone.options.preventDuplicates = true;
}
})

Related

Sorting Dropzone.js

I'm using Dropzone.js with Spring boot.
Everything works fine except, when I upload image it goes on the bottom of gallery.
How can I make it so that the image which is uploaded shows first (on the top of gallery). Does Dropzone have some built in methods that I could use?
var extraImageDropzone = new Dropzone('#extraImagesDropzone', {
url: "/uploads/upload",
maxFiles: 25,
acceptedFiles: 'image/*',
autoQueue: true,
addRemoveLinks: false,
parallelUploads: 1,
createImageThumbnails: false,
createImageData:false,
previewsContainer: null,
previewTemplate: '<li style="diplay:none"></li>',
hiddenInputContainer: "#extraImagesDropzoneToggle",
clickable: "#extraImagesDropzoneToggle",
// thumbnailWidth: 100,
thumbnailHeight: 100,
thumbnailMethod: `contain`,
complete: function(file, response) {
console.log('completed');
},
success: function(f, response) {
if (response.id) {
console.log('File uploaded' + response.URL);
$(".image-picker").data('picker').append_one(response.id, response.URL);
} else {
alert('Error while uploading');
this.removeFile(f);
}
}
});
Added prepend_one method to Image-picker lib and now works fine.
ImagePicker.prototype.prepend_one = function (val, image_src) {
var option = jQuery('<option>').val(val).attr('data-img-src', image_src);
this.select.prepend(option);
var picker_option = new ImagePickerOption(option[0], this, this.opts);
this.picker_options.push(picker_option);
this.picker.prepend(picker_option.node);
};

Can I add/remove the inputs one by one? - dropzone.js

Can I add/remove the inputs one by one?
The input should only post the currently selected array of files.
I am using dropzone.js for my current project and dropzone.js does not help to append file as HTML file input and how I can post image files when post data.
This is my script:
var myDropzone = new Dropzone("#filedrag",{
url: "upload", // Set the Upload Url
parallelUploads: 5,
thumbnailWidth: 600,
thumbnailHeight: 600,
acceptedFiles:"image/*",
previewTemplate: previewTemplate,
maxFiles: 20,
previewsContainer: "#previews",
clickable: ".fileinput-button",
init: function() {this.on("success", function(file, response) {
});
this.on("addedfile", function(file) {
});
}
});

DropzoneJS: Prevent uploading and displaying unsupported files

For my project I'm using the Drag & Drop library DropzoneJS. It's working nicely, but I want to have a specific functionality that (for as far as I can see) is not supported 'out of the box'.
In my Dropzone config I've specified the acceptedFiles:
acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf"
When I use the browse button it automatically checks if the file is supported or not. But when I drag & drop files, the check is done AFTER the upload has already been done, and displays the file with an error message.
What I'd like to achieve is that the drag & drop first checks if the files are supported, and automatically discard the unsupported file. I'd still like to display an error message which states that some of the files are not supported.
For reference, here is my complete Dropzone config:
import Dropzone from 'dropzone';
export default class UI_DropZone {
constructor() {
if (document.querySelector('#dropZone')) {
let previewNode = document.querySelector("#template");
previewNode.id = "";
let previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
return new Dropzone("#dropZone", {
url: "/dist/files",
thumbnailWidth: 300,
thumbnailHeight: 300,
parallelUploads: 20,
maxFilesize: 10,
acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf",
previewTemplate: previewTemplate,
previewsContainer: '#previews',
clickable: '.fileinput-button',
autoProcessQueue: false
});
}
}
}
You can catch errors and remove the file with some sort of notification if it is a problem:
init: function() {
this.on("error", function(file, message, xhr) {
if (xhr == null) this.removeFile(file); // perhaps not remove on xhr errors
alert(message);
});
}
So with your config this will look like:
return new Dropzone("#dropZone", {
url: "/dist/files",
thumbnailWidth: 300,
thumbnailHeight: 300,
parallelUploads: 20,
maxFilesize: 10,
acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf",
previewTemplate: previewTemplate,
previewsContainer: '#previews',
clickable: '.fileinput-button',
autoProcessQueue: false,
"error": function(file, message, xhr) {
if (xhr == null) this.removeFile(file); // perhaps not remove on xhr errors
alert(message);
}
});
Example: https://jsfiddle.net/m4ye8gL2/1
myDropzone.on("error", function(file, message, xhr) {
if(xhr == null) myDropzone.removeFile(file);
alert(message)
});

Change the default functionalites of dropzone.js

I am trying to upload image files using dropzone.js and I have successfully uploaded it using that function. I need to set a limit for uploading files, The limit should be set dynamically. I am trying to change the limit in dropzone.js by inserting php codes on the "maxFiles"variable inside the js but I failed.
Could any of you help me with a possible solution to do this operation.
I have attached the default values of dropzone.js I need the change the value of maxFiles dynamically suggest me the possible solution.
Thank you in advance
url: '?do=uploadimage',
method: "post",
withCredentials: false,
parallelUploads: 2,
uploadMultiple: false,
maxFilesize: 1,
paramName: "file",
createImageThumbnails: true,
maxThumbnailFilesize: 1,
thumbnailWidth: 120,
thumbnailHeight: 120,
filesizeBase: 1000,
maxFiles: null,
params: {},
clickable: true,
ignoreHiddenFiles: true,
acceptedFiles: null,
acceptedMimeTypes: null,
autoProcessQueue: true,
autoQueue: true,
addRemoveLinks: true,
previewsContainer: null,
hiddenInputContainer: "body",
capture: null,
dictDefaultMessage: "Drag Files here or Click to Upload",
dictFallbackMessage: "Your browser does not support drag'n'drop file uploads.",
dictFallbackText: "Please use the fallback form below to upload your files like in the olden days.",
dictFileTooBig: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize }}MiB.",
dictInvalidFileType: "You can't upload files of this type.",
dictResponseError: "Server responded with {{statusCode}} code.",
dictCancelUpload: "Cancel upload",
dictCancelUploadConfirmation: "Are you sure you want to cancel this upload?",
dictRemoveFile: "Remove",
dictRemoveFileConfirmation: null,
dictMaxFilesExceeded: "You can not upload any more files.",
I assume you have a variable in your page which comes from a controller or any kind of server side layer which has a value for maxFiles.
if you are working with PHP then all you need to do is to set maxFiles: "<?php echo $maxfiles ?>" or if you are using laravel blade you can use
'maxFiles': "{{ $maxFiles }}"
make sure that there are double quotation around the variable. I think The idea is the same for all server side languages
profilePicture = new Dropzone('#profile-picture', {
url: "/storeProfilePicture.php",
});
profilePicture.options.profilePicture = {
// any other options
maxFiles: "{{ $maxFiles }}",
// OR
maxFiles: "<?php echo $maxFiles ?>",
};
<script type="text/javascript">
Dropzone.options.yourid={
maxFiles:5
};
</script>
keep id of the image field as your id pass that id inside the script and assign value for the fields you need to change and enter the values by this method we can change the default functionality of dropzone.js

DropZone - How to cancel uploading and remove from queue the correct way

I need to alert the user if he's uploading and existing (on the server) file; i've done it on accept function, like this:
var myDropzone = new Dropzone("form#allegati", {
acceptedFiles: "image/*,.docx,application/pdf",
url: "allegati.php", // Set the url,
dictRemoveFileConfirmation: "Sei sicuro?",
maxFilesize: 10,
thumbnailWidth: 80,
thumbnailHeight: null,
parallelUploads: 20,
createImageThumbnails: true,
previewTemplate: previewTemplate,
autoQueue: true, // Make sure the files aren't queued until manually added
previewsContainer: "#previews", // Define the container to display the previews
clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
accept: function (file, done) {
var idIncarico = GetURLParameter('idIncarico');
$.ajax({
// AJAX POST TO CHECK IF FILE EXISTS ON THE SERVER (RETURN TRUE/FALSE)
type: 'POST',
url: 'allegati.php?checkExisting=true&id='+idIncarico,
data: { fileName: file.name },
async: false,
dataType: 'json',
success: function(data) {
// ASKS THE USER TO OVERWRITE
if (data) {
var q = confirm("File esistente. Vuoi sovrascrivere?");
if (q == false){
// IF USER CANCEL UPLOAD:
done("no");
} else {
// IF USER CONFIRM UPLOAD:
done();
}
} else {
done();
}
}
});
},
init: function() {
this.on("error", function(file){
// I GET HERE WHEN USER CLICK ON "CANCEL"
console.log(myDropzone);
});
[CUTTED]
Every seems to work except when the user cancel the upload: the queued file stays there.
I should not call removeFile(file) because I have an ajax script, also bound to every single file "delete" button, that removes existing file from the server (because of the same filename)...
Is there a way to remove the rejected one without calling removeFile(file)?
Screenshot attached
Alex

Categories