Source code

Revision control

Copy as Markdown

Other Tools

<!doctype html>
<title>Dragging a file to the system</title>
<style type="text/css">
span { display: inline-block; height: 100px; width: 100px; background: orange; }
<script type="text/javascript">
window.onload = function () {
var drag = document.getElementsByTagName('span')[0];
drag.ondragstart = function (e) {
e.dataTransfer.effectAllowed = 'copy';
var filein = document.getElementsByTagName('input')[0];
if( !filein.files ) {
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file API is not supported.';
if( !filein.files[0] ) {
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - no file was found in the file input.';
var thefile = filein.files[0];
try {
} catch(err) {
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - error when adding file';
if( e.dataTransfer.files.length != 1 ) {
document.getElementsByTagName('p')[0].innerHTML = 'FAIL - file was not attached to data store';
<div>This test only applies to platforms where dropping a file onto a folder in the system's file manager copies/moves the file to that folder.</div>
<li>Open an empty folder in your system's file manager.</li>
<li>Select a non-empty file on your computer using the following input: <input type="file"></li>
<li>Drag the orange square onto the folder in your system's file manager, and release it:<br><span draggable="true"></span></li>
<li>Pass if the file is copied to the folder.</li>
<noscript><p>Enable JavaScript and reload</p></noscript>