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

How to remove all files from dropzone after uploading

I have created a dropzone using ng-dropzone
myApp.config(function(dropzoneOpsProvider) {
dropzoneOpsProvider.setOptions({
url: 'url',
acceptedFiles: 'image/jpeg, images/jpg, image/png',
addRemoveLinks: true,
dictDefaultMessage: 'Click to add or drop photos',
dictRemoveFile: 'Remove photo',
dictResponseError: 'Could not upload this photo',
maxFilesize: 100,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 10
});
});
myApp.controller('topStoryController',
$scope.dzOptions = {
paramName: 'file',
maxFilesize: '10'
}; $scope.dzCallbacks = {
'successmultiple': function(file, xhr) {
console.log('uploaded ' + file.name);
console.log(file, xhr);
console.log(xhr.path);
},
};
$scope.post = function() {
}
);
Here I am uploading multiple image using dropzone that is working properly
after imaaging upload on post I want to remove images from dropzone.
how to achive this?

dropzone has the following function for removing all files.
removeAllFiles();
documentation of dropzone explains this function as following
If you want to remove all files, simply use .removeAllFiles(). Files
that are in the process of being uploaded won’t be removed. If you
want files that are currently uploading to be canceled, call
.removeAllFiles(true) which will cancel the uploads.
documentation of the ng-dropzone directive states that you can access dropzone functions using the following
$scope.dzMethods.removeFile(file);
or
<button ng-click="dzMethods.removeAllFiles();">...</button>

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

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

How to make images inline

Dropzone.js is not showing preview as one image after another how to resolve this and how to show image with progress bar (not the file name and file size).
I have included basic.css file
my code is
in html
<div id="dropzone-previews">
</div>
javascript
Dropzone.options.myAwesomeDropzone = {
paramName: "file",
maxFilesize: 10,
url: 'UploadImages',
previewsContainer: "#dropzone-previews",
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 20,
// addRemoveLinks: true,
init: function() {
var cd;
this.on("success", function(file, response) {
$('.dz-progress').hide();
console.log(response);
console.log(file);
cd = response;
});
};
Edit:
I copied my code here I am selection images from bootstreap model and images are shown at <div id="dropzone-previews"></div> which is behind the model.
I have included the code but it is not showing problem which i am fetching at my local host.