BuyLog In
Example T365089
Visible to All Users

DevExtreme File Uploader - How to upload files in an ASP.NET MVC application.

DevExtreme File Uploader - How to upload files in an ASP.NET MVC application.

This example demonstrates how to use the dxFileUploader widget to upload files to a server in an ASP.NET MVC application.

The example application demonstrates the following techniques:

  • Send an AJAX request to upload files.
  • Upload files when a user submits an HTML form.

Files to Review

Documentation

More Examples

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

This example demonstrates how to use the dxFileUploader widget to upload files to a server in an ASP.NET MVC application.

The example application demonstrates the following techniques:

  • Send an AJAX request to upload files.
  • Upload files when a user submits an HTML form.

Files to Review

Documentation

More Examples

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

Example Code

Upload/Controllers/HomeController.cs(vb) 
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Upload.Helpers;

namespace Upload.Controllers {
    public class HomeController : Controller {
        public ActionResult Index() {
            return View();
        }

        [HttpPost]
        public ActionResult Submit() {
            SaveFilesHelper.Save(this.HttpContext);
            return View("Index");
        }

        public ActionResult FileUpload() {
            SaveFilesHelper.Save(this.HttpContext);
            return null;
        }
    }
}
Upload/Helpers/SaveFilesHelper.cs(vb) 
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Upload.Helpers {
    public class SaveFilesHelper {
        public static void Save(HttpContextBase context) {
            try {
                HttpFileCollectionBase files = context.Request.Files;
                HttpRequestBase request = context.Request;
                if (files.Count != 0) {
                    for (int i = 0; i < files.Count; i++) {
                        HttpPostedFileBase file = files[i];
                        if (file.ContentLength != 0) {
                            string fileName = string.Empty;
                            if (request.Browser.Browser.Contains("InternetExplorer"))
                                fileName = System.IO.Path.GetFileName(file.FileName);
                            else
                                fileName = file.FileName;
                            string path = context.Server.MapPath("~/Images/") + fileName;
                            file.SaveAs(path);
                        }
                    }
                }
            } catch (Exception ex) {
                context.Response.Write(ex.Message);
            }
        }
    }
}
Upload/Views/Home/Index.cshtml 
Razor
AJAX Uploading:
<div id="uploadContainer"></div>

Form Submit Uploading:
@using (Html.BeginForm("Submit", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) {
    <div id="formUploadContainer"></div>
    <input type="submit" />
}

<script type="text/javascript">
    $("#uploadContainer").dxFileUploader({
        buttonText: 'Select file',
        labelText: 'Drop file here',
        multiple: true,
        accept: 'image/*',
        uploadUrl: '@Url.Action("FileUpload", "Home")'
    });

    $("#formUploadContainer").dxFileUploader({
        buttonText: 'Select file',
        labelText: 'Drop file here',
        multiple: true,
        accept: 'image/*',
        uploadMode: 'useForm'
    });
</script>
Upload/Views/Home/Index.vbhtml 
Code
AJAX Uploading:
<div id="uploadContainer"></div>

Form Submit Uploading:
@Using (Html.BeginForm("Submit", "Home", FormMethod.Post, New With {.enctype = "multipart/form-data"}))
    @<div id="formUploadContainer"></div>
    @<input type="submit" />
End Using

<script type="text/javascript">
    $("#uploadContainer").dxFileUploader({
        buttonText: 'Select file',
        labelText: 'Drop file here',
        multiple: true,
        accept: 'image/*',
        uploadUrl: '@Url.Action("FileUpload", "Home")'
    });

    $("#formUploadContainer").dxFileUploader({
        buttonText: 'Select file',
        labelText: 'Drop file here',
        multiple: true,
        accept: 'image/*',
        uploadMode: 'useForm'
    });
</script>
Upload/Web.config 
Code
<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <appSettings>
    <add key="webpages:Version" value="3.0.0.0" />
    <add key="webpages:Enabled" value="false" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>
  <system.web>
    <compilation debug="true" targetFramework="4.7.2" />
    <httpRuntime targetFramework="4.5" maxRequestLength="4096" />
  </system.web>
  <system.webServer>
    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="30000000" />
      </requestFiltering>
    </security>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-Width, Content-Type, Accept" />
        <add name="Access-Control-Allow-Methods" value="Get,PUT,POST,DELETE,OPTIONS" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="Newtonsoft.Json" culture="neutral" publicKeyToken="30ad4fe6b2a6aeed" />
        <bindingRedirect oldVersion="0.0.0.0-6.0.0.0" newVersion="6.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Optimization" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="1.1.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-1.5.2.14234" newVersion="1.5.2.14234" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Helpers" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-3.0.0.0" newVersion="3.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.WebPages" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-3.0.0.0" newVersion="3.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-5.2.0.0" newVersion="5.2.0.0" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
</configuration>

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.