Sometimes, we want to change the default text in Dropzone.js and JavaScript.
In this article, we’ll look at how to change the default text in Dropzone.js and JavaScript.
Change the Default Text in Dropzone.js and JavaScript
To change the default text in Dropzone.js and JavaScript, we can set the properties of the Dropzone.prototype.defaultOptions property.
For instance, we can create a drop zone by writing the following HTML:
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
<form action="/upload-target" class="dropzone"></form>
We add the dropzone.hs script and CSS. Then we add the form element to add the drop zone.
Next, we set the messages by writing:
Dropzone.prototype.defaultOptions.dictDefaultMessage = "Drop files here to upload";
Dropzone.prototype.defaultOptions.dictFallbackMessage = "Your browser does not support drag'n'drop file uploads.";
Dropzone.prototype.defaultOptions.dictFallbackText = "Please use the fallback form below to upload your files like in the olden days.";
Dropzone.prototype.defaultOptions.dictFileTooBig = "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.";
Dropzone.prototype.defaultOptions.dictInvalidFileType = "You can't upload files of this type.";
Dropzone.prototype.defaultOptions.dictResponseError = "Server responded with {{statusCode}} code.";
Dropzone.prototype.defaultOptions.dictCancelUpload = "Cancel upload";
Dropzone.prototype.defaultOptions.dictCancelUploadConfirmation = "Are you sure you want to cancel this upload?";
Dropzone.prototype.defaultOptions.dictRemoveFile = "Remove file";
Dropzone.prototype.defaultOptions.dictMaxFilesExceeded = "You can not upload any more files.";
All the messages are in the Dropzone.prototype.defaultOptions property.
Conclusion
To change the default text in Dropzone.js, we can set the properties of the Dropzone.prototype.defaultOptions property.
