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">
Code:
<%@ 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">
Code:
<%@ 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
Code:
<%@ 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)
Code:
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)
Code:
@{
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
Code:
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
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??
