ASP.NET MVC view with dropzone hangs on the server

134 Views Asked by At

I am using ASP.NET MVC to develop my application.

My view is been supported by Dropzone library written in Javascript.

FUNCTION: upload one or multiple files to the controller. It returns an object to the same view with the uploaded file(s), so the user can label each uploaded file with the type of file.

ISSUE: after testing, my conclusion is that the configuration and use of Dropzone.js in my view (see below) for some reason hangs the execution of the application. What I mean, is that the code under the if {} condition in the view is not being rendered.

It looks to me, like the page in the server is never refreshed when the controller calls the cshtml page. So it always produces the same output result, under all conditions.

If I use the code <input type="file" name="files" multiple/> then the app it will work.

CSHTML markup:

<div class="col ml-2">
    <table id="UploadedDataTable" border="1" class="blueTable display nowrap" style="width:100%">
        <thead>
            <tr>
                <th scope="col" style="text-align:center" width="65%" title="Uploaded file name">Uplodaded file name</th>
                <th style="text-align:center" title="Uploaded file type">Document Type</th>
            </tr>
        </thead>
        <tbody>
            @if (Model.UploadedFiles != null && Model.UploadedFiles.Attachments.Count > 0)
            {
                for (int i = 0; i < Model.UploadedFiles.Attachments.Count; i++)
                {
                    <tr>
                        <td>@Model.UploadedFiles.Attachments[i].Name</td>

                        @if (string.IsNullOrEmpty(Model.UploadedFiles.Attachments[i].DocumentType))
                        {
                            Model.UploadedFiles.Attachments[i].DocumentType = ISAA.Business.Models.Invoices.InvoicesParameters.getInstance().GetDocumentType()[0].Code;
                            <td>Doc. Type: @Html.DropDownListFor(m => Model.UploadedFiles.Attachments[i].DocumentType, new SelectList(ISAA.Business.Models.Invoices.InvoicesParameters.getInstance().GetDocumentType(), "Code", "Name"), " - Select Document Type -", new { @class = "form-control form-control-sm", aria_describedby = "shipment-entry-19" })</td>
                        }
                        else
                        {
                            <td>Doc. Type: @Html.DropDownListFor(m => Model.UploadedFiles.Attachments[i].DocumentType, new SelectList(ISAA.Business.Models.Invoices.InvoicesParameters.getInstance().GetDocumentType(), "Code", "Name"), " - Select Document Type -", new { @class = "form-control form-control-sm", aria_describedby = "shipment-entry-19" })</td>
                        }
                    </tr>
                }
            }

        </tbody>
    </table>
    <small>Define correctly the Document Type</small>
</div>

Javascript (dropzone configuration):

@section scripts {

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/dropzone")

<script type="text/javascript">
    $(document).ready(function () {
        Dropzone.autoDiscover = false;

        $('#myDropzone').dropzone({
            //parameter name value
            paramName: "files",
            //clickable div id
            clickable: '#previews',
            //preview files container Id
            previewsContainer: "#previewFiles",
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            //  url:"/", // url here to save file
            maxFilesize: 100,//max file size in MB,
            addRemoveLinks: true,
            dictResponseError: 'Server not Configured',
            acceptedFiles: ".cvs,.xls,.xlsx,.pdf",// use this to restrict file type
            init: function () {
                var self = this;
                // config
                self.options.addRemoveLinks = true;
                self.options.dictRemoveFile = "Delete";
                //New file added
                self.on("addedfile", function (file) {
                    console.log('new file added ', file);
                    $('.dz-success-mark').hide();
                    $('.dz-error-mark').hide();
                });
                // Send file starts
                self.on("sending", function (file) {
                    console.log('upload started', file);
                    $('.meter').show();
                });

                // File upload Progress
                self.on("totaluploadprogress", function (progress) {
                    console.log("progress ", progress);
                    $('.roller').width(progress + '%');
                });

                // On removing file
                self.on("removedfile", function (file) {
                    console.log(file);
                });

                $('#Submit').on("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    // Validate form here if needed

                    if (self.getQueuedFiles().length > 0) {
                        self.processQueue();

                    } else {
                        self.uploadFiles([]);
                        $('#myDropzone').submit();
                    }
                });

                self.on("successmultiple", function (files, response) {
                    // Gets triggered when the files have successfully been sent.
                    // Redirect user or notify of success.

                });
            }
        });
    })
</script>
}
0

There are 0 best solutions below