Drag and Drop File Upload Vb.net Mvc

Drag & drib file upload in ASP.Net MVC

Introduction

In one of my previous articles, I explained How to Upload Files Asynchronously using ASP.Internet MVC awarding. Today I am going to show you how we can implement Drag & driblet file upload in ASP.NET MVC application.

This is a very elementary article today I am going to explain but Drag & drop file uploading is a very common requirement for any web application present. Drag and drop is a keen HTML5 feature. So let Start implementing elevate & drop file uploading in ASP.Cyberspace MVC application.

In this tutorial, we volition see how to implement this using the FileDrop jQuery plugin. jQuery FileDrop uses the HTML5 File API to permit users to drag multiple files from desktop to the browser, uploading each file to a user-specified URL.

Ok, let's start importing Drag & drop file upload in ASP.NET MVC.

Follow the following steps in order to implement "Elevate & drib file upload in ASP.Cyberspace MVC".

Here In this article, I accept used Visual Studio 2015

Pace - 1: Create New Project.

Get to File > New > Projection > ASP.NET Web Application (nether spider web) > Enter enter application name > select your projection location > and and then click on add push button > Information technology will brings upwardly a new dialog window for select template > hither I will select Empty template > checked MVC checkbox from Add binder and core referances for: > and so click on ok push button.

Step-2: Create a Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Here I accept created a controller "HomeController"

At present we will add a view for Index action (which is already added in the dwelling controller) where nosotros will implement drag & drop file upload.

Pace-iii: Add view for Index action.

Right Click on Action Method (here right click on Index action) > Add View... > Enter View Name > Select "Empty" under Template dropdown > Check utilise a layout folio > > Add.

HTML Code

@{     ViewBag.Title = "Index"; }  <h2>Drag & Drop file upload </h2> <div id="dropArea">     Drop your files here </div> <h4>Uploaded files : </h4> <ul class="listing-group" id="uploadList">  </ul>  <style>     #dropArea{         background:#b5b5b5;         border:black dashed 1px;         height:50px;         text-align:eye;         color:#fff;         padding-top:12px;     }     .active-drib{         background:#77bafa !of import;         border:solid 2px blue !important;         opacity:.5;         color:black !important;     } </way>  @section Scripts{         <script src="~/Scripts/jquery.filedrop.js"></script>     <script blazon="text/javascript">         $(part () {             $('#dropArea').filedrop({                 url: '@Url.Activeness("UploadFiles")',                 allowedfiletypes: ['image/jpeg', 'epitome/png', 'image/gif'],                 allowedfileextensions: ['.jpg', '.jpeg', '.png', '.gif'],                 paramname: 'files',                 maxfiles: 5,                 maxfilesize: 5, // in MB                 dragOver: function () {                     $('#dropArea').addClass('active-driblet');                 },                 dragLeave: function () {                     $('#dropArea').removeClass('active-drop');                 },                 driblet: function () {                     $('#dropArea').removeClass('active-drop');                 },                 afterAll: function (east) {                     $('#dropArea').html('file(s) uploaded successfully');                 },                 uploadFinished: function (i, file, response, time) {                     $('#uploadList').append('<li class="list-group-detail">'+file.name+'</li>')                 }             })         })     </script> }

Pace-4: Update _Layout.cshtml page.

Here we volition add a section for render script from another view. See the yellow marked lines.

<!DOCTYPE html> <html> <head>     <meta charset="utf-eight" />     <meta name="viewport" content="width=device-width, initial-scale=ane.0">     <title>@ViewBag.Championship - My ASP.Internet Application</title>     <link href="~/Content/Site.css" rel="stylesheet" blazon="text/css" />     <link href="~/Content/bootstrap.min.css" rel="stylesheet" blazon="text/css" />     <script src="~/Scripts/modernizr-2.6.two.js"></script> </head> <body>     <div form="navbar navbar-inverse navbar-fixed-top">         <div form="container">             <div class="navbar-header">                 <button blazon="button" course="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                     <span grade="icon-bar"></span>                 </push button>                 @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @form = "navbar-brand" })             </div>             <div grade="navbar-collapse collapse">                 <ul class="nav navbar-nav">                 </ul>             </div>         </div>     </div>      <div class="container body-content">         @RenderBody()         <hr />         <footer>             <p>&copy; @DateTime.At present.Year - My ASP.Cyberspace Awarding</p>         </footer>     </div>      <script src="~/Scripts/jquery-1.10.2.min.js"></script>     <script src="~/Scripts/bootstrap.min.js"></script>              @RenderSection("Scripts", required:simulated)              </body> </html>

Stride-5: Add jquery.filedrop.js from nuget.

Hither in this article, we have used jquery.filedrop.js. Nosotros volition add together this js library into our application from NuGet.

Go to solution explorer > Right click on project proper name > Manage NuGet Packages... > Search with this keyword "jquery-filedrop" > Select and click Install button.

Step-6: Add an another Action in HomeController.

Add together an another MVC action in the HomeController for upload file on the server.

[HttpPost] public ActionResult UploadFiles(IEnumerable<HttpPostedFileBase> files) {     foreach (var file in files)     {         string filePath = Guid.NewGuid() + Path.GetExtension(file.FileName);         file.SaveAs(Path.Combine(Server.MapPath("~/UploadedFiles"), filePath));         //Hither you can write lawmaking for save this data in your database if you want     }     render Json("file uploaded successfully"); }

Footstep-seven: Add together a folder in your application

Now nosotros will add together a folder into our application where we will store uploaded files.

Become to Solution Explorer > Right Click on the projection proper noun > Add together > New Folder.
I have renamed the binder as "UploadedFiles".

Footstep-8: Update web.config file.

This is required only when you desire to permit more than than 4MB file size. Hither I have allowed 5 MB (5120 KB).

Step-9: Run Application.

We accept washed all the steps. At present it's time to run the application.

Sourav Mondal

Hello ! My name is Sourav Mondal. I am a software developer working in Microsoft .NET technologies since 2010.

I similar to share my working experience, enquiry and knowledge through my site.

I love developing applications in Microsoft Technologies including Asp.Internet webforms, mvc, winforms, c#.cyberspace, sql server, entity framework, Ajax, Jquery, web api, web service and more.

simpsonmorabitte.blogspot.com

Source: http://www.dotnetawesome.com/2017/02/drag-drop-file-upload-aspnet-mvc.html