How to upload a file in the ASP.NET MVC Uploader?
This article explains about Syncfusion EJ2 ASP.NET MVC Uploader control Application.
Getting started
To render the Syncfusion component, please follow the steps given in the getting started documentation.
The Uploader control will be rendered by using the “EJS().Uploader()” razor syntax as mentioned in the following code example.
@{
var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save", RemoveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove" };
}
@Html.EJS().Uploader("UploadFiles").AutoUpload(false).AsyncSettings(asyncSettings).Render()
You can configure the Save and Remove handlers in the controller part as described below.
Save action
The save action handler upload the files that needs to be specified in the SaveUrl property. The save handler receives the submitted files and manages the save process in the server.
To save the file in the root directory, you need to create the new folder as “Home/UploadedFiles” under the root directory of the application. You can see the uploaded files in the “Application_root_directory/Home/UploadedFiles” folder.
[index.cshtml]
@Html.EJS().Uploader("UploadFiles").AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "http://localhost:64433/Home/Save", RemoveUrl = "http://localhost:64433/Home/Remove" }).AutoUpload(false).Render()
[HomeController.cs]
[AcceptVerbs("Post")]
public void Save()
{
var file = HttpContext.Request.Form["File"];
try
{
var httpPostedFile = System.Web.HttpContext.Current.Request.Files["UploadFiles"];
if (httpPostedFile != null)
{
var fileSave = System.Web.HttpContext.Current.Server.MapPath("UploadedFiles");
var fileSavePath = Path.Combine(fileSave, httpPostedFile.FileName); // get the file path
if (!System.IO.File.Exists(fileSavePath))
{
httpPostedFile.SaveAs(fileSavePath); // save the file in the provided path
HttpResponse Response = System.Web.HttpContext.Current.Response;
Response.Clear();
Response.ContentType = "application/json; charset=utf-8";
Response.StatusDescription = "File uploaded succesfully";
Response.End();
}
else
{
HttpResponse Response = System.Web.HttpContext.Current.Response;
Response.Clear();
Response.Status = "204 File already exists";
Response.StatusCode = 204;
Response.StatusDescription = "File already exists";
Response.End();
}
}
}
catch (Exception e)
{
HttpResponse Response = System.Web.HttpContext.Current.Response;
Response.Clear();
Response.ContentType = "application/json; charset=utf-8";
Response.StatusCode = 204;
Response.Status = "204 No Content";
Response.StatusDescription = e.Message;
Response.End();
}
}
Remove action
The remove action is optional. Specify the URL to handle remove process from the server. The remove handler receives the posted files and handles the remove operation in the server.
[HomeController.cs]
[AcceptVerbs("Post")]
public void Remove()
{
try
{
var httpPostedFile = System.Web.HttpContext.Current.Request.Files["UploadFiles"];
var fileSave = System.Web.HttpContext.Current.Server.MapPath("UploadedFiles");
var fileSavePath = Path.Combine(fileSave, httpPostedFile.FileName);
if (System.IO.File.Exists(fileSavePath))
{
System.IO.File.Delete(fileSavePath); // removed the uploaded file from the saved area
}
HttpResponse Response = System.Web.HttpContext.Current.Response;
Response.Clear();
Response.Status = "200 OK";
Response.StatusCode = 200;
Response.ContentType = "application/json; charset=utf-8";
Response.StatusDescription = "File removed succesfully";
Response.End();
}
catch (Exception e)
{
HttpResponse Response = System.Web.HttpContext.Current.Response;
Response.Clear();
Response.Status = "200 OK";
Response.StatusCode = 200;
Response.ContentType = "application/json; charset=utf-8";
Response.StatusDescription = "File removed succesfully";
Response.End();
}
}
By default, ASP.NET MVC application have some restricted file size to upload the file to the server. To upload the large size of files to the server, you need to increase the file size in the web.config file as mentioned below.
[web.config]
<system.web> <compilation debug="true" targetFramework="4.6.1" /> <httpRuntime targetFramework="4.6.1" maxRequestLength="102400" /> </system.web> <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Headers" value="accept, maxdataserviceversion, origin, x-requested-with, dataserviceversion,content-type, chunk-index, Authorization" /> <add name="Access-Control-Max-Age" value="104857600" /> <add name="Access-Control-Allow-Origin" value="*" /> </customHeaders> </httpProtocol> <security> <requestFiltering> <requestLimits maxAllowedContentLength="52428800" /> </requestFiltering> </security> </system.webServer>
You can download the above detailed information contained sample from the following link.
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Uploader_MVC1638698207
To learn more about Uploader control, refer to this Demo, API, and UG documentation links.
Conclusion
I hope you enjoyed learning about how to upload a file in the ASP.NET MVC Uploader.
You can refer to our ASP.NET MVC Uploader feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC Uploader example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
