loading uploaded items into a list before submitting and saving it to the db

Question

User1465791785 posted

i need to add document one by one when clicking to the add button , and submitting it to the db.

when file is imported to the view, i need to put it in a list before submitting to controller like this below

File	Document
Invoice.pdf	Invoice
PackingList.pdf	Packing List

        <div class="col-md-8 panel-purple panel-left">

            <div class="center-block panel-heading">
                <h6 class="panel-title fa fa-upload"></h6>  Upload Documents
            </div>
            <br />

            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label>File input</label>
                        <input type="file" data-classbutton="btn btn-default" data-classinput="form-control inline" class="form-control filestyle" />

                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label>Docuument Type</label>
                        @Html.DropDownList("DocumentTypeId", null, htmlAttributes: new { @class = "form-control" }, optionLabel: "Please Select Document")
                        @Html.ValidationMessageFor(model => model.DocumentTypeId, "", new { @class = "text-danger" })
                    </div>
                </div>
                <button type="submit" class="btn btn-primary btn-lg">Add Document</button>
                @*<button class="btn btn-pink btn-lg" type="submit">Register</button>*@

            </div>

        </div>

Answer 1

User1724605321 posted

Hi marya ,

You can hide the uploaded file input html control and create a new file input control , after uploading all the files , click submit button and send all the files to server side . Code below is for your reference :

Html:

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div id="uploadarea">
        <input type="file" class="imageUrlInput" name="imageURL"  />

        <input type="submit" name="submit" value="Submit" />
    </div>

}


<div id="file-list">

Javascript :

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    data = new FormData();
    $(document).ready(function () {
        var filesUpload = $(".imageUrlInput"),
            fileList = document.getElementById("file-list");
        function uploadFile(file) {
            var li = document.createElement("li"),
                div = document.createElement("div"),
                reader,
                xhr,
                fileInfo;

            li.appendChild(div);

            var currentInput = $('.imageUrlInput');
            currentInput.removeClass("imageUrlInput");

            $("#uploadarea").append('<input type="file" class="imageUrlInput" name="' + new Date().toString() + '"/>');
            currentInput.hide();

            fileInfo = "<div class=\"neutral\">File: <strong>" + file.name + "</strong> with the size <strong>" + parseInt(file.size / 1024, 10) + "</strong> kb is in queue.</div>";
            div.innerHTML = fileInfo;

            fileList.appendChild(div);
        }

        function traverseFiles(files) {
            if (typeof files !== "undefined") {
                for (var i = 0, l = files.length; i < l; i++) {
                    uploadFile(files[i]);
                }
            }
            else {
                fileList.innerHTML = "<div class=\"neutral\">Your browser does not support Multiple File Upload, but you can still upload your file. We recommend you to upload to a more modern browser, like <a href=\"http://google.com/chrome\" target=\"_blank\">Google Chrome</a> for example.<div>";
            }
        }

        $(document).on('change', '.imageUrlInput', function () {
            traverseFiles(this.files);
        });
    });
</script>

Controller :

   [HttpPost]
        public ActionResult Upload()
        {

            if (Request.Files.Count > 0)
            {
                for (int i = 0; i < Request.Files.Count; i++)
                {
                    var file = Request.Files[i];
                    if (file != null && file.ContentLength > 0)
                    {
                        var fileName = Path.GetFileName(file.FileName);
                        var path = Path.Combine(Server.MapPath("~/UploadFiles/"), fileName);
                        file.SaveAs(path);
                    }
                }
              
            }
               
            return RedirectToAction("Index");
        }

Best Regards,

Nan Yu

Answer 2

User1465791785 posted

thanks for the detailed reply,  before posting it to the controller side, i need them to be listed  in the view,adding them one by one by clicking add document button.

This is the way i want 

https://techbrij.com/crud-file-upload-asp-net-mvc-ef-multiple, in addition to files, i need to add document type too with each files selected

            <div>

                <div class="center-block panel-heading" id="uploadarea">
                    <h6 class="panel-title fa fa-upload"></h6>  Upload Documents
                </div>
                <br />

                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label>File input</label>
                            <input type="file" data-classbutton="btn btn-default" data-classinput="form-control inline" class="form-control filestyle" />

                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label>Docuument Type</label>
                            @Html.DropDownList("DocumentTypeId", null, htmlAttributes: new { @class = "form-control" }, optionLabel: "Please Select Document")
                            @Html.ValidationMessageFor(model => model.DocumentTypeId, "", new { @class = "text-danger" })

                        </div>
                    </div>
                    <br />
                    <button type="submit" class="btn btn-primary btn-lg fa fa-upload"> Add Document</button>
                    <br />


                </div>



                <br />
            </div>

//After clicking to add document , i need them to be listed in the view, before posting them all to the controller like this

File	Document
Invoice.pdf	Invoice	Remove
PackingList.pdf	Packing List	Remove

Answer 3

User1724605321 posted

Hi marya ,

With the code sample above you already get each file information and show in view , please try that code sample . If you need the remove function , you can find the current filename in the File column in the view using javascript , and delete the related hidden file input . Then it won't submit to server side .

Best Regards,

Nan Yu