CODEWITHSUNDEEP
javascriptphpimagedropzone.js
vimal kumar
vimal kumar

Reputation: 75

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.",

Upvotes: 0

Views: 1911

Answers (2)

VeRJiL
VeRJiL

Reputation: 564

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 ?>",


    };

Upvotes: 3

vimal kumar
vimal kumar

Reputation: 75

<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

Upvotes: 0

Related Questions