0

I created a form with the option to either 'drag and drop', or 'click to upload' a file. When either of the 2 happens, I want it to trigger an action.

I used the onchange event to trigger an action when a value in the form changes.

$("#uploadform").on('change', function (e) {
    e.preventDefault();

    alert("Something Changed");
});

That only gets triggered when I 'click to upload' a file. When I 'drag 'n drop' a file, the event doesn't get triggered.

How can I trigger the same event when I 'click to upload' or 'drag 'n drop' happens?

Please post answers in JQuery.

JSFiddle

$(document).ready(function () {
    "use strict";
    $("#uploadform").on('change', function (e) {
        e.preventDefault();

        alert("Something Changed");
    });

    $('#browseFileDiv').click(function (e) {
        $(this).find('input[type="file"]').click();
    });
    $('#browseFileDiv input').click(function (e) {
        e.stopPropagation();
    });



    // Setup Drag 'n Drop

    function handleFileSelect(evt) {
        evt.stopPropagation();
        evt.preventDefault();
    }

    function handleDragOver(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy';
    }

    var dropZone = document.getElementById('browseFileDiv');
    dropZone.addEventListener('dragover', handleDragOver, false);
    dropZone.addEventListener('drop', handleFileSelect, false);
});
#browseFileDiv {
    height: 100px;
    width: 200px;
    background-color: greenyellow;
}
#browseFileDiv > input {
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
    <div id="browseFileDiv">
        <input id="openFile" name="img" type="file" />
    </div>
</form>
Jessica
  • 9,379
  • 14
  • 65
  • 136

1 Answers1

0

EDIT:

Trying to implement the change and drop listener properly.

$("#uploadform").on('change drop', function (e) {
    e.preventDefault();
    e.stopPropagation();

    alert("Something Changed");
});

// No longer need for `drop` event listener on the `dropZone` element.
// In particular DO NOT stop propagation, otherwise the form will not receive it.

Updated demo: http://jsfiddle.net/jytL8heo/2/

A workaround would be to simply fire the "change" event manually on drop.

function handleFileSelect(evt) {
    // Manually fire the change event.
    $("#uploadform").trigger("change");

    evt.stopPropagation();
    evt.preventDefault();
}

Demo: http://jsfiddle.net/jytL8heo/1/

ghybs
  • 47,565
  • 6
  • 74
  • 99
  • I guess because 1) you stop event propagation, so the form will not receive it, and 2) the drag'n'drop creates a `drop` event, not a `change`. Let's try doing it properly, I will edit the answer and demo. – ghybs Nov 17 '15 at 05:41
  • Thanks for the edit! The way I accessed the 'click to upload' file was like this: `new FormData($(this)[0]);`. For some reason it's not working with the 'drag 'n drop'. Am I doing anything wrong? – Jessica Nov 17 '15 at 06:05
  • Indeed the `drop` event stores associated files differently. First answer to this question should get you started: http://stackoverflow.com/questions/10261989/html5-javascript-drag-and-drop-file-from-external-window-windows-explorer – ghybs Nov 17 '15 at 06:14