Any Idea how to handle file input fields when updating a form

Question

I am using asp.net core 3.1 with Razor forms. I have a form that contains an input of type file and it is multiple files input. In the create form it is easy to access the file from the model. The problem is in the update form how can handle the preview, delete adding new files to the multiple file input. Is there a best practice to solve such thing.

Answer 1

I've been using bootstrap4 file input!

to load the images when updating the form I used the following way:

var filesArray = [];
$(document).ready(function ()
{
    $("#photos").fileinput("refresh",
        {
            showUpload: false,
            showRemove: false
        });
    loadPhotos();
    setTimeout(function ()
    {
        if (filesArray.length > 0)
        {
            $(".file-drop-zone-title").remove();
            $('#photos').fileinput('readFiles', filesArray);
        }
    }, 2500);
   
});

function loadPhotos()
{
    //hddPhotos is a hidden input that I stored the images URLs in
    var photosPath = $('#hddPhotos').val();
    if (photosPath !== null && photosPath!=='')
    {
        var photos = jQuery.parseJSON($('#hddPhotos').val());
        if (photos.length > 0)
        {
            var count = photos.length;
            for (var i = 0; i < count; i++)
            {
                getBlobofImage(photos[i]);
            }
        }
    }
}

function getBlobofImage(imagePath)
{
    var blob = null;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", imagePath);
    xhr.responseType = "blob";//force the HTTP response, response-type header to be blob
    xhr.onload = function ()
    {
        blob = xhr.response;//xhr.response is now a blob object
        filesArray.push(new File([blob], /[^/]*$/.exec(imagePath)[0]));
    };
    xhr.send();
}

Answer 2

The problem is in the update form how can handle the preview, delete adding new files to the multiple file input. Is there a best practice to solve such thing.

I suggest that you could use jQuery MultiFile.

Here are the steps:

1.Download the jQuery MultiFile:https://multifile.fyneworks.com/#Install

2.Find the download zip file and extract it then move to the project wwwroot/lib folder:

For asp.net core mvc:

View:

<form asp-controller="Home" asp-action="UploadData" enctype="multipart/form-data">
    <div>
        <input type="file" name="files" multiple="multiple" class="multi with-preview" />

        <input type="submit" value="Upload" />
    </div>
</form>

@section Scripts
{
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript" language="javascript"></script>

    <script src="~/lib/multifile-master/jquery.MultiFile.js"></script>
}

Controller:

[HttpPost]
public IActionResult UploadData(List<IFormFile> files)
{
    //do your stuff...
    return Ok();
}

For asp.net core razor pages:

Index.cshtml:

@page
@model IndexModel
<form asp-page-handler="UploadData" enctype="multipart/form-data">
    <div>
        <input type="file" name="files" multiple="multiple" class="multi with-preview" />

        <input type="submit" value="Upload" />
    </div>
</form>

@section Scripts
{
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript" language="javascript"></script>

    <script src="~/lib/multifile-master/jquery.MultiFile.js"></script>
}

Index.cshtml.cs:

public class IndexModel : PageModel
{
    public IActionResult OnGet()
    {
        return Page();
    }

    public IActionResult OnPostUploadData(List<IFormFile> files)
    {
        return Page();
    }
}

Result: