File Upload with jQuery AJAX and Handler (ashx) not working

Question

I'm trying to upload an image file with jQuery AJAX and a generic handler. But it seems that the file isn't being passed to the handler. After submit context.Request.Files[0]; is always null :-/

What am i doing wrong?

HTML:

<form id="form1" runat="server" method="post" enctype="multipart/form-data">

    <input name="file" id="file" type="file" />
    <input id="save" name="submit" value="Submit" type="submit" />

</form>

JS:

$().ready(function ()
{
    $('#file').change(function () 
    {
        sendFile(this.files[0]);
    });
});

function sendFile(file) 
{
    $.ajax({
        type: 'post',
        url: 'FileUpload.ashx',
        data: file,
        success: function () {
            // do something
        },
        xhrFields:
        {
            onprogress: function (progress) 
            {
                // calculate upload progress
                var percentage = Math.floor((progress.total / progress.totalSize) * 100);

                // log upload progress to console
                console.log('progress', percentage);

                if (percentage === 100) {
                    console.log('DONE!');
                }
            }
        },
        processData: false,
        contentType: 'multipart/form-data'
    });
}

ASHX:

public void ProcessRequest (HttpContext context) 
{
    HttpPostedFile file = context.Request.Files[0];

    if (file.ContentLength > 0)
    {
        //do something
    }
}

yes, i have. the handler is being called but no file is loaded :-/ — Ricky
– Ricky, Commented Jun 6, 2013 at 14:11

Ricky · Accepted Answer · 2014-02-12 18:50:41Z

8

Managed to get this working :)

Here's my code...

///create a new FormData object
var formData = new FormData(); //var formData = new FormData($('form')[0]);

///get the file and append it to the FormData object
formData.append('file', $('#file')[0].files[0]);

///AJAX request
$.ajax(
{
    ///server script to process data
    url: "fileupload.ashx", //web service
    type: 'POST',
    complete: function ()
    {
        //on complete event     
    },
    progress: function (evt)
    {
        //progress event    
    },
    ///Ajax events
    beforeSend: function (e) {
        //before event  
    },
    success: function (e) {
        //success event
    },
    error: function (e) {
        //errorHandler
    },
    ///Form data
    data: formData,
    ///Options to tell JQuery not to process data or worry about content-type
    cache: false,
    contentType: false,
    processData: false
});
///end AJAX request

answered Feb 12, 2014 at 18:50

Ricky

3,1228 gold badges54 silver badges80 bronze badges

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

2 Comments

urbanlemur Over a year ago

Thanks for posting this ... it worked awesome for me

JakePlatford Over a year ago

Perfect, other 'solutions' I've found online haven't seemed to work for me but this did.

kobigurk · Accepted Answer · 2013-06-06 18:52:32Z

1

When I implement such a thing, I use

var fd = new FormData();
fd.append(file.name,file);

And in the ajax call, send the fd.

edited Jun 6, 2013 at 18:52

answered Jun 6, 2013 at 13:56

kobigurk

7415 silver badges14 bronze badges

6 Comments

Ricky Over a year ago

after making that change the handler wasn't called, what could be the problem?

kobigurk Over a year ago

possibly a client side error. If you have a live example, that would be great. If not, and you're using chrome/firefox, check the debugger console and let me know what you see there.

Ricky Over a year ago

in the console i get the following error: Uncaught SyntaxError: Not enough arguments i've uploaded the demo so you can give it a try: online demo

kobigurk Over a year ago

I corrected my answer - I mistakenly omitted the first argument, the file name.

Ricky Over a year ago

now i'm getting this error:

POST http://localhost:10081/FileUpload.ashx 500 (Internal Server Error) x.support.cors.e.crossDomain.send  x.extend.ajax  sendFile (anonymous function) x.event.dispatch y.handle

|

Collectives™ on Stack Overflow

File Upload with jQuery AJAX and Handler (ashx) not working

2 Answers 2

2 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related