Change the default functionalites of dropzone.js - javascript

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

Related

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>

How to redirect dropzone.js selected preview image to a new page?

Using dropzone I would browse for a image file and the preview image would be displayed on the class "dropzone-previews". On the below the button trigger, how I can send "dropzone-previews" to another new page and display the image from there?
HTML
<form action="/upload-file" type="file" class="dropzone" id="upload-file-form" enctype="multipart/form-data">
<div class="filepicker"></div>
<div class="addFileButton">browse</div>
</form>
<button type="submit" class="btn btn-success pull-right"` id="btnUpload">Upload</button>
<div class="dropzone-previews"></div>
JS
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone('#upload-file-form', {
paramName: "file",
url: '/upload-file',
method: 'post',
acceptedFiles: ".png,.jpg,.gif,.jpeg",
maxFilesize: 256,
maxFiles: 1,
maxfilesexceeded: function(file) {
this.removeAllFiles();
this.addFile(file);
},
parallelUploads: 1,
uploadMultiple: false,
autoProcessQueue: false,
addRemoveLinks: false,
clickable: ".addFileButton",
previewsContainer: ".dropzone-previews",
});
$('#btnUpload').on('click', function(){
//redirect to new page (i.e myNewPage.php) along with the image
window.location.replace("");
});
Well, you would need to upload it somewhere and display the link. Atleast if you are only using jquery and php.
To upload it, you can hook into its events and post it to a php script to save or to aws.
myDropzone.on("addedfile", function(file) {
/* Here you could use jquery ajax calls to post it */
});
You can read about the dropzone documentation of the event here, and about uploading files with ajax jquery here and here.

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

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.

Categories