jQuery HTML5 file drag and drop

Question

I have looked at many scripts for uploading images to the server with AJAX with drag and drop. The scripts I found are not jQuery, are quite large and don't do exactly what I want.

In the future it should upload an image with jQuery, AJAX and PHP.

My question

In many of the example I've looked at e.dataTransfer.files work. In my case it don't. Do I need to bind it somehow?

I want jQuery as much as possible.

JsFiddle

Play around as much as you like...

http://jsfiddle.net/AMjEz/

Code

<html>
    <head>
        <style type="text/css">
            #dropzone {
                border: 2px dashed #ccc;
                width: 300px;
                height: 200px;
            }
        </style>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('#dropzone').on({
                    dragenter: function(e) {
                        $(this).css('background-color', 'lightBlue');
                    },
                    dragleave: function(e) {
                        $(this).css('background-color', 'white');
                    },
                    drop: function(e) {
                        e.stopPropagation();
                        e.preventDefault();
                        console.log(e.dataTransfer.files);
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="dropzone">
            Drop files here
        </div>
    </body>
</html>

Have you checked http://blueimp.github.com/jQuery-File-Upload/? — dlock, Oct 18 '12 at 12:44
I guess you want both... `files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files` — Ron van der Heijden, Apr 04 '13 at 10:59
Related: http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery — Timo Huovinen, Feb 04 '14 at 11:31

Ron van der Heijden · Answer 1 · 2015-06-25T14:34:41.303

I wrote an extension for my application.

// Custom file drop extension
$.fn.extend({
    filedrop: function (options) {
        var defaults = {
            callback : null
        }
        options =  $.extend(defaults, options)
        return this.each(function() {
            var files = []
            var $this = $(this)

            // Stop default browser actions
            $this.bind('dragover dragleave', function(event) {
                event.stopPropagation()
                event.preventDefault()
            })

            // Catch drop event
            $this.bind('drop', function(event) {
                // Stop default browser actions
                event.stopPropagation()
                event.preventDefault()

                // Get all files that are dropped
                files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files

                // Convert uploaded file to data URL and pass trought callback
                if(options.callback) {
                    var reader = new FileReader()
                    reader.onload = function(event) {
                        options.callback(event.target.result)
                    }
                    reader.readAsDataURL(files[0])
                }
                return false
            })
        })
    }
})

And we can use it like this

// Event listener filedropper
$('.dropbox').filedrop({
    callback : function(fileEncryptedData) {
        // a callback?
    }
})

Edit

If you want to drop multiple files, you should write a for loop around the FileReader like so:

...
if(options.callback) {
    for (i = 0; i < files.length; i++) {
        var reader = new FileReader()
        reader.onload = function(event) {
            options.callback(event.target.result)
        }
        reader.readAsDataURL(files[0])
    }
}
...

JSFiddle: http://jsfiddle.net/646xe1m2/

thanks ;) i think i have already made the same modifications as your edit. do you know the joy of it when you did that and see someone with 5000 reps did the same? (i think i have exaggerated a little) — Daniel Cheung, Jun 25 '15 at 14:34

score 12 · Accepted Answer · edited Mar 08 '13 at 13:52

I found out that it's a bug in jQuery.1.8. This row should be before $('.dropzone').

$.event.props.push('dataTransfer');

Final HTML code

<html>
    <head>
        <style type="text/css">
            .dropzone {
                border: 2px dashed #ccc;
                width: 300px;
                height: 200px;
            }
        </style>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                var filename = '';
                var image_data = '';

                $.event.props.push('dataTransfer');
                $('.dropzone').on({
                    dragenter: function(e) {
                        $(this).css('background-color', 'lightBlue');
                    },
                    dragleave: function(e) {
                        $(this).css('background-color', 'white');
                    },
                    drop: function(e) {
                        e.stopPropagation();
                        e.preventDefault();

                        var file = e.dataTransfer.files[0];
                        var fileReader = new FileReader();

                        var this_obj = $(this);

                        fileReader.onload = (function(file) {
                            return function(event) {
                                // Preview
                                filename = file.name;
                                image_data = event.target.result;
                                $(this_obj).next().html('<a href="#" class="upload-file">Upload file</a>');
                                $(this_obj).html('<img style="max-width: 200px; max-height: 200px;" src="' + event.target.result + '">');
                            };
                        })(file);

                        fileReader.readAsDataURL(file);         
                    }
                });

                // Upload file
                $(".upload-file").live("click", function(e){
                    e.preventDefault();

                    var this_obj = $(this);
                    var image_data = $(this_obj).parent().prev().find('img').attr('src');

                    $.post(
                        'send_image.php',
                        {
                            data: image_data,
                            filename: filename
                        }, function(response){  
                            $(this_obj).parent().prev().html(response);
                            $(this_obj).remove();
                        }
                    );

                    //console.log('ok');
                });

            });
        </script>
    </head>
    <body>
        <!-- Multiple dropzones -->
        <div class="dropzone">
            Drop files here
        </div>
        <div id="meta"></div>
        <div class="dropzone">
            Drop files here
        </div>
        <div id="meta"></div>
    </body>
</html>

PHP code in send_image.php

<?php
$raw_data = $_POST['data'];

file_put_contents(
    'image123.jpg',
    base64_decode( 
        str_replace('data:image/jpeg;base64,', '', $raw_data)
    )
);
?>

<br>

<?php echo '<img style="max-width: 200px; max-height: 200px;" src="' . 'image123.jpg' . '">'; ?>

Add the dragover event and cancel all events. See this post: https://stackoverflow.com/a/19223442/641854 — Mark, Mar 01 '18 at 17:44

score 1 · Answer 3 · answered Oct 05 '18 at 11:46

törnell

thanks for sharing you're code, it helped me immensely! For anyone else finding IE edge being a bother here's the final code I have from @jens-törnell and advice given on this post jQuery.on("drop") not firing

  jQuery(document).ready(function($){
    var filename = '';
    var image_data = '';
    $.event.props.push('dataTransfer');

    $('.dropzone').on({
      dragover: function(e) {
        e.stopPropagation();
        e.preventDefault();
        $(this).addClass('highlight');
        console.log("t3");
        return false; //crucial for 'drop' event to fire
       },
      dragleave: function(e) {
        e.stopPropagation();
        e.preventDefault();
        $(this).removeClass('highlight');
        return false;
       },
       drop: function(e) {
         e.stopPropagation();
         e.preventDefault();
         var file = e.dataTransfer.files[0];
         var fileReader = new FileReader();

         var this_obj = $(this);

         fileReader.onload = (function(file) {
             return function(event) {
                 // Preview
                 filename = file.name;
                 image_data = event.target.result;
                 $(this_obj).next().html('<a href="#" class="upload-file">Upload file</a>');
                 $(this_obj).html('<img style="max-width: 200px; max-height: 200px;" src="' + event.target.result + '">');
             };
         })(file);
         fileReader.readAsDataURL(file);
         return false;
       }
    });

    // Upload file
    $(".upload-file").live("click", function(e){
       e.preventDefault();

       var this_obj = $(this);
       var image_data = $(this_obj).parent().prev().find('img').attr('src');

       $.post(
           'upload-file.php',
           {
               data: image_data,
               filename: filename
           }, function(response){
               $(this_obj).parent().prev().html(response);
               $(this_obj).remove();
           }
       );

     console.log('ok');
 });

  <div class="dropzone" id="dropzone"><p>Drop files here to upload them.</p></div>
      <div id="meta"></div>

jQuery HTML5 file drag and drop

3 Answers3

Edit

Linked