html5 drag and drop file uploads

Question

I have a bunch of file uploads on my website and I was looking into making them into drag and drop fields. However I seem to be having an issue with them.

Is there any way to accomplish a drag and drop system without the use of javascript or plugins? I'm trying to make this as light as possible and with the least amount of code.

I have looked at several different methods of doing this such as http://html5demos.com/dnd-upload but they all include javascript.

At the moment I just have regular inputs that look like this

<input type="file" multiple="true" name="" value="" />

@JackWilliams I have already rad that. He was talking about creating a holder to make it look like an ajax drag and drop. I am talking about creating html5 drag and drop. — zazvorniki
– zazvorniki, Commented Feb 26, 2014 at 14:49

EricP · Accepted Answer · 2014-10-27 21:58:15Z

1

Afaik there is not a way to do this without the use of javascript. However, here is a simple example that does use javascript. If you drag an image over the red div it appends the image to the body. I've confirmed it works in IE11, Chrome 38, and Firefox 32. See the Html5Rocks article for a more detailed explanation.

<div id="dropZone" style="width: 100px; height: 100px; background-color: red"></div>
<script>
    var dropZone = document.getElementById('dropZone');

    // Optional.   Show the copy icon when dragging over.  Seems to only work for chrome.
    dropZone.addEventListener('dragover', function(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
    });

    // Get file data on drop
    dropZone.addEventListener('drop', function(e) {
        e.stopPropagation();
        e.preventDefault();
        var files = e.dataTransfer.files; // Array of all files
        for (var i=0, file; file=files[i]; i++) {
            if (file.type.match(/image.*/)) {
                var reader = new FileReader();
                reader.onload = function(e2) {
                    var img = document.createElement('img');
                    img.src= e2.target.result;
                    document.body.appendChild(img);
                }
                reader.readAsDataURL(file);
    }   }   });
</script>

edited Oct 27, 2014 at 21:58

answered Oct 27, 2014 at 3:22

EricP

3,4393 gold badges38 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zazvorniki Over a year ago

I was actually able to figure this out without using javascript at all. If you stretch the inputs to fill your container then the browser will take care of the rest, this is true for all browsers including ie.

Collectives™ on Stack Overflow

html5 drag and drop file uploads

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related