How to change the default text in dropzone.js?

Question

I'm having trouble changing the default text of my dropzone uploader. Despite the fact that I've initialized it like this, it's still rendering the default text:

Dropzone.options.imgUpload = {
    paramName: "file", // Must match the name of the HttpPostedFileBase argument that the Upload action expects.
    dictDefaultMessage: "Drag your image here",
    acceptedFiles: "image/*" // Accept images only
};

Also tried changing the dictDefaultMessage set in dropzone.js, but with no luck :( By the way; am I supposed to use both or remove one of them?

Any suggestions?

Answer 1

Solved this by including the basic.css file alone. This does not render the sprites and you have full control of styling inside the dropzone (It just gives jo a basic skeleton to improve upon). When doing this, dictDefaultMessage is displayed.

Answer 2

This is based on the documentation of dropzone.js (enter link description here)

(without styles) http://jsfiddle.net/44pnR/1/

HTML

<form action="/file-upload"
      class="dropzone"
      id="img-upload"></form>

JS

/*"imgUpload" is the camelized version of the HTML element's ID*/
Dropzone.options.imgUpload  = {
    paramName: "file", // Must match the name of the HttpPostedFileBase argument that the Upload action expects.
    dictDefaultMessage: "custom message",
    acceptedFiles: "image/*" // Accept images only
};

Answer 3

The only thing that worked for me is to add:

<div class="dz-message" data-dz-message><span>Drag your image here!</span></div>

into my HTML file.

Answer 4

Adding anything with class as "dz-message" will replace the original text.