Upload File using DirectEvent

  1. #1

    Upload File using DirectEvent

    To upload a file you should configure a DirectEvent with IsUpload="true".

    In some cases, Ext.NET can determine automatically that a DirectEvent should be treated as an upload request, but it is better just to always set up IsUpload="true" explicitly for reliability.

    Also a field which contains a file (it could be a FileUploadField or a native HTML input element with type="file") must be inside a form. Also a DirectEvent should submit that form, i.e. it should be able to find a form up to the hierarchy starting from the control which holds the DirectEvent, or there should be an explicit FormID setting. If there is no file in Post, it probably means that a DirectEvent doesn't submit a form which holds a file field. Though, also check IsUpload="true" exists.

    Then, on the server side, you can get a file from a FileUploadField's PostedFile or Request.Files.

    As for the server side, there are, at least, three common destinations: a page, not a page (WebService or HTTP handler, for example) or a Controller's action in MVC.

    Here is some examples.

    Upload in WebForms with <form runat="server">
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Upload(object sender, DirectEventArgs e)
        {
            HttpPostedFile file = this.FileUploadField1.PostedFile; // or this.Request.Files[0]
            string fileName = file.FileName;
            string path = Server.MapPath(null) + "\\" + fileName;
    
            file.SaveAs(path);
            X.Msg.Alert("Uploaded", string.Format("The file '{0}' has been successfully uploaded.", fileName)).Show();
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET WebForms Upload Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:FileUploadField ID="FileUploadField1" runat="server" />
    
            <ext:Button runat="server" Text="Upload">
                <DirectEvents>
                    <Click OnEvent="Upload" IsUpload="true" />
                </DirectEvents>
            </ext:Button>
        </form>
    </body>
    </html>
    Upload in WebForms without <form runat="server">
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Upload(object sender, DirectEventArgs e)
        {
            HttpPostedFile file = this.FileUploadField1.PostedFile; // or this.Request.Files[0]
            string fileName = file.FileName;
            string path = Server.MapPath(null) + "\\" + fileName;
    
            file.SaveAs(path);
            X.Msg.Alert("Uploaded", string.Format("The file '{0}' has been successfully uploaded.", fileName)).Show();
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET WebForms Upload Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <form id="form1">
            <ext:FileUploadField ID="FileUploadField1" runat="server" />
        </form>
    
        <ext:Button runat="server" Text="Upload">
            <DirectEvents>
                <Click OnEvent="Upload" IsUpload="true" FormID="form1" />
            </DirectEvents>
        </ext:Button>
    </body>
    </html>
    Upload in WebForms to an HTTP handler (ashx)

    Page
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET WebForms Upload Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <form id="form1">
            <ext:FileUploadField ID="FileUploadField1" runat="server" />
        </form>
    
        <ext:Button runat="server" Text="Upload">
            <DirectEvents>
                <Click Url="UploadHandler.ashx" IsUpload="true" FormID="form1" />
            </DirectEvents>
        </ext:Button>
    </body>
    </html>
    HTTP handler (ashx)
    using System.Web;
    using Ext.Net;
    
    namespace Work2
    {
        public class UploadHandler : IHttpHandler
        {
            public void ProcessRequest(HttpContext context)
            {            
                FileUploadField fileUploadField = X.GetCmp<FileUploadField>("FileUploadField1");
                HttpPostedFile file = fileUploadField.PostedFile; // or context.Request.Files[0]
                string fileName = file.FileName;
                string path = context.Server.MapPath(null) + "\\" + fileName;
    
                file.SaveAs(path);
                X.Msg.Alert("Uploaded", string.Format("The file '{0}' has been successfully uploaded.", fileName)).Show();
    
                DirectResponse r = new DirectResponse();
                r.IsUpload = true; // this is an essential part
    
                r.Return();
            }
    
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    }
    Upload in MVC

    View (Razor)
    @{
        var X = Html.X(); 
    }
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>Ext.Net.MVC Upload Example</title>  
    </head>
    <body>
        @X.ResourceManager()
    
        <form id="form1">
            @X.FileUploadField().ID("FileUploadField1")
        </form>
    
        @(X.Button()
            .Text("Upload")
            .DirectEvents(events => 
                {
                    events.Click.Url = Url.Action("Upload");
                    events.Click.IsUpload = true;
                    events.Click.FormID = "form1";
                }
            )
        )
    </body>
    </html>
    Controller
    using System.Web;
    using System.Web.Mvc;
    using Ext.Net;
    using Ext.Net.MVC;
    
    namespace Work2MVC.Controllers
    {
        public class RazorController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult Upload()
            {
                FileUploadField fileUploadField = X.GetCmp<FileUploadField>("FileUploadField1");
                HttpPostedFile file = fileUploadField.PostedFile; // or: HttpPostedFileBase file = this.HttpContext.Request.Files[0];
                string fileName = file.FileName;
                string path = this.HttpContext.Server.MapPath("~") + "\\" + fileName;
    
                file.SaveAs(path);
                X.Msg.Alert("Uploaded", string.Format("The file '{0}' has been successfully uploaded.", fileName)).Show();
    
                DirectResult r = new DirectResult();
                r.IsUpload = true; // this is an essential part
    
                return r;
            }
        }
    }
    To know a bit more about the background of uploading, please read this.

    Also, as an alternative, you might be interested to look at our MultiUpload control which utilizes the Flash technology for uploading.

    Helpful Links:

    - FieldUploadField's ClearOnSubmit property
    - Upload via DirectMethod
    - FileUploadField inside a Window scenario
    Last edited by Daniil; Feb 20, 2015 at 12:10 PM.
  2. #2

    get error while uploading zip file

    Hi @Daniil,
    Your code is working except for .Zip file. When i try to upload .Zip it returned '{success:false,message:"Blocked a frame with origin "http://localhost:64913" from accessing a cross-origin frame."}'. Any help??
  3. #3
    Hi @aditya,

    This might be helpful to read.
    http://stackoverflow.com/questions/1...d-a-frame-with

Similar Threads

  1. [CLOSED] multiple file upload and file size at client side
    By mirwais in forum 1.x Premium Help
    Replies: 24
    Last Post: Dec 15, 2014, 6:44 AM
  2. Replies: 8
    Last Post: Jun 10, 2013, 2:06 PM
  3. Replies: 1
    Last Post: Mar 15, 2013, 2:38 AM
  4. [CLOSED] Multiple file support to upload in file upload control
    By legaldiscovery in forum 1.x Premium Help
    Replies: 1
    Last Post: Feb 01, 2013, 10:41 AM
  5. Replies: 1
    Last Post: Jun 23, 2011, 10:37 AM

Tags for this Thread

Posting Permissions