This is a part of my code. If I try to drop an image on the block preventDefault does not work.

        jQuery(document).ready(function($) {
            $.event.props.push('dataTransfer');
            $('#imgDropzone').on({
                dragenter: function(e) {
                    $(this).css('background-color', '#ffd1ff');
                },
                dragleave: function(e) {
                    $(this).css('background-color', '');
                },
                drop: function(e) {
                    e.stopPropagation();
                    e.preventDefault();

                    var file = e.dataTransfer.files[0];
                    var fileReader = new FileReader();
                    var el = $(this);
                    fileReader.onload = (function(file) {
                        return function(event) {
                            alert(event.target.result);
                        };
                    })(file);
                    fileReader.readAsDataURL(file);
                }
            });
        });

/

This is a part of my code. If I try to drop an image on the block preventDefault does not work.

        jQuery(document).ready(function($) {
            $.event.props.push('dataTransfer');
            $('#imgDropzone').on({
                dragenter: function(e) {
                    $(this).css('background-color', '#ffd1ff');
                },
                dragleave: function(e) {
                    $(this).css('background-color', '');
                },
                drop: function(e) {
                    e.stopPropagation();
                    e.preventDefault();

                    var file = e.dataTransfer.files[0];
                    var fileReader = new FileReader();
                    var el = $(this);
                    fileReader.onload = (function(file) {
                        return function(event) {
                            alert(event.target.result);
                        };
                    })(file);
                    fileReader.readAsDataURL(file);
                }
            });
        });

http://jsfiddle.net/LrmDw/

• javascript
• jquery
• droppable

• 5 I wish SO had a built-in filter to detect questions that claim something "does not work" and then fail to describe exactly what goes wrong. – Pointy Commented Feb 3, 2013 at 16:03
• @Pointy they said "Why preventDefault does not work?". The preventDefault() method of the Event interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be., so they've adequately stated that the browser is still taking the default action.. – Hashbrown Commented Apr 23, 2024 at 8:21

1 Answer 1

You need^* to prevent default for all the other drag events as well:

see http://jsfiddle.net/LrmDw/2/

$('#imgDropzone').on("dragenter dragstart dragend dragleave dragover drag drop", function (e) {
    e.preventDefault();
});

To explain what's not working in the original jsfiddle:

When you drop a file in the droparea (or anywhere in the page), the browser's default behavior is to navigate away and try to interpret the file. If you drop a normal txt file for example, the browser will navigate away from jsfiddle and display contents of the txt file. This is in Chrome.

Btw, base64 urls are not preferable since they duplicate data. Simply grab a blob pointer to the file and use that:

var file = e.dataTransfer.files[0];
var src = (window.URL || window.webkitURL).createObjectURL(file);
$("<img>", {src: src}).appendTo("body");

See

http://jsfiddle.net/LrmDw/3/

^{I don't know exactly which ones but I never had to care}