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

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

    Tuesday, July 10, 2018 8:17 AM

All replies

  • 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

    Wednesday, July 11, 2018 5:39 AM
  • 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
    Wednesday, July 11, 2018 6:23 AM
  • 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

    Wednesday, July 11, 2018 6:43 AM