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?

score 215 · Accepted Answer · answered Apr 10 '14 at 15:27

215

Add an element within your dropzone form as follows:

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

answered Apr 10 '14 at 15:27

supernifty

4,171
2
32
24

7

I can confirm that this works, while changing "dictDefaultMessage" as a setting seems to do nothing. This is mostly because the text is replaced with an image that has text on it. – Florian Rachor Apr 30 '15 at 14:52
4

This work, but what do for all other kind of messages? There is a huge hole in the documentation – T-moty Nov 29 '16 at 22:32
this is work, BUT, this is forced me to click only the text to show the fileupload dialog. the clicking outside the text is now showing the fileupload – Hakan Fıstık Jan 10 '17 at 15:47
I'm using the html tag and have no other option as I am in an angular project. placing the above within that is not working. – tatsu Jun 13 '18 at 16:07

score 101 · Answer 2 · answered Aug 03 '16 at 00:33

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

See list of all message keys here: http://www.dropzonejs.com/#config-dictDefaultMessage — tuomassalo, May 02 '18 at 19:17
Now, you need to use this - Dropzone.options.dictDefaultMessage = "Drop files here to upload"; — Can Ali, Dec 13 '21 at 07:27

Firze · Answer 3 · 2015-01-14T06:32:55.320

44

When creating the dropzone you can set the default message like this.

var dropzone = new Dropzone("form.dropzone", {
   dictDefaultMessage: "Put your custom message here"
});

Then

$('div.dz-default.dz-message > span').show(); // Show message span
$('div.dz-default.dz-message').css({'opacity':1, 'background-image': 'none'});

edited Jan 14 '15 at 06:32

answered Jan 13 '15 at 15:27

Firze

3,939
6
48
61

Ollicca Mindstorm · Answer 4 · 2015-09-16T10:24:32.443

12

First add an id to your form, say mydz, then add this js:

Dropzone.options.mydz = {
    dictDefaultMessage: "your custom message"
};

The whole page (index.php in this case):

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<script src="dropzone.js"></script>
<link rel="stylesheet" type="text/css" href="./dropzone.css">
<title></title>

</head>

<body>

<form action="upload.php" class="dropzone" id="mydz"></form>
<script type="text/javascript">

Dropzone.options.mydz = {
    dictDefaultMessage: "Put your custom message here"
};


</script>

</body>
</html>

edited Sep 16 '15 at 10:24

answered Sep 11 '15 at 11:24

Ollicca Mindstorm

608
1
11
24

3

This is what documentation says, but unfortunately it doesn't work for me – Victor Laerte Sep 15 '15 at 14:46
1

Did you add an id to your form? If you did, it can't not work. Add the dropzone.js to the top of your page and the JS I gave you at the bottom of the page, and it must work. – Ollicca Mindstorm Sep 16 '15 at 10:18
I just updated my post with the whole page, copy paste that, include the relevant files, and see if it works. – Ollicca Mindstorm Sep 16 '15 at 10:25

score 10 · Answer 5 · answered Mar 04 '16 at 11:11

10

this text is in dropzone's default config, You can overwrite like this:

Dropzone.prototype.defaultOptions.dictDefaultMessage = "Your text";

answered Mar 04 '16 at 11:11

tientoantai

101
1
3

1

Thank you! I really didn't need to change the message but this is the only thing that helped me change the defaultOptions ☺ – Silvestre Jun 10 '16 at 20:15

score 8 · Answer 6 · answered May 17 '16 at 03:33

8

myDropzonePhotos = new Dropzone('#dropzone-test',
{
    url                : 'upload_usuario.php?id_usuario=' + id_usuario,
    maxFiles           : 1, 
    thumbnailWidth     : 1200,
    thumbnailHeight    : 300,
    dictDefaultMessage : 'Change the text here!',
    init: function()
    {
     ....

answered May 17 '16 at 03:33

Eduardo Paz

164
1
6

4

Hi! Welcome to StackOverflow! When answering questions, instead of just providing code, please also explain it. Read the guide to answering questions [here](http://stackoverflow.com/help/how-to-answer) – ayushgp May 17 '16 at 03:54

score 6 · Answer 7 · answered Apr 22 '20 at 18:30

I fiddled with this for hours.

For some reason, these 3 things needed to be done:

My dropzone tags could not be on the same page I was using dropzone on. I had to reference them on the template page
The element you are turning into a dropzone has to have a class of 'dropzone'
You have to add the following to the top of the js file for the page i was working on.

Dropzone.autoDiscover = false;

To Initialize:

var myDropzone = new Dropzone("#id-upload-dropzone", {
    url: "/home/Upload",
    dictDefaultMessage: 'Drop image here (or click) to capture/upload'
});

Once I had all 3 in order, the dictDefaultMessage option worked.

score 4 · Answer 8 · answered Mar 11 '19 at 05:42

For localizing Dropzone in Asp.Net Razor Pages I use the below method to avoid decoded chars :

Create HTML element for all messages

<!-- localization elements -->

<div class="modal" aria-hidden="true">

    <span id="dictDefaultMessage">@_localizer["Drop files here or click to upload."]</span>

    <span id="dictFallbackMessage">@_localizer["Your browser does not support drag'n'drop file uploads."]</span>

    <span id="dictFallbackText">@_localizer["Please use the fallback form below to upload your files like in the olden days."]</span>

    <span id="dictFileTooBig">@_localizer["File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB."]</span>

    <span id="dictInvalidFileType">@_localizer["You can't upload files of this type."]</span>

    <span id="dictResponseError">@_localizer["Server responded with {{statusCode}} code."]</span>

    <span id="dictCancelUpload">@_localizer["Cancel upload"]</span>

    <span id="dictCancelUploadConfirmation">@_localizer["Are you sure you want to cancel this upload?"]</span>

    <span id="dictUploadCanceled">@_localizer["Upload canceled."]</span>

    <span id="dictRemoveFile">@_localizer["Delete"]</span>

    <span id="dictRemoveFileConfirmation">@_localizer["Are you sure you want to delete this file?"]</span>

    <span id="dictMaxFilesExceeded">@_localizer["You can not upload any more files."]</span>

    <span id="dictFileSizeUnits_TB">@_localizer["TB"]</span>

    <span id="dictFileSizeUnits_GB">@_localizer["GB"]</span>

    <span id="dictFileSizeUnits_MB">@_localizer["MB"]</span>

    <span id="dictFileSizeUnits_KB">@_localizer["KB"]</span>

    <span id="dictFileSizeUnits_b">@_localizer["b"]</span>

</div>

Then bind messages to Dropzone element:

<script>
// get elements for localization

        with (Dropzone.prototype.defaultOptions) {

            dictDefaultMessage = document.getElementById("dictDefaultMessage").innerText;

            dictFallbackMessage = document.getElementById("dictFallbackMessage").innerText;

            dictFallbackText = document.getElementById("dictFallbackText").innerText;

            dictFileTooBig = document.getElementById("dictFileTooBig").innerText;

            dictInvalidFileType = document.getElementById("dictInvalidFileType").innerText;

            dictResponseError = document.getElementById("dictResponseError").innerText;

            dictCancelUpload = document.getElementById("dictCancelUpload").innerText;

            dictCancelUploadConfirmation = document.getElementById("dictCancelUploadConfirmation").innerText;

            dictUploadCanceled = document.getElementById("dictUploadCanceled").innerText;

            dictRemoveFile = document.getElementById("dictRemoveFile").innerText;

            dictRemoveFileConfirmation = document.getElementById("dictRemoveFileConfirmation").innerText; // if this is null, the user will not be prompted when deleting file.

            dictMaxFilesExceeded = document.getElementById("dictMaxFilesExceeded").innerText;

            dictFileSizeUnits = {

                tb: document.getElementById("dictFileSizeUnits_TB").innerText,

                gb: document.getElementById("dictFileSizeUnits_GB").innerText,

                mb: document.getElementById("dictFileSizeUnits_MB").innerText,

                kb: document.getElementById("dictFileSizeUnits_KB").innerText,

                b: document.getElementById("dictFileSizeUnits_b").innerText

            };

        };

</script>

for a complete drag-drop file upload sample using Dropzone see this GitHub repository : https://github.com/LazZiya/FileUpload

score 3 · Answer 9 · answered May 15 '14 at 19:50

in the css of dropzone look for

.dropzone .dz-default.dz-message

in this class delete

background-image: url("../images/spritemap.png");

the next thing to do is search this class

.dropzone .dz-default.dz-message span {
  display: none;
}

and change it to display:block

score 2 · Answer 10 · answered May 14 '14 at 15:25

If you aren't adverse to JQuery, this will hide the default image:

$('form.dropzone').find('div.default.message').css('background-image','none');

and, this will show the default span which you can change to be whatever you want:

$('form.dropzone').find('div.default.message').find('span').show();
$('form.dropzone').find('div.default.message').find('span').empty();
$('form.dropzone').find('div.default.message').find('span').append('Drop files here or click here to upload an image.');

score 1 · Answer 11 · answered Jul 27 '19 at 08:01

If you are creating Dropzones Programmatically then you have to set your options like below:

Dropzone.autoDiscover = false;

profilePicture = new Dropzone('#profile-picture', {
    url: "/uploadPicture.php",

    // if you are using laravel ..., you dont need to put csrf in meta tag
    headers: {
        'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },

    dictDefaultMessage: "Your default message Will work 100%",

    /other options
    paramName: "profile_picture",
    addRemoveLinks: true,
    maxFilesize: 1,
    maxFiles: 10,

    dictRemoveFile: "Remove",

});

If you are using it like this, It wont work ...

let myDropzone = new Dropzone("#profile-picture", {

    url: "/uploadPicture.php",
    // if you are using laravel ..., you dont need to put csrf in meta tag
    headers: {
        'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },

});

myDropzone.options.profilePicture = {

    dictDefaultMessage: "This message not gonna work",

    paramName: "profile_picture",
};

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

11 Answers11

Linked