Web API Async Upload with XmlHttpRequest to get progress

Question

I'm trying to drag and drop file upload with a progress bar.

I have a div which is listening to files being dropped on which is working perfectly. I'm then..

//Setting up a XmlHttpRequest 
xhr = new XMLHttpRequest();

//Open connection
xhr.open("post", "api/ImageUpload", true);

// Set appropriate headers
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.setRequestHeader("X-File-Type", uf.type);
xhr.setRequestHeader("X-File-Name", uf.name);
xhr.setRequestHeader("X-File-Size", uf.size);

This sends fine, with the stream as the body of the request to the Web API (not async).

[System.Web.Mvc.HttpPost]
public string Post()
{
    Stream stream =  HttpContext.Current.Request.InputStream;
    String filename = HttpContext.Current.Request.Headers["X-File-Name"];

    FileModel file = uploadService.UploadFile(stream, filename);
    return file.Id.ToString();
 }

I'm trying to chance the request to "public async Task< string> Post(){ }

If the method was using a multipart form on the page instead of XmlHttpRequest I would have used "await Request.Content.ReadAsMultipartAsync(provider)" but this doesn't seem to be populated at the time I need it.

So what is the correct was to handle and an Async call from XmlHttpRequest on a Web API in order to record progress during the request with XHR's progress event?

I have looked at a great deal of pages so far to find a solution but this is the page I have used primarily. http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html

Thanks for any help Oliver

Community · Accepted Answer · 2017-05-23 12:32:52Z

2

It looks like someone else had the same question with you and got an answer yet. please have a look at ASP.NET MVC 4 Web Api ajax file upload. And here is an example from microsoft http://www.asp.net/web-api/overview/working-with-http/sending-html-form-data,-part-2.

I combined the two above solution together and worked for me (just adjust a little bit)

one line change in Javascritp

xhr.open("post", "api/upload", true);
Save the file using stream

public class UploadController : ApiController
{
    public async Task<HttpResponseMessage> PostFormData()
    {
        string root = HttpContext.Current.Server.MapPath("~/App_Data");
        var fileName = Path.Combine(root, Request.Headers.GetValues("X-File-Name").First());
        try
        {
            var writer = new StreamWriter(fileName);
            await Request.Content.CopyToAsync(writer.BaseStream);
            writer.Close();
            return Request.CreateResponse(HttpStatusCode.OK);
        }
        catch (System.Exception e)
        {
            return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
        }
    }
}

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Dec 11, 2013 at 15:08

ivenxu

7195 silver badges19 bronze badges

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

1 Comment

Oli Over a year ago

Thanks for the reply but sadly I had already seen the 2 links.

Collectives™ on Stack Overflow

Web API Async Upload with XmlHttpRequest to get progress

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related