I'm new to Dropzonejs and javascript/jQuery. I have spent some time playing with it and set up a dropzone which works great, but I need to create custom fallback function with 2 text inputs, 1 textarea, 1 checkbox and a submit button.
I do not now what to do next after I have put
<div class="fallback"></div>
into my form.
I have also created:
fallback: function() {
} // end of fallback
in options.mydropzone
Here is where I'm stuck. I need some hints to plete me custom fallback function.
I'm new to Dropzonejs and javascript/jQuery. I have spent some time playing with it and set up a dropzone which works great, but I need to create custom fallback function with 2 text inputs, 1 textarea, 1 checkbox and a submit button.
I do not now what to do next after I have put
<div class="fallback"></div>
into my form.
I have also created:
fallback: function() {
} // end of fallback
in options.mydropzone
Here is where I'm stuck. I need some hints to plete me custom fallback function.
Share Improve this question edited Sep 3, 2013 at 11:41 rafjon asked Sep 3, 2013 at 11:15 rafjonrafjon 31 silver badge3 bronze badges 2- A fallback from what, to what and when? – user2417483 Commented Sep 3, 2013 at 11:24
- Sorry, when Browser does not support File API (drag&drop) I want to display a custom form e.g. IE9 users and safari < 6 do not get drag & drop form to submit. So I want to use fallback function in Dropzonejs and create custom upload form. – rafjon Commented Sep 3, 2013 at 11:35
2 Answers
Reset to default 4Dropzone actually does this out of the box, you do not need to create this behavior. You just have to place a div with class='fallback' within the form, that holds an input for older browsers:
<form method="POST" action="/upload" class="dropzone">
<div class="fallback">
<input type="file" name="file" />
<input type="submit" />
</div>
</form>
Wrap your current form within a div
<div id="generalForm">
<form name='form1' .....>
</div>
Create a second form that you want to use as the fallback and wrap that in a div also
<div id="specialForm" style='display:none'>
<form name="form1" .... >
</div>
In your fallback function you would use
fallback: function() {
document.getElementById('generalForm').style.display="none";
document.getElementById('specialForm').style.display='block';
}
Is that what you are wanting?