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

Answer 1

我还没有对此进行全面测试，但是尝试在您想要放置框的位置添加此div，然后使用css对其进行样式设置以使其成为正确的尺寸。

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

Answer 2

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".