File Upload using Twitter Bootstrap, C#, asp.net and javascript

Question

link to Jasny http://jasny.github.com/bootstrap/javascript.html#fileupload

link to what the form looks like http://img507.imageshack.us/img507/3308/picpx.png

Answer 1

Since you want to do this without a standard asp.net control, you will have to do some of the wiring that asp.net does for you.

Make sure your input has an id. I will set it here to myFile.

<div class="row-fluid">
    <div class="fileupload fileupload-new" data-provides="fileupload"><input type="hidden">
        <div class="input-append">
            <div class="uneditable-input span2" runat="server" id="statment1">
                <i class="icon-file fileupload-exists"></i> 
                <span class="fileupload-preview" style=""></span>
            </div>
            <span class="btn btn-file"><span class="fileupload-new">Select file</span>
            <span class="fileupload-exists">Change</span><input id="myFile" type="file" runat="server">
            </span>
            <a href="#" class="btn fileupload-exists" data-dismiss="fileupload" >Remove</a>
        </div>
    </div>
</div>

Your page should now have a HtmlInputFile control to your page. like this:

protected HtmlInputFile myFile;

Then you should be able to receive the file:

if (IsPostBack)
{
    if (myFile.PostedFile != null)
    {
        // File was sent
        var postedFile = myFile.PostedFile;
        int dataLength = postedFile.ContentLength;
        byte[] myData = new byte[dataLength];
        postedFile.InputStream.Read(myData, 0, dataLength);
    }
    else
    {
        // No file was sent

    }
}