Multiple File Upload using Axios & Vue.JS in ASP.NET Core

Question

I'm trying to upload a multiple files/images using vue.js and axios. My backend is ASP.NET Core. But the problem is, whenever I put breakpoint in my request method, I always get a Count = 0 in my controller.

Here are my simple HTML and my codes:

HTML

<div id="app">
    <form enctype="multipart/form-data">
        <input type="file" name="file" multiple="" v-on:change="fileChange($event.target.files)"/>
        <button type="button" @@click="upload()">Upload</button>
    </form>
</div>

My JS

import axios from "axios"

var app= new Vue({
el: "#app",
data: {
    files: new FormData()
},
methods:{
    fileChange(fileList) {
        this.files.append("file", fileList[0], fileList[0].name);
    },
    upload() {
        const files = this.files;
        axios.post(`/MyController/Upload`, files,
            {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(response => {
                alert(response.data);
            }).catch(error => {
                console.log(error);
            });
    },
}

My Controller

public IActionResult Upload(IList<IFormFile> files)
{
    return Json("Hey");
}

Any help please?

In ASP.NET Core Razor, it's equivalent to @. Just convention for Razor so we use @@ instead of @. But it's working — jsonGPPD
– jsonGPPD, Commented Mar 19, 2018 at 5:11
Try to check the browser network if the request was sent properly with corresponding file data to it. — Dencio
– Dencio, Commented Mar 19, 2018 at 6:01
i am facing the same issue. any luck besides the link in the answer below? — Veer3383
– Veer3383, Commented Jun 22, 2018 at 13:13

wazdev · Accepted Answer · 2021-06-27 22:04:14Z

16

This github repo might be helpful for you ASP.NET Core FileUpload with Vue.JS & Axios

Basically, he used the IFormCollection files instead of IList<IFormFile> files

edited Jun 27, 2021 at 22:04

wazdev

3534 silver badges12 bronze badges

answered Apr 10, 2018 at 14:47

mark333...333...333

1,3601 gold badge11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tab Over a year ago

and after much head banging, the small difference in the params works perfectly, thanks, wish I had found this 4 hours ago

bcnzer · Accepted Answer · 2018-04-08 09:59:54Z

I had the same problem. The fix for me was instead to look at the request. You'll see there's a Form property and in there is your file(s). Here's a code snippet that worked for me.

And to give credit where credit is due: I found the answer on this blog post. It's about Angular and the code snippet is from there.

[HttpPost]
public IActionResult UploadLogo()
{
    try
    {
        var file = Request.Form.Files[0];
        string folderName = "Upload";
        string webRootPath = _hostingEnvironment.WebRootPath;
        string newPath = Path.Combine(webRootPath, folderName);
        if (!Directory.Exists(newPath))
        {
            Directory.CreateDirectory(newPath);
        }
        if (file.Length > 0)
        {
            string fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
            string fullPath = Path.Combine(newPath, fileName);
            using (var stream = new FileStream(fullPath, FileMode.Create))
            {
                file.CopyTo(stream);
            }
        }
        return Json("Upload Successful");
    }
    catch (System.Exception ex)
    {
        return Json("Upload Failed: " + ex.Message);
    }
}

Collectives™ on Stack Overflow

Multiple File Upload using Axios & Vue.JS in ASP.NET Core

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related