CODEWITHSUNDEEP
javascriptasp.nethtmluploaddrag-and-drop
Ragnarsson
Ragnarsson

Reputation: 1825

Enhancement for HTML Drag and Drop upload file?

I know this question is a bit naive, but I think it's good to put it on here anyway.

I have a HTML drag and drop upload file. My question is that if it is possible that when user clicks on the droparea (beside normal behavior drag and drop file to droparea) and the select file dialog opened and when user selects files, we can call the drop events and start the process of normal drag and drop.

Is it possible or has anyone done or thought of that?

Thanks

Upvotes: 0

Views: 850

Answers (1)

Defiance
Defiance

Reputation: 26

I've had some success by binding to drop events on a input element.

See the jsfiddle here: http://jsfiddle.net/LPVcM/

Good luck!

HTML

<div id="container">
    <div id="instructions">Drag a file here.</div>
</div>

Javascript

var container = document.getElementById('container'),
    file = null,
    instructions = document.getElementById('instructions');

addFileInput();

function addFileInput() {
    var el = document.createElement('input');
    el.setAttribute('type', 'file');
    el.setAttribute('class', 'fileinput');
    el.addEventListener('drop', function() {
        instructions.innerHTML += ' Thanks!';
    });
    el.addEventListener('change', function() {
        instructions.innerHTML += ' Yum!';
    el.className += ' hidden'
        addFileInput();
    });
    container.appendChild(el);
}

CSS

.fileinput {
    position: absolute;
    width: 300px;
    height: 200px;
    opacity: 0;
}

.fileinput.hidden {
    display: none;
}

#instructions {
    position: absolute;
    width: 300px;
    height: 200px;
}

#container {
    border: 1px solid black;
    width: 300px;
    height: 200px;
}

Upvotes: 1

Related Questions