Click here to Skip to main content
15,126,317 members
Articles / Web Development / ASP.NET / ASP.NETvNext
Tip/Trick
Posted 15 Oct 2015

Tagged as

Stats

15.3K views
2 bookmarked

Ajax File Upload with ASP.NET5

Rate me:
Please Sign up or sign in to vote.
4.00/5 (4 votes)
15 Oct 2015MIT1 min read
Ajax file upload with ASP.NET 5

This post is about uploading files to ASP.NET 5 web application using HTML5 file API. Most of the HTML5 File upload examples are using the “HttpContext.Current.Request.Files” which is not implemented in the ASP.NET5. The alternative is to use IFormFile, it is working fine, if you are using the normal Form - File upload combination. But in case of Ajax file upload, it is not working. Later, I found a SO post, which talks about File upload in ASP.NET5. It is mentioned like you need to read the body contents and save it using file stream. But when I did that, it was also not working. Later, I found that the body contains the filename and content type information as well like this.

File upload Request body

Since I have the content type and file name, saving the file stream as file won’t create a valid image file. You need a parser to parse the contents. Initially, I thought of implementing one, but later I found one which is already available in CodePlex - Multipart Form Data Parser. Using this, you can parse the body and get the file name, content type and file contents.

Here is the complete code.

HTML Form

XML
<form id="UploadForm" 
asp-action="upload" asp-controller="home">
<input class="form-control" type="file" 
name="UploadFile" id="UploadFile" accept="image/*" />
<input type="submit" value="Submit" 
class="btn btn-default" />   
</form>

And here is the script, which handles the Ajax file upload.

JavaScript
$("#UploadForm").submit(function (e) {
     var data = new FormData();
     var selectedFiles = $("#UploadFile")[0].files;
     data.append(selectedFiles[0].name, selectedFiles[0]);
 
     $.ajax({
         type: "POST",
         url: "/home/Upload",
         contentType: false,
         processData: false,
         data: data,
         success: function (result) {
             alert(result);
         },
         error: function () {
             alert("There was error uploading files!");
         }
     });
 
     e.preventDefault();
});

And here is the controller code.

C#
[HttpPost]
public IActionResult Upload()
{
    MultipartParser multipartParser = 
        new MultipartParser(new StreamReader(Request.Body).BaseStream);
    if(multipartParser.Success)
    {
        var bytes = multipartParser.FileContents;
    }
    
    return Json("Uploaded");
}

Hope it helps. Happy programming.

License

This article, along with any associated source code and files, is licensed under The MIT License

Share

About the Author

Anuraj Parameswaran
Technical Lead
India India
Working as Tech. Lead

My blog : dotnetthoughts.net.
You can follow me in twitter : @anuraj

Comments and Discussions

 
QuestionWhere is the file saved? Pin
BeMyCode6-Dec-15 15:44
MemberBeMyCode6-Dec-15 15:44 
QuestionNeed some explanation Pin
Tridip Bhattacharjee19-Oct-15 0:26
professionalTridip Bhattacharjee19-Oct-15 0:26 
SuggestionWrong type Pin
Afzaal Ahmad Zeeshan17-Oct-15 6:48
mveAfzaal Ahmad Zeeshan17-Oct-15 6:48 
QuestionCode snippets Pin
Nelek15-Oct-15 5:35
protectorNelek15-Oct-15 5:35 
AnswerRe: Code snippets Pin
Anuraj Parameswaran15-Oct-15 7:52
MemberAnuraj Parameswaran15-Oct-15 7:52 
GeneralRe: Code snippets Pin
Nelek15-Oct-15 12:27
protectorNelek15-Oct-15 12:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.