Uploading Large Files to a Padarn Server

About a year ago I posted some code that showed how to use our Padarn Web Server to serve up large files from a device to a connected client browser. Late last week I got a request for the corollary operation – how do I send large file from a client browser to my Padarn server?  It’s pretty straightforward. First, you need to render a simple page that allows the user to select a file.  For simplicity I’ll show an HTML version, though you could just as easily use jQuery or whatever you like.

protected override void Render(HtmlTextWriter writer)
{
    writer
        .Html()
            .Body()
                .Form(t => t
                    [HtmlTextWriterAttribute.Id, "Form"]
                    // submit back to ourselves
                    ["action", string.Empty]
                    // use a POST method on submit
                    ["method", "post"]
                    // set the POST data mime encoding for a file
                    ["enctype", "multipart/form-data"]
                    )

                    .P()
                        .Text("File:")

                        // render a file input button
                        // this allows the user to browse for a file
                        .Tag(HtmlTextWriterTag.Input, t => t
                            [HtmlTextWriterAttribute.Type, "file"]
                            [HtmlTextWriterAttribute.Size, "80"]
                            [HtmlTextWriterAttribute.Id, "filename"]
                            [HtmlTextWriterAttribute.Name, "filename"])
                        .EndTag() // input

                    .EndTag() // p

                    // render a submit button
                    // when clicked it will send the file
                    .Tag(HtmlTextWriterTag.Input, t => t
                        [HtmlTextWriterAttribute.Type, "submit"]
                        [HtmlTextWriterAttribute.Id, "upload"]
                        [HtmlTextWriterAttribute.Name, "upload"]
                        [HtmlTextWriterAttribute.Value, "Upload File"])
                    .EndTag()

                .EndTag() // form
            .EndTag() // body
        .EndTag(); // html

}

This will get a page that looks like this (yes, it’s a bit ugly without CSS): Now we simply need to handle incoming file data. For simplicity I have the Form above just posting back to itself, so in the same page, in Page_Load, I handle incoming data:

Side Note: WordPress isn’t properly showing my Media Uploads, so if it’s  broken image below, I know about it and am working to resolve it

padarn_upload

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Files.Count > 0)
    {
        // NOTE: You may have to change the config file to allow large 
        // files. The maxRequestLength is in KB, so make sure it is in 
        // line with expectations.
        // For example, this allows up to 300MB files to be uploaded
        //    <httpRuntime
        //      maxRequestLength="300000"
        //      requestLengthDiskThreshold="256"
        //    />

        // this might take a while, set the session.timeout to 120 minutes
        var origTimeout = Session.Timeout;
        Session.Timeout = 120; // 120 minutes;

        string error = "";
        // file upload
        try
        {
            // make sure the target local folder exists
            var path = Path.GetFullPath(".\uploads");
            if(!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }

            // now save off the files
            for(int i = 0 ; i < Request.Files.Count ; i++)
            {
                path = Path.Combine(path, Request.Files[i].FileName);

                Request.Files[i].SaveAs(path);
            }
        }
        catch (Exception ex)
        {
            Debug.WriteLine(ex.Message);
            error = ex.Message;
        }

        // put the timeout back to what it was
        Session.Timeout = origTimeout;
    }
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s