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>
}