Home
Very Simple Drag Drop File Upload
Holy sweet mercy! EVERYONE I mean EVERYONE makes this really really really complex.
So you want a drag and drop file upload. Download a plugin (urgh). Learn Javascript and JQuery and Angular and a gazillion CSS formats (urgh).
How's this.
First create a div. The div will need 2 events, ondrop and ondragover. Now the ondrop makes sense but the ondragover? Why the hell do we want to do anything about something being pulled across the div? Well it seems we need to tell the browser not to poop its pants if anything is dragged over the div. That's all, don't panic browser just don't do anything stupid! Then ondrop we can deal with the files.
So the div...
<div id="MyDiv" class="MyDivCSS" ondrop="DropCode(event)" ondragover="DragCode(event)" >
Drag Here
</div>
And to go with the div we will need a billy bog standard file upload input, multiple in this case.
<input type="file" multiple id="MyFiles" />
So the div, when it has something dragged over it, ondragover, calls DragCode(event). Event? Meh, probably whatever is happening in the div. Anyhow we call the Javascript function
function DragCode(event) {
event.preventDefault()
}
I guess event.preventDefault() is the bit that says to the browser DON'T PANIC! just don't do what you normally do. And that is it, that's all. So as the files move across the div the browser goes "what do I do WHAT DO I DO...oh, nothing..."
Then when we drop the files we call DropCode(event)
function DropCode(event) {
event.preventDefault()
document.getElementById('MyFiles').files = event.dataTransfer.files
}
So again we tell the browser to not do it's normal thing, event.preventDefault. Then, right, real complex, we say - find MyFiles yeah, using document.getElementById and MyFiles is the upload button. Well take them files that's just been dropped into the div and just pass them to MyFiles!
Here's the whole code.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="xxx.aspx.cs" Inherits="xxx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<style>
.MyDiv{
border-style:solid;
border-bottom-width:2px;
font-size:3em;
padding:3em;
}
</style>
<script>
function DropCode(event) {
event.preventDefault()
document.getElementById('MyFiles').files = event.dataTransfer.files
}
function DragCode(event) {
event.preventDefault()
}
</script>
</head>
<body>
<div id="MyDiv" class="MyDiv" ondrop="DropCode(event)" ondragover="DragCode(event)" >Drag Here</div>
<input type="file" multiple id="MyFiles" />
</body>
</html>
Reader's Comments
Name
Comment
Add a RELEVANT link (not required)
Upload an image (not required)
Uploading...
Home