Drag and Drop Html 5 file upload - Prevent loading

Question

I have this code so far. I can see dragenter and dragleave events, but when I drop the file, the browser(Chrome or Firefox) just opens the file (a picture) even though preventDefault() is called. Anyone see any mistakes? What should I change?

 <script type="text/javascript">
    $(function () {
        var $box = $("#ulbox");
        $box.bind("dragenter", dragEnter);

        $box.bind("dragleave", dragLeave);
        $box.bind("drop", drop);

        function dragEnter(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            console.log("dragEnter...");
            $(evt.target).addClass('over');
            return false;
        }
        function dragLeave(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            console.log("drag leave...");
            $(evt.target).removeClass('over');
            return false;
        }


        function drop(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            $(evt.target).removeClass('over');

            var files = evt.originalEvent.dataTransfer.files;

            if (files.length > 0) {
                alert("dropped");
                if (window.FormData !== undefined) {
                    var data = new FormData();
                    for (i = 0; i < files.length; i++) {
                        data.append("file" + i, files[i]);
                    }

                    $.ajax({
                        type: "POST",
                        url: "/api/upload",
                        contentType: false,
                        processData: false,
                        data: data,
                        success: function (res) {
                        }
                    });
                } else {
                    alert("browser sucks!");
                }
            }
            return false;
        }
         });
    </script>
 }

 <div id="ulbox" style="border: 5px dashed black; width: 300px; height: 100px;">
 </div>

mahesh · Accepted Answer · 2013-03-21 00:58:47Z

1

Remove $box.bind("dragleave", dragLeave);

Add this : $box.bind("dragover", dragLeave);

it works charms .

answered Mar 21, 2013 at 0:58

mahesh

3324 silver badges7 bronze badges

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

1 Comment

Vlado Pandžić Over a year ago

Do you know maybe how to prevent that browser opens picture when I drop picture outside dashed div instead of inside?

Collectives™ on Stack Overflow

Drag and Drop Html 5 file upload - Prevent loading

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related