We Keep Coding

Dropzone dynamically allow duplicates images

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;
}
})

Dropzone Success function not working

I am trying to implement Bootstrap Dropzone on a website but I am facing a problem getting the success message. Below is my code.
var mydropzone = new Dropzone("#dropzonejs-example", {
url: "/Home/FilesUpload/",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 10,
addRemoveLinks: true,
init: function() {
this.on("sending", function(file, xhr, formData) {
formData.append("is_visible", $('#is_visible').is(':checked'));
this.removeFile(file);
this.on("success", function(fname) {
console.log("ok");
});
});
},
});
$("#uploadbtn").click(function() {
mydropzone.processQueue();
});
My controller returns a string so I want to catch the string here. How can it be possible or where am I doing the mistake? Please correct my code.

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)
});

Dropzone - How to remove files?

how can I remove the uploaded files and previewed thumbnails? That´s my code.
The alert works, but the thumbs are not hiding.
new Dropzone("form#galerie", {
url: "/business/kleinanzeigen/upload",
maxFilesize: 5,
maxFiles: 10,
acceptedFiles: '.png, .gif, .jpg',
complete: function (success) {
vm.form.galerie.push(JSON.parse(success.xhr.response))
},
addRemoveLinks: true,
removedfile: function (file) {
//console.log(file);
alert('works');
this.removeFile(file);
}
}
);

Your removedFile function doesn't seem right. It should be something like this:
removedfile: function(f) {
var reference;
return (reference = f.previewElement) != null ? reference.parentNode.removeChild(f.previewElement) : void 0;
}