How to Change the Default Text in Dropzone.js?

To change the default text in Dropzone.js, 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.