Dropzone inside a html form with other form fields

Question

I want to add a dropzone inside an existing form but it doesn't seem to work.

When I view the console I get error throw new Error("No URL provided"). When I click upload I get no preview either - all I get is a normal file input.

 <link href="../dropzone.css" rel="stylesheet">

<form action="/" enctype="multipart/form-data" method="POST">

    <input type="text" id ="Username" name ="Username" />

    <div class="dropzone" id="my-dropzone" name="mainFileUploader">
        <div class="fallback">
            <input name="file" type="file" />
        </div>
    </div>

    <div>
      <button type="submit" id="submit"> upload </button>
    </div>

</form>

 <script src="../jquery.min.js"></script>
 <script src="../dropzone.js"></script>

 <script>
  $("my-dropzone").dropzone({ 
     url: "/file/upload",
     paramName: "file"

  });

</script>

Answer 1

No url provided error is because $("my-dropzone") is wrong instead it must be $('#mydropzone')

dropzone along with other form, yes this is very much possible, you have to post the data using the URL provided in the dropzone not in the form action. That means all your form data along with the files uploaded shall be posted back to the url provided for the dropzone. A simple untested solution is as below;

<link href="../dropzone.css" rel="stylesheet">

<form action="/" enctype="multipart/form-data" method="POST">

    <input type="text" id ="Username" name ="Username" />

       <div class="dropzone" id="my-dropzone" name="mainFileUploader">
          <div id="previewDiv></div>
          <div class="fallback">
             <input name="file" type="file" />
          </div>
       </div>
       <div>
           <button type="submit" id="submitForm"> upload </button>
       </div>
</form>

<script src="../jquery.min.js"></script>
<script src="../dropzone.js"></script>
        <script>

        $("#mydropzone").dropzone({
            url: "/<controller>/action/" ,
            autoProcessQueue: false,
            uploadMultiple: true, //if you want more than a file to be   uploaded
            addRemoveLinks:true,
            maxFiles: 10,
            previewsContainer: '#previewDiv',

            init: function () {
                var submitButton = document.querySelector("#submitForm");
                var wrapperThis = this;

                submitButton.addEventListener("click", function () {
                    wrapperThis.processQueue();
                });

                this.on("addedfile", function (file) {

                    // Create the remove button
                    var removeButton = Dropzone.createElement("<button class="yourclass"> Remove File</button>");

                    // Listen to the click event
                    removeButton.addEventListener("click", function (e) {
                        // Make sure the button click doesn't submit the form:
                        e.preventDefault();
                        e.stopPropagation();

                        // Remove the file preview.
                        wrapperThis.removeFile(file);
                   });

                    file.previewElement.appendChild(removeButton);
                });

            // Also if you want to post any additional data, you can do it here
                this.on('sending', function (data, xhr, formData) {
                    formData.append("PKId", $("#PKId").val());
                });

                this.on("maxfilesexceeded", function(file) {
                    alert('max files exceeded');
                    // handle max+1 file.
                });
            }
        });
    </script>

The script where you initialize dropzone can be inside $document.ready or wrap it as a function and call when you want to initialize it.

Happy coding!!