ASP.NET MVC 3 file upload via JSON model

Question

My web application interacts with the server-side (ASP.NET MVC 3) by posting JSON data to certain URLs (without using html forms).

How can I post file to the server and bind it to HttpPostedFileBase using JSON and without using multipart forms?

Thanks!

As far as I'm aware you can't HTTP won't allow you to post files unless you use multipart forms. — Liam
– Liam, Commented Sep 19, 2012 at 9:50
I can post the file as a binary string as one of the models properties... — Dmitrii
– Dmitrii, Commented Sep 19, 2012 at 9:55
How do you access the file? How do you turn the file into binary? JavaScript has no local file access. — Liam
– Liam, Commented Sep 19, 2012 at 10:28

It's actually me · Accepted Answer · 2012-09-19 12:19:08Z

2

I have done this but did not use the HttpPostedFileBase to get the content from the MVC app. I simply used JSON.

You can simply use the FileReader.onload (on HTML5) method to extract the file content and post as a Base64 string directly to the MVC controller. The #upload-button is an <input type=file ...> tag.

    var file = $('#upload-button')[0].files[0];
    var reader = new FileReader();
    reader.onload = (function (f) {
        return function (e) {
            if (e.target.readyState == FileReader.DONE) {
                $.ajax("FileStore/SavePicture", {
                    data: { content: e.target.result, name: f.name },
                    type: "post",
                    contentType: "application/json"
                });
            }
        };
    })(file)

From there you can use Convert.FromBase64String method to conver to a byte[]. This is how the Action content look like;

    string base64String = content;
    // Get the starting point of the actual content from the base64String.
    int start = base64String.IndexOf(",") + 1;
    int length = base64String.Length - start;
    contentAsString = base64String.Substring(start, length);

    byte[] dataAsBytes = Convert.FromBase64String(contentAsString);

There might be some other ways of doing this.

edited Sep 19, 2012 at 12:19

answered Sep 19, 2012 at 12:13

It's actually me

5022 silver badges9 bronze badges

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

2 Comments

Dmitrii Over a year ago

Yes, I did that but there is another problem. In fact, I'm using JavaScriptSerializer to deserialize the JSON and base64 string is not deserialized automatically to HttpPostedFileBase property.Perhaps, there is any attribute which could be applied to the HttpPostedFileBase property of the model so that I could customize deserialization process for this certain property?

It's actually me Over a year ago

Yes, didn't work for me either. So I used this approach instead as a work-around solution.

Community · Accepted Answer · 2017-05-23 11:49:08Z

0

It could be done, but you will have cross-browser problems, more details you can find here: How can I upload files asynchronously with jQuery? OR just google "ajax file upload"

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Sep 19, 2012 at 9:54

webdeveloper

17.3k3 gold badges51 silver badges47 bronze badges

2 Comments

Liam Over a year ago

IE is what, 70% market share, if it's not supported by IE, what's the point?

webdeveloper Over a year ago

@Liam Everything depends on project, also he could check for support, if not make normal submit.

Collectives™ on Stack Overflow

ASP.NET MVC 3 file upload via JSON model

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related