Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67469

How to Integrate Dropzone.js with ASP.NET Core MVC?

$
0
0

I want to upload some documents in my database using an IFormFile. On client side I'm using Dropzone.js but it's not working properly. Whenever I hit Submit button it sends a null value in parameter. I Have two queries. 1. How to send Document (image/PDF) to the action method. 2. How to redesign (change style of) Dropzone. (if someone explain the flow of dropzone then it would be very useful)

Here is my HTML Code

<form asp-action="AddDocument" asp-controller="Transactions" method="post" enctype="multipart/form-data" class="dropzone dz-clickable form-horizontal form-bordered" id="dropzoneForm">
    <div class="form-group form-actions">
        <div class="col-md-9 col-md-offset-4">
            <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-floppy-o"></i> Upload</button>
        </div>
    </div>
</form> 

JS Code:

$(function () {
            Dropzone.options.dropzoneForm = {
                paramName: "DocumentPhotos", // The name that will be used to transfer the file
                autoProcessQueue: false,
                uploadMultiple: true,
                parallelUploads: 100,
                accept: function (file, done) {
                    done();
                }
            };
        });

and here is my Server-Side language code:

        [HttpPost]
        public async Task<IActionResult> AddDocument(IEnumerable<IFormFile> DocumentPhotos)
        {

            if (DocumentPhotos!= null)
            {
                TransactionViewModel viewModel = new TransactionViewModel();
                var documentModel = viewModel.TransactionModel.TransactionDocuemnt;
                foreach (var item in DocumentPhotos)
                {

                    using (MemoryStream stream = new MemoryStream())
                    {
                        await item.CopyToAsync(stream);
                        documentModel.DocumentPhoto = stream.ToArray();
                    }
                    documentModel.DocumentName = item.FileName;
                    documentModel.SrNo = 1;
                    documentModel.SocietyRid = UserSessionState.ApplicationUser.SocietyRid;
                }
            }

            return PartialView("TransactionDocumentForm", transactionViewModel);
        }

Scripts and CSS used:

<link rel="stylesheet" href="~/css/basic.css" />
<link rel="stylesheet" href="~/css/dropzone.css" />
<script type="text/javascript" src="~/js/dropzone.js"></script>
<script type="text/javascript" src="~/js/dropzone-amd-module.js"></script>

Viewing all articles
Browse latest Browse all 67469

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>