-1

I want to achieve this in my MVC project. This is just a demo i created but i can't think of any solution about this.

Demo:

I want to add multiple files and display it as a list before submitting form.

When I submit the form by clicking save it should add all the files into the database. Also when I click the X sign it should remove that file from the list.

I don't know if it's possible to add all files into an object and pass it to the controller using ajax, if so please guide me on how to do this.

This is what I have done so far...

 <script type="text/javascript">
 function addToList() {
    var attachmentName = $('#attach').val();
    var fileName = $('#fileId')[0].files[0].name;

    var tbl = $('#listTable tbody');

    tbl.append('<tr class="child" style="text-align:center"><td>' + 
    attachmentName + '</td><td style="float:left">' + fileName + '</td><td 
   style="float:left"><a href="#">X</a></td></tr>');

    }
  </script>

  <h2>Create</h2>

  <div style="font-family:Arial">
    @using (Html.BeginForm("Create", "Attachment", null, FormMethod.Post, 
    new { 
    enctype = "multipart/form-data" }))
    {
    <div class="form-row">
        <div class="form-group col-md-4">
            <label for="inputCity">Attachment Name</label>
            @Html.TextBoxFor(modelItem => Model.AttachmentName, new { @class 
             = "form-control", @id = "attach" })
        </div>
        <div class="form-group col-md-4">
            <label>Files</label>
            <input type="file" id="fileId" multiple />
        </div>
        <br />
        <div class="form-group col-md-4">
            <label></label>
            <input type="button" class="btn" onclick="addToList()" 
            value="Add" />
        </div>
    </div>
    <div style="width:100%; float:left">
        <table width="100%" id="listTable">
            <thead>
                <tr>
                    <th width="30%" style="text-align:center">Name</th>
                    <th width="40%" style="float:left">File</th>
                    <th width="30%" style="float:left"></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <br /><br />
    <br />
    <div style="width:100%; float:left">
        <input type="submit" value="Save" class="btn" />
    </div>
}

Zenoo
  • 12,670
  • 4
  • 45
  • 69
waseemak
  • 1
  • 3
  • Possible duplicate of [Asp.net MVC: upload multiple image files?](https://stackoverflow.com/questions/25772134/asp-net-mvc-upload-multiple-image-files) – Peter B Mar 23 '18 at 09:09
  • [This Project](https://github.com/stephenmuecke/mvc-filehelper) might be of interest –  Mar 23 '18 at 09:10
  • Is it possible without any plugin because it seems difficult for me to use. – waseemak Mar 23 '18 at 10:52

1 Answers1

0

In MVC Project, It is possible to upload mulitple files at the same time and you do the same by using full post back, and jQuery file upload.

But it is not possible to hold multiple files before uploading to server.

Alternate way, you can upload files on server using jQuery file upload, and in the success event you can get the name of uploaded files to display on screen. If you want to remove you can remove it by sending an ajax request on server.

Finally on submitting entire form you should have to pass list of file name and those will get stored into database.

Vikas
  • 39
  • 11