CODEWITHSUNDEEP
javascriptfileupload
user1376198
user1376198

Reputation: 61

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

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

Upvotes: 4

Views: 4984

Answers (2)

user3724062
user3724062

Reputation: 33

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

Upvotes: 1

psigns
psigns

Reputation: 179

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>

Upvotes: 0

Related Questions