In POST method IFormFile parameter is null

user_14699159 0
Viewed 56

I'm trying to realize file uploading to server. I have a form on my html page:

<form name="addForm" asp-action="PostMusic" enctype="multipart/form-data" method="post">
<label for="songName">Song name: </label>
<input type="text" name="songName" />
<label for="artistName">Artist name: </label>
<input type="text" name="artistName" />
<label for="albumName">Album name: </label>
<input type="text" name="albumName" />
<input type="file" name="soundFile" id="soundFile" value="Music file"/>
<input type="file" name="imageFile" id="imageFile" value="Image file"/>
<label for="videoLink">Video link (YouTube): </label>
<input type="url" name="videoLink" />
<label for="categories">Category: </label>
<select name="categories" id="categorySelect">
    <option value="all">All</option>
    <option value="autorSongs">Author Song</option>
    <option value="blues">Blues</option>
    <option value="jass">Jass</option>
    <option value="country">Country</option>
    <option value="classic">Classic</option>
    <option value="latinAmerican">Latin American</option>
    <option value="metal">Metal</option>
    <option value="pop">Pop</option>
    <option value="reggi">Reggi</option>
    <option value="rhytmNBlues">Rhytm-n-Blues</option>
    <option value="rock">Rock</option>
    <option value="rap">Rap</option>
    <option value="folk">Folk</option>
    <option value="hipHop">Hip-Hop</option>
    <option value="electroMusic">Electro</option>
</select>
<input type="button" name="addMusicBtn" value="Add"/>
.js file in which I send the data: 
var soundFileName = $('#soundFile').get(0).files[0].name;
var soundFile = $('#soundFile').get(0).files[0];
var soundFormData = new FormData();
soundFormData.append(soundFileName, soundFile);
await fetch("../App/music/sound", { method: 'POST', body: soundFormData });

and POST method in my controller:

[HttpPost("sound")]
public void PostMusic([FromForm(Name ="addForm")]IFormFile sound)
{
    string path = "../Musics";
    string fileName = Path.GetFileName(sound.FileName);
    using(FileStream stream = new FileStream(Path.Combine(path, fileName), FileMode.Create))
    {
        sound.CopyTo(stream);
    }
}

While sending the file, in JS file is sending, but in PostMusic method field IFormFile sound is null. Thanks in advance for any help.

asp.net-core-webapi asp.net-web-api javascript c#
1 Answers

If you want to get IFormFile sound,one way is only use form submission.

Below is a demo.

View:

<form name="addForm" asp-action="PostMusic" enctype="multipart/form-data" method="post">
<input type="file" name="soundFile" id="soundFile" value="Music file" />
 //...
<input type="submit" value="Add" />
</form>

Action:

[HttpPost]
public void PostMusic(IFormFile soundFile)
{
    //...
}

Result: enter image description here

If you don't want to use form submission and use fetch, you can do as follows.

View:

<form name="addForm">
<input type="file" name="soundFile" id="soundFile" value="Music file" />
//...
<input type="button" id="test" value="click" />
</form>
@section Scripts
{
<script>

    $("#test").click(function(){
        var soundFile = $('#soundFile').get(0).files[0];
        var soundFormData = new FormData();
        soundFormData.append("soundFile", soundFile);
        fetch("/music/PostMusic",
            {
                method: "POST",
                body: soundFormData
            })
    });
</script>
 }

Action:

[HttpPost]
public void PostMusic(IFormFile soundFile)
{
    //...
}

Test result: enter image description here

user_139730370
Related