Generate table of acquisitions that were performed Upload

Question

I’m developing an ASP.NET Core application. And I was left with some questions, I was able to find some tutorials on how to upload pdf files, but now I need these files to be listed in a table for the user to view later when they want to check something. How can I make this view inside the view or in another view. Thanks in advance!!

Files are being stored inside a folder in the application itself.

This is my index.cshtml view

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>
<br />

<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <div class="row">
            <section>
                <form method="post" enctype="multipart/form-data" asp-controller="Upload" asp-action="EnviarArquivo">
                    <div class="form-group">
                        <div class="col-md-10">
                            <p>Enviar um arquivo :</p>
                            <input type="file" name="arquivos" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10">
                            <p>Enviar um arquivo :</p>
                            <input type="submit" value="Enviar Arquivo" />
                        </div>
                    </div>
                </form>
            </section>
        </div>
    </div>
</div>

My Controller:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace SistemaGR.Controllers
{
    public class UploadController : Controller
    {
        //Define uma instância de IHostingEnvironment
        IHostingEnvironment _appEnvironment;
        //Injeta a instância no construtor para poder usar os recursos
        public UploadController(IHostingEnvironment env)
        {
            _appEnvironment = env;
        }
        //Retorna a View Index.cshtml que será o formulário para
        //selecionar os arquivos a serem enviados 
        public IActionResult Index()
        {
            return View();
        }
        //método para enviar os arquivos usando a interface IFormFile
        public async Task<IActionResult> EnviarArquivo(List<IFormFile> arquivos)
        {
            long tamanhoArquivos = arquivos.Sum(f => f.Length);
            // caminho completo do arquivo na localização temporária
            var caminhoArquivo = Path.GetTempFileName();

            // processa os arquivo enviados
            //percorre a lista de arquivos selecionados
            foreach (var arquivo in arquivos)
            {
                //verifica se existem arquivos 
                if (arquivo == null || arquivo.Length == 0)
                {
                    //retorna a viewdata com erro
                    ViewData["Erro"] = "Error: Arquivo(s) não selecionado(s)";
                    return View(ViewData);
                }
                // < define a pasta onde vamos salvar os arquivos >
                string pasta = "Arquivos_Contrato";
                // Define um nome para o arquivo enviado incluindo o sufixo obtido de milesegundos
                string nomeArquivo = /* "Usuario_arquivo_" +*/ DateTime.Now.Millisecond.ToString();
                //verifica qual o tipo de arquivo : jpg, gif, png, pdf ou tmp
                if (arquivo.FileName.Contains(".jpg"))
                    nomeArquivo += ".jpg";
                else if (arquivo.FileName.Contains(".gif"))
                    nomeArquivo += ".gif";
                else if (arquivo.FileName.Contains(".png"))
                    nomeArquivo += ".png";
                else if (arquivo.FileName.Contains(".pdf"))
                    nomeArquivo += ".pdf";
                else
                    nomeArquivo += ".tmp";
                //< obtém o caminho físico da pasta wwwroot >
                string caminho_WebRoot = _appEnvironment.WebRootPath;
                // monta o caminho onde vamos salvar o arquivo : 
                // ~\wwwroot\Arquivos\Arquivos_Usuario\Recebidos
                string caminhoDestinoArquivo = caminho_WebRoot + "\\Arquivos\\" + pasta + "\\";
                // incluir a pasta Recebidos e o nome do arquivo enviado : 
                // ~\wwwroot\Arquivos\Arquivos_Usuario\Recebidos\
                string caminhoDestinoArquivoOriginal = caminhoDestinoArquivo + "\\Recebidos\\" + nomeArquivo;
                //copia o arquivo para o local de destino original
                using (var stream = new FileStream(caminhoDestinoArquivoOriginal, FileMode.Create))
                {
                    await arquivo.CopyToAsync(stream);
                }
            }
            //monta a ViewData que será exibida na view como resultado do envio 
            ViewData["Resultado"] = $"{arquivos.Count} arquivos foram enviados ao servidor, " +
             $"com tamanho total de : {tamanhoArquivos} bytes";
            //retorna a viewdata
            return View(ViewData);
        }
    }
}

Answer 1

You can use the method onchange input to execute an AJAX request to the server and return a list of the files that were submitted and generate html to list them.
Something like that (with jQuery):

$('#id_do_input').change(function () {
 $.ajax({
        url: 'GetUploadedFiles',
        type: 'GET',
        success: function (result) {
            // Gerar html com novo ficheiro submetido
        },
        error: function (error) {
            console.log(error);
        }
    });
}

And in MVC have a type method:

[HttpGet]
public JsonResult GetUploadedFiles()
{
    // return lista de ficheiros submetidos
}