Dropzone: Creating dropzones programatically doesn't show dictDefaultMessage

[knifesk]

That's it.. when I create a dropzone by code the resulting dropzone is functional but empty... no messages nor nothing

here is a demo: http://jsfiddle.net/umb2T/

[knifesk]

Nevermind... The target div haves the class="dropzone" to dropzone to add the message... Don't know if intended or a bug... so I'll leave this issue open

[ericbonintrafic]

Using the dropzone class is supposed to trigger the default dropzone, so it's normal that the message now appears, as this is the default configuration. Using a different class and programmatically creating the dropzone with the dictDefaultMessage as an option should definitely change and show that message. At least that's the behavior I was expecting. I wish I could mark this issue as a bug. I'll wait for other people to comment on this then.

[knifesk]

I think the class should be used to create dropzones automatically only (at load time)... but if you create one programmatically it should not require the target DOM element to have the class.. so you can have both independent ways to create dropzones

a) dumb autoload way
b) programmatically without the need of markup classes..

[knifesk]

If more people support this, I can fix the thing and contribute a bit to this great library.

[itskingori]

@knifesk I'm having this problem as well.

[tusharvikky]

+1

[HanieHadadi]

I'm having same problem
+1

[amille44420]

I'm having the same issue. The message appears when the Dropzone is initialized automatically with the class "dropzone". That's right, this is the right behavior. However if I initialize my Dropzone programmatically, the message won't appear.

After what I went in the source code to see under which conditions the message will be added and I found the reason. While initializing, the message will only be create if the Dropzone is having the css class "dropzone".

[coreyzev]

+1, @enyo @knifesk

So my expectation here was that initializing my dropzone via the programatic method would have the EXACT SAME effect as adding the class only (autoDiscover).

This is because I want to make it easier to enact methods on it later. Outside of (or including) init().,

My expectation is that altering the options when initializing it programmatically would overwrite the defaults, but if they are not defined, it would act the same as autoDiscover. Including ADDING the dropzone class so things would work the same. And adding all of the sub-divs that would be added via autoDiscover.

This is a HUGE issue with the way dropzone works. As it completely impedes using any existing CSS and doing it programatically. It doesnt work the same way at all.

If complete customizability is desired by someone, then this could be an option to add. As I am a fan of completely unstyled plugins.

[coreyzev]

I am realizing now, that this works as expected... BUT there is a step which is NOT clear in the documentation. This took some experimentation to figure out.

Basically, it's VERY EASY to mess it up, with little to no clear documentation. I'm not sure why it only works this way, but this worked for me. AND I could then use dictDefaultMessage as expected.

It's also very simple to fix: turn autoDiscover off.

To get this to function as expected.

• Set up your form as such:

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

• Set the autoDiscover to false:

Dropzone.autoDiscover = false;

• Set your options and initialize the dropzone:

dropzoneOptions = {
    url: '/file-upload',
    dictDefaultMessage: 'Drop photos or click here to upload'
};
var uploader = document.querySelector('#file-upload');
var newDropzone = new Dropzone(uploader, dropzoneOptions);

all the pieces are there in the documentation, but the correlation is not there.

[arsensokolov]

This is not work for me, see: http://jsfiddle.net/arsenbespalov/umb2T/11/

[puterleat]

@ArsenBespalov I'm also having this issue.

[calubrious]

Bit of a workaround but this worked for me it's in jquery format tho.

   $(".dz-back").dropzone({
         init: function(){
           $(this.element).html(this.options.dictDefaultMessage);
         },
         processing: function()
         {
           $('.dz-message').remove();
         },
         dictDefaultMessage: '<div class="dz-message">My message to show at the start and disapear when you do stuff</div>',
      });

[JamieMcDonnell]

calubrious solution, with a bit of adjustment, worked for me - the init method needs to be:
init: function () { if($(this.element).find(".dz-message").length === 0){ var $container = $('<div class="dz-default dz-message"><span></span></div>'); $container.append(this.options.dictDefaultMessage); $(this.element).find("form").append($container); } }

[brianpatrickhummel]

I was able to get things to work as expected when initializing via the Dropzone jQuery Plugin (including a customized Default Message), by simply adding the "dropzone" class prior to calling the dropzone() method on my jQuery targeted element.\:

$("#dropzoneID").addClass("dropzone").dropzone({ url: "/upload", maxFilesize: 2, maxFiles: 10, capture: "camera", dictDefaultMessage: "Please drop files to be uploaded here" });

[askonieczny]

I've tried the various solutions people have explained on here and still am having issues with changing the defaulted text in the dropzone box. Does anyone have a recent fix that worked for them?

[enyo]

@askonieczny paste your configuration. I'll have a look