File upload with ajax in asp.net mvc

Question

I know this has been discussed a lot of times.

I basically want the possibility in my view to update a file. This file has to be mapped to the model the controller expects:

public ActionResult Create(Company company)
{
    //Do something with the received model
}

The model:

public class Company
{
    public int Id { get; set; }
    public HttpPostedFileBase PictureUpload { get; set; }
    ...
}

This is working without any problems. Now I'd like to send my form data, including the file, via AJAX. Therefore I'm using this in my view:

@using (Ajax.BeginForm("Create", "Company", null, new AjaxOptions { HttpMethod = "Post", OnSuccess = "ajaxOnSuccess", OnFailure = "alert('Error message.');" }, new { @class = "ym-form", enctype = "multipart/form-data" }))

This is basically working but the file upload doesn't work (as far as I read ajax doesn't have access to the file so it can't be sent).

I'd like what's the best solution for this problem without having to modify my backend (controller/model).

E. g. I read this article: http://ajeeshms.in/Blog/Article/1/upload-files-using-ajax-in-asp-mvc

It provides two nice possibilities but I'd have to modify the backend because as far as I see the automatically mapping to the HttpPostedFileBase type in my model wouldn't be possible anymore.

I don't mind using any working plugin for my view or using a technique which is supported by new browsers only.

Have a look at my accepted answer : stackoverflow.com/questions/18440220/… — Jatin patil
– Jatin patil, Commented Sep 16, 2013 at 17:03

Ever · Accepted Answer · 2013-12-24 18:02:56Z

1

Try this code

//Add reference to form.js

<script src="http://malsup.github.com/jquery.form.js"></script>

@using (Html.BeginForm("Create", "Company", FormMethod.Post, new { @enctype ="multipart/form-data",@id="formid" }))
{

}

//Javascript code

<script type="text/javascript">

$('#formid').ajaxForm(function (data) {

});

</script>

This will work as ajax submit.

//You can get more details on AjaxForm here

edited Dec 24, 2013 at 18:02

Ever

1,1841 gold badge9 silver badges13 bronze badges

answered Sep 16, 2013 at 15:53

Champ

1182 silver badges6 bronze badges

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

Comments

Sudha · Accepted Answer · 2013-04-10 12:18:49Z

0

Please try this one @using (Html.BeginForm("Create", "Company", FormMethod.Post, new { id = "ym-form", enctype="multipart/form-data" }))

answered Apr 10, 2013 at 12:18

Sudha

2,1266 gold badges28 silver badges53 bronze badges

1 Comment

Sudha Over a year ago

You can try <% using (Ajax.BeginForm("Create","Company", new AjaxOptions() { HttpMethod = "POST", InsertionMode = InsertionMode.Replace }, new { enctype = "multipart/form-data" })) {%> <input type="file" /><input type ="submit" value="Submit File"/> <% } %>

Community · Accepted Answer · 2017-05-23 12:18:54Z

0

I have made it based on this answer from Demian Flavius: How to do a ASP.NET MVC Ajax form post with multipart/form-data?

Basically it's the new JavaScript's FormData object that makes it easy for uploading with ajax as in the article your mentioned.

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Apr 11, 2013 at 11:06

Panos

6374 silver badges11 bronze badges

Comments

Sudha · Accepted Answer · 2013-04-11 10:15:56Z

-1

I think you cannot upload files with AJAX. One way to achieve this is to use a hidden iframe. Try this jQuery Form plugin and Telerik file control

Please refer this link also.

edited Apr 11, 2013 at 10:15

answered Apr 11, 2013 at 9:30

Sudha

2,1266 gold badges28 silver badges53 bronze badges

Collectives™ on Stack Overflow

File upload with ajax in asp.net mvc

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related