Dropzone in div instead of entire form

Question

I am following this guide to integrate dropzone into a form and submit my form with it

https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone

However, this is what I end up with

My categories input is located inside the dropzone area instead of outside. Same with my buttons. How can I make my dropzone only be located in a div instead of taking up the whole form?

This is my dropzone configuration and form

@section scripts{
    <script>
        $(document).ready(function () {
           $(document).on("submit", "#form", function (e) {
                e.preventDefault();
                $.ajax({
                    url: "@Url.Action("Save", @ViewContext.RouteData.Values["controller"].ToString())",
                    method: "POST",
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        console.log(result);
                    }
                });
                return false;
            });
        });
    </script>
}
<div class="col-sm-12">
    <h2>Upload</h2>
    <hr />
</div>
@using (Html.BeginForm(null, null, FormMethod.Post,new { @class = "dropzone", enctype = "multipart/form-data", id = "form" }))
{
    @Html.AntiForgeryToken()
    <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    @Html.LabelFor(m => m.Categories)
                    @Html.DropDownListFor(m => m.Categories, (SelectList)Model.Categories, "", new { @class = "form-control col-sm-12" })
                    @Html.ValidationMessageFor(m => m.Categories)
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="dropzone-previews form-group">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <div class="clearfix">
                        <div class="pull-right">
                            <input type="submit" id="submit" value="Save" class="btn btn-primary" />
                            @Html.ActionLink("Cancel", "Index", @ViewContext.RouteData.Values["controller"].ToString(), new { }, new { @class = "btn btn-outline-secondary" })
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}
<script>
    Dropzone.options.form = {
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 100,
        init: function () {
            var myDropzone = this;

            // First change the button to actually tell Dropzone to process the queue.
            this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
                // Make sure that the form isn't actually being sent.
                e.preventDefault();
                e.stopPropagation();
                myDropzone.processQueue();
            });
            // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
            // of the sending event because uploadMultiple is set to true.
            this.on("sendingmultiple", function () {
                // Gets triggered when the form is actually being sent.
                // Hide the success button or the complete form.
            });
            this.on("successmultiple", function (files, response) {
                // Gets triggered when the files have successfully been sent.
                // Redirect user or notify of success.
            });
            this.on("errormultiple", function (files, response) {
                // Gets triggered when there was an error sending the files.
                // Maybe show form again, and notify user of error
            });
        }
    };
</script>

Answer 1

Try the following changes in your code

Add 'id="dropzonePreview"' in you want

<div class="col-sm-12">
            <div class="dropzone-previews form-group" id="dropzonePreview">
            </div>
</div>

Add 'previewpreviewsContainer: "#dropzonePreview", clickable: "#dropzonePreview"' in Script like below

 Dropzone.options.form = {
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 100,
        previewpreviewsContainer: "#dropzonePreview",
        clickable: "#dropzonePreview",...}