How do I change the default text in dropzone.js?

Question

I am using dropzone.js to upload files. However, I'm having difficulty changing the default text.

I've tried instantiating the dropzone class:

$(document).ready(function(){   $(".foo").dropzone({ dictDefaultMessage: "hello" }); }); 

With this markup:

    <div class="span4">       <form action="http://localhost/post" method="post" accept-charset="utf-8" id="drop3" class="foo" enctype="multipart/form-data"> </form>     </div>     <div class="span4">       <form action="http://localhost/post" method="post" accept-charset="utf-8" id="drop4" class="foo" enctype="multipart/form-data"> </form>   </div> 

This certainly gives me the ability to upload files but the default text is blank.

I tested the following:

 $(".foo").dropzone(); 

and I appear to get the same result - no default text. So.. how do I change the default text?

Answer 1

Add an element within your dropzone form as follows:

<div class="dz-message" data-dz-message><span>Your Custom Message</span></div> 

Answer 2

You can change all default messages with this:

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