CleanCode NZ

In another blog, I talked about how to upload file asynchronously, using ExtJS FileUploadField control together with FormPanel.

A recap of file upload, I used a formpanel and set fileUpload to true, this basically tells the formpanel to do a series of hard work behind scenes like creating frame and form, in this blog, I am going to show you how to do those heavy lifting myself without the help of a formpanel, even the example here is about file download, but you can use the same code to do file upload too as an option of not using formpanel.

Client side code

 Ext.onReady(function () {
          //download example

            var btn = new Ext.Button({
                renderTo: 'div2',
                text: 'Download',
                handler: function () {
                    DownloadFile('file1.txt');
                }

            });


            function DownloadFile(filename) {
                var body = Ext.getBody();

                // create a hiddle frame
                var frame = body.createChild({
                    tag: 'iframe',
                    cls: 'x-hidden',
                    id: 'iframe',
                    name: 'iframe'
                });

                //create hidden form with download as action

                var form = body.createChild({
                    tag: 'form',
                    cls: 'x-hidden',
                    id: 'form',
                    action: 'Download.aspx',
                    target: 'iframe'
                });

                // to set the parameter through a hidden field
                var inputpara = form.createChild({
                    tag: 'input',
                    type: 'hidden',
                    name: 'filename', // parameter name
                    value: filename  // parameter value
                });

                // submit the form to initiate the downloading
                form.dom.submit();

            }


        });

Server side Download.aspx.cs

public partial class Download : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        HttpContext context = HttpContext.Current;

        string filename = context.Request.QueryString["filename"]; 
        if (!string.IsNullOrEmpty(filename))
        {
            // Create download stream, here is an example of text file
            context.Response.Clear();
            context.Response.ContentType = "text/plain";
            
            Context.Response.AddHeader("Content-disposition", "attachment; filename="+filename);

            StreamWriter writer = new StreamWriter(context.Response.OutputStream);

            writer.WriteLine("This is the first line from server");

            writer.WriteLine("This is the second line from server");

            writer.WriteLine("End of text from server");

            writer.Close();
        
            context.Response.End();
        }
    }
}

The code is very simple, a couple of points:
1. Download.aspx only used as a service, so html mark up does not matter here.
2. The file name does not have to be a real file, but just as an identification of file
3. Server example is about a text file download, it is easy to replace it with other streams you may want, at the same time to change ContentType accordingly.
4. You might think that if we can attach the filename in the url as a parameter to server and save the hassle of creating inputpara? the answer is no, when a form is submitted query string in the action url is ignored, and fields in the form are attached through query string and post to server.

Update[24/03/2012]
The original example given is a form with ‘GET’, while normally form method should be ‘POST’, to set method to ‘POST’

//create hidden form with download as action

var form = body.createChild({
   tag: 'form',
   cls: 'x-hidden',
   id: 'form',
   method: 'POST',
   action: 'Download.aspx',
   target: 'iframe'
 });

Tags: ExtJS