Integrating Dropzone.js into a html form with other form fields

Question

I would like to add dropzonejs to a form with other elements. I found this sample and followed the instructions, unfortunately the whole from becomes a dropzonejs drop zone: https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone

Here is my code:

<form action="/Post/Edit" class="dropzone" enctype="multipart/form-data" method="post">
  <div class="form-group">
    <label for="PostAddress_AddressLineOne">Address Line One</label>
    <input class="form-control" id="PostAddress_AddressLineOne" name="PostAddress.AddressLineOne" type="text" value="" />
  </div>
  <div class="dropzone-previews"></div>
  <div class="fallback">
    <!-- this is the fallback if JS isn't working -->
    <input name="file" type="file" multiple />
  </div>

  <script type="text/javascript">
    Dropzone.options.dropzoneJsForm = {

      //prevents Dropzone from uploading dropped files immediately
      autoProcessQueue: false,
      uploadMultiple: true,
      parallelUploads: 25,
      maxFiles: 25,
      addRemoveLinks: true,
      previewsContainer: ".dropzone-previews",


      // The setting up of the dropzone
      init: function() {
        var myDropzone = this;

        // Here's the change from enyo's tutorial...

        $("#submit-all").click(function(e) {
          e.preventDefault();
          e.stopPropagation();
          myDropzone.processQueue();
        });

      }

    };
  </script>

I have also followed the follwoing post and the whole from still remains a drop zone: Integrating dropzone.js into existing html form with other fields

Do i have to have a from with in a form?

Thanks

Nested FORM elements are generally not valid. See http://stackoverflow.com/questions/555928/is-it-valid-to-have-a-html-form-inside-another-html-form /// BTW it is the class 'dropzone' that is activating your entire form as a dz. — CSSian, Feb 26 '15 at 00:16
possible duplicate of [Integrating dropzone.js into existing html form with other fields](http://stackoverflow.com/questions/17872417/integrating-dropzone-js-into-existing-html-form-with-other-fields) — Rick Smith, Sep 16 '15 at 17:23

score 1 · Answer 1 · answered Jan 20 '16 at 15:55

The class of your form is "dropzone" and that is why the form becomes a dropzone.

Only use the "dropzone" class on the actual element that you want to become a dropzone. For example try to change "dropzone-previews" into "dropzone".

Or if you want to create the dropbox programmatically, use:

Dropzone.autoDiscover = false;

This will turn off the automatic conversion of elements with the class "dropzone".

score 0 · Answer 2 · answered Nov 22 '14 at 18:46

0

I haven't fully tested this, but try adding this div in the place where you want the drop box to be, then use css to style it so that it is the correct dimensions.

<div class="dz-message" data-dz-message>Text you want in the drop area</div>

answered Nov 22 '14 at 18:46

psigns

179
2
4

This didn't seem to make a difference, the whole form stays a drop zone. Thanks for your help, any other ideas? – user1376198 Dec 08 '14 at 13:23

Integrating Dropzone.js into a html form with other form fields

2 Answers2

Linked