magritton
12/7/2014 - 3:15 PM

Example of implementing an HTML5 drag and drop funtion with a back end running ASP.

Example of implementing an HTML5 drag and drop funtion with a back end running ASP.

FileHandler
content_copyfile_download
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;

namespace OESDataLoadWeb
{
    /// <summary>
    /// Summary description for FileHandler
    /// </summary>
    public class FileHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            if (context.Request.Files.Count > 0)
            {
                HttpFileCollection files = context.Request.Files;
                foreach (string key in files)
                {
                    HttpPostedFile file = files[key];
                    string fileName = Path.GetFileName(file.FileName);
                    fileName = context.Server.MapPath("~/uploads/" + fileName);
                    file.SaveAs(fileName);
                }
            }
            context.Response.ContentType = "text/plain";
            context.Response.Write("File(s) uploaded successfully!");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
ASP Drag and Drop.html
content_copyfile_download
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OESDataload.aspx.cs" Inherits="OESDataLoadWeb.OESDataload" %>

<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>OES Dataload</title>
    <script src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        var selectedFiles;
 
        $(document).ready(function () {
            var box;
            box = document.getElementById("box");
            box.addEventListener("dragenter", OnDragEnter, false);
            box.addEventListener("dragover", OnDragOver, false);
            box.addEventListener("drop", OnDrop, false);

        function OnDragEnter(e) {
            e.stopPropagation();
            e.preventDefault();
        }

        function OnDragOver(e) {
            e.stopPropagation();
            e.preventDefault();
        }

        function OnDrop(e) {
            e.stopPropagation();
            e.preventDefault();
            selectedFiles = e.dataTransfer.files;
            $("#box").text(selectedFiles.length + " file(s) selected for uploading!");
        }

        $("#upload").click(function () {
            var data = new FormData();
            for (var i = 0; i < selectedFiles.length; i++) {
                data.append(selectedFiles[i].name, selectedFiles[i]);
            }
            $.ajax({
                type: "POST",
                url: "FileHandler.ashx",
                contentType: false,
                processData: false,
                data: data,
                success: function (result) {
                    alert(result);
                },
                error: function () {
                    alert("There was error uploading files!");
                }
            });
        });
     });
    </script>
    
    <style>
      #box {
        width:300px;
        height:100px;
        text-align:center;
        vertical-align:middle;
        border:2px solid #ff6a00;
        background-color:#ffd800;
        padding:15px;
        font-family:Arial;
        font-size:16px;
        margin-top:35px;
      }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <center>
  <div id="box" draggable="true">Drag & Drop files from your machine on this box.</div>
  <br />
  <input id="upload" type="button" value="Upload BOM" />
        <input id="CreateBOM" type="button" value="Create BOM" />
</center>
    </div>
</body>