Get HttpRequest with a Web Method ASP.NET

Question

I have a page web method, and I need to get access to the headers, and particularly the uploaded files. Is this possible? Can a web method receive a file?

If not, what would you recommend to upload files without post back? I am using the jQuery forms library that has support for this (and I have had it working with Django), however, I am having a hard time finding answers on how to do this with ASP.NET.

Answer 1

The one of known good way is using Input tag with type File. Here is part from ASPX page code:

<input type="button" value="upload" onmousemove="mousemove()" class="ClientButton" />
<input type="file" id="uploadfile" class="file" name="uploadfile" runat="server"
    onpropertychange="uploaderChange()">
<asp:Button ID="Upload" runat="server" />

• Upload button uses for overriding styles for non-skinable Input File tag.
• Upload button using for post back file to server.

Simple business logic on javascript to hide default Input File button and use our:

var muploader = '<%=uploadfile.ClientID %>';

function mousemove() {
    var file = document.getElementById(muploader);
    file.style.left = event.x - 15; // argh.. hardcoded due to static button size
    file.style.top = event.y - 35;
}

function uploaderChange() {
    if (event.propertyName == "value") {
        fileName = document.getElementById(muploader).value; // if you need file name on server - you should extract it here
    }
}

and styles ( I do not provide styles for buttons - as in any case yo will use your own ):

input.file
{
    position: absolute;
    height: 20px;
    width: 1px;
    opacity: 0;
    -moz-opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

And C# code ( ASPX page behind code ):

protected override void Upload_Click( object sender, EventArgs e )
{
    BinaryReader reader = new BinaryReader( uploadfile.PostedFile.InputStream );
    var ImageFileContent = reader.ReadBytes( ( int ) uploadfile.PostedFile.InputStream.Length );
    // ...
}

And how it looks in my app:

Note: tested under IE ONLY. There might be required to fix some CSS or javascript code due to another browsers. Let me know plz.

OR

Here is yet one solution but not tested by me.

Answer 2

The jQuery Forms plugin converts a file upload to an iframe based post rather than an ajax post automatically. (This is because XHR doesn't include files.) So you simply need to create a regular aspx page to handle the response. It can simply be empty except for a load event handler. If you need any response you can push it back in the HTML, which can be read from the body that is passed back.

For example, create a file upload that, on change calls this:

function doSubmit() {
      var data = {};
      $("#"+formId).ajaxSubmit({success: gotResponse, data: data});
}

Note that "ajaxSubmit" here is a misnomer. In this case (with a file upload) it is actually a regular post that is made to look like an ajax request. Obviously, formId is the id of the form containing the file upload control.

and the response function is, (for example):

function gotResponse(data) {
            /* Cut out the extraneous stuff */
    result = data.replace(/^.*<div id="infoDiv">/, '')
                         .replace(/<\/div>.*$/,'');
            /* do something with result */

    }

Create an aspx page with a div like this:

In the page load for this page do this:

    protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            // Get the file and do whatever with it.
            var file = Request.Files[0];
            // Put the info to send back as a result here
            InfoDiv.InnerHtml = "{error: false}"; // Or whatever
        }
        catch(Exception e)
        {
            InfoDiv.InnerHtml = "{error: true}"; // Or whatever
        }
    }

HTH