'Dropzone.js - Combine with normal form - ask about positioning

I am using Dropzone and try to combine it with normal form so I read this tutorial https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone and yeah I can do it successfully. However, I want other input text field and submit-button to be outside of form tag (outside of dropzone) so I use css position:absolute the text input to be above the form and submit-button below form

but I forgot that if I select image to upload the form dropzone's height will extend. so It fail. (see the screenshot)

enter image description here

<form id="my-awesome-dropzone" class="dropzone" style="position:relative">
  <div class="dropzone-previews"></div> 

  Username : <input type="text" name="username" style="position:absolute; top:-50px; left:0px; /> <br/>
  Email: <input type="text" name="email" style="position:absolute; top:-40px;left:0px; /> <br/>

  <button type="submit" style="position:absolute;top:100px;left:0px;">Submit data and files!</button>
</form>

I even move the button to outside of form and use html5 attribute form="my-awesome-dropzone" but it's not work. How could I do?

javascriptjqueryhtmlcssdropzone.js


Solution 1:[1]

You could do it this way, a padding of 20px to the form at bottom, and append button to absolute, bottom: 0px, and it will be at end of form, even if there's uploaded images.

$(function(){
  Dropzone.autoDiscover = false;
  
  var myDropzone = new Dropzone("#my-awesome-dropzone", { url: "/file/post"});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://www.dropzonejs.com/new-js/dropzone.js"></script>
<link href="http://www.dropzonejs.com/css/dropzone.css" rel="stylesheet"/>

<form id="my-awesome-dropzone" class="dropzone" style="position:relative; padding-bottom: 30px;">

  <input type="email" name="username" /><br>
  <input type="password" name="password" /><br>

  <div class="dropzone-previews"></div> 
  
  <button type="submit" style="position: absolute; bottom: 0px;">Submit data and files!</button>
</form>

Solution 2:[2]

I think your problem of dropzone overlapping submit button is due to form having style="position:relative" and button having style="position:absolute;top:100px;left:0px;". Remove both of them.

Solution 3:[3]

this seems to be a strange way of achieving what you want. I checked the documentation and in the Tips & Tricks section (https://docs.dropzone.dev/misc/tips) it clearly states that you can put an element inside your dropzone element with the class dz-message and dropzone will not create the message for you. So I would suggest that you do like I've done and above your submit button place the following element:

<div class="dz-message">
    <div>Upload file here</div>
 </div>

The negative aspect is that dictDefaultMessage isn't then honoured.

Also, if javascript is disabled then the div will still show, in which case add this to your css:

<noscript>
    <style>
        .dz-message {display:none;}
    </style>
</noscript>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ultrazz008
Solution 2 Serg Chernata
Solution 3 luke_mclachlan

Related Questions