101

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?

11 Answers 11

220

Add an element within your dropzone form as follows:

<div class="dz-message" data-dz-message><span>Your Custom Message</span></div>
4
  • 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. Commented Apr 30, 2015 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
    Commented Nov 29, 2016 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 Commented Jan 10, 2017 at 15:47
  • I'm using the <dropzone> html tag and have no other option as I am in an angular project. placing the above within that is not working.
    – tatsu
    Commented Jun 13, 2018 at 16:07
104

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

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'});
0
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>
3
  • 3
    This is what documentation says, but unfortunately it doesn't work for me Commented Sep 15, 2015 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. Commented Sep 16, 2015 at 10:18
  • I just updated my post with the whole page, copy paste that, include the relevant files, and see if it works. Commented Sep 16, 2015 at 10:25
10

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

Dropzone.prototype.defaultOptions.dictDefaultMessage = "Your text";
1
  • 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
    Commented Jun 10, 2016 at 20:15
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()
    {
     ....
1
  • 4
    Hi! Welcome to StackOverflow! When answering questions, instead of just providing code, please also explain it. Read the guide to answering questions here
    – ayushgp
    Commented May 17, 2016 at 3:54
6

I fiddled with this for hours.

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

  1. My dropzone tags could not be on the same page I was using dropzone on. I had to reference them on the template page
  2. The element you are turning into a dropzone has to have a class of 'dropzone'
  3. 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.

4

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

3

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

2

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.');
1

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",
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.