Geeks With Blogs
Łukasz Kuryło's blog
In this short article I would like to show how to upload an image file to the server using Ext JS library and ASP.NET MVC.



First step is create a new ASP.NET MVC project and add to him the Ext JS library. I have written here how to do it.
We will use a user extension called Ext.ux.form.FileUploadField to upload a file. It is not included in the library, so add to project these files:

       - FileUploadField.js
       - FileUploadField.css

Now let’s add a new form with the fileuploadfield field

        Ext.onReady(function()

        {

            var form = new Ext.FormPanel({

                renderTo: 'fi-form', //(5)

                fileUpload: true, //(1)

                width: 400,

                frame: true,

                title: 'File Upload',

                bodyStyle: 'padding: 10px 10px 0 10px;',

                labelWidth: 50,

                items: [{

                    xtype: 'fileuploadfield',

                    emptyText: 'Select an image',

                    fieldLabel: 'Image',

                    name: 'file', //(2)

                    buttonText: 'Choose a file'

}],

                    buttons: [{

                        text: 'Save',

                        handler: function()

                        {

                            if (form.getForm().isValid())

                            {

                                form.getForm().submit({

                                    url: 'Home/Upload',

                                    waitMsg: 'Uploading your photo...',

                                    success: function(form, o) //(3)

                                    {

                                        Ext.Msg.show({

                                            title: 'Result',

                                            msg: o.result.result,

                                            buttons: Ext.Msg.OK,

                                            icon: Ext.Msg.INFO

                                        });

                                    },

                                    failure: function(form, o) //(4)

                                    {

                                        Ext.Msg.show({

                                            title: 'Result',

                                            msg: o.result.error,

                                            buttons: Ext.Msg.OK,

                                            icon: Ext.Msg.ERROR

                                        });

                                    }

                                });

                            }

                        }

}]

                    });

                });


      (1) As you can see form must have fileUpload property set to true.
      (2) This name we use in our upload action in the controller to take the data from user
      (3), (4) Result from submitting the form to the server. One from success, second from failure.
      (5) Form will be render in the div with specific id. Remember to add this div with id manually in the master page or in view page.

That’s all what is related to Ext JS.

Now in the Home controller (for example) create an Upload action with code like below

       [AcceptVerbs(HttpVerbs.Post)]

        public ActionResult Upload()

        {

            string[] supportedTypes = new string[]{

                "png", "gif", "tiff", "bmp", "jpg", "jpeg" //(1)

            };

 

            HttpPostedFileBase postedFile = Request.Files["file"];

            if (postedFile != null) //(2)

            {

                string x = Path.GetExtension(postedFile.FileName);

 

                if (supportedTypes.Contains(x.TrimStart('.'))) //(3)

                {

                    //to do sth with the file

                    return Content("{success:true, result:\"File uploaded correctly\"}"); //(4)

                }

                else //(5)

                {

                    //unsupported file type

                    return Content("{success:false, error:\"Unsupported file type\"}");

                }

            }

 

            return new JsonResult() //(6)

            {

                ContentType = "text/html",

                Data = new { success = false, error = "File uploaded error" }

            };

        }


(1) This uploader form is intended only to upload an image files.
(2) If the file has been posted to the server, check to see if the extension of posted file is in the array of acceptable extensions. If so, return a JSON string from the action (3) with success value set to true, else return with string with success set to false (5).

Notice that, the returned JSON string must have content type set to text/html. We can achieve that using a ContentResult or a JsonResult with ContentType set manually to text/html. If the result won’t be returned as a html, the web browser will want to download a file with this result.

Full source code is available here (click the blue button called 'Pobierz plik').

Summary

In this article I wanted to show how easy is to upload a file with specific extension to the server using Ext and MVC framework. FileUploadField it is only one possibility to upload a file to the server in Ext JS. This add-in can upload only one file at time. If you want to upload multiple files at time, let’s look at the UploadForm in the Ext JS wiki here. Posted on Saturday, September 5, 2009 2:11 PM ASP.NET MVC , Ext JS | Back to top


Comments on this post: How to upload a file using Ext JS to the ASP.NET MVC page

# re: How to upload a file using Ext JS to the ASP.NET MVC page
Requesting Gravatar...
Pure sample… excellent
Left by J.Saravanan on Oct 05, 2009 2:33 PM

# re: How to upload a file using Ext JS to the ASP.NET MVC page
Requesting Gravatar...
i can't donwload the sample file
Left by I.Abu Hilal on Nov 12, 2009 4:43 PM

# re: How to upload a file using Ext JS to the ASP.NET MVC page
Requesting Gravatar...
Hi. Link corrected.
Left by Łukasz Kuryło on Nov 13, 2009 12:33 AM

# re: How to upload a file using Ext JS to the ASP.NET MVC page
Requesting Gravatar...
Hi! I've tested out the sample and tried to implement it to my solution, but i can't see where you save the file and postedFile.saveAs("string to path") just makes all crash. Can you please help me?

phrenetix
Left by phrenetix on May 10, 2010 6:40 PM

Comments have been closed on this topic.
Copyright © Łukasz Kuryło | Powered by: GeeksWithBlogs.net