2 votes

Uploading files using VueJS, Axios and .NET CORE

I am having problems with uploading files using axios and ASP.Net Core. I don't know if the problem is in my frontend UploadFiles function or the problem is in the controller. I show you how my code looks like:

Axios

Function to make the request to the backend:

SubirArchivos(){              

            let formData = new FormData();

            for( var i = 0; i < this.files.length; i++ ){
            let file = this.files[i];

            formData.append('files[' + i + ']', file);
            }

            axios.post( 'api/Documentos/UploadFiles',
            formData,
            {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
            ).then(function(){
            console.log('Correcto!');
            })
            .catch(function(){
            console.log('Error!');
            });
        }

c#

This is in my controller:

[HttpPost("UploadFiles")]
    public async Task<IActionResult> Post(List<IFormFile> files)
    {
        long size = files.Sum(f => f.Length);

        var filePath = Path.GetTempFileName();

        foreach (var formFile in files)
        {
            if (formFile.Length > 0)
            {
                using (var stream = new FileStream(filePath, FileMode.Create))
                {
                    await formFile.CopyToAsync(stream);
                }
            }
        }

        return Ok(new { count = files.Count, size, filePath });
    }

The problem that I have I think that it is in the backend, because at the time of going through the list "files" it does not contain any file.

I am referring to these two links

0 votes

Your question is very well formulated. You could read the tour to let you know how we work?

1voto

Resparza03 Points 21

After some searching, I found this and it worked for me.

Use in the controller IFormCollection instead of List<IFormFile> I leave you the code block:

    [HttpPost("[action]")]        
    public async Task<IActionResult> SubirArchivos(IFormCollection UploadedFiles)
    {
        long size = UploadedFiles.Files.Sum(f => f.Length);
        string ruta = Path.Combine(_env.ContentRootPath, "Uploads\\XML");           

        foreach (var formFile in UploadedFiles.Files)
        {
            if (formFile.Length > 0)
            {
                string fileName = formFile.FileName;
                string fullPath = Path.Combine(ruta, fileName);
                using (var stream = new FileStream(fullPath, FileMode.Create))
                {
                    await formFile.CopyToAsync(stream);
                }
            }
        }

        return Ok(new { archivos = UploadedFiles.Files.Count, size, ruta });
    }

I changed my function a bit to be able to upload the files to a folder on my server.

1 votes

Before saving, verify that the file does not exist to save it, because if you have the same file name, it will be overwritten...

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X