Question

132

Drag-and-drop file upload in Google Chrome/Chromium and Safari?

rated 0 times [ 133] [ 1] / answers: 1 / hits: 71164 / 14 Years ago, sat, april 17, 2010, 12:00:00

Drag-and-drop file uploading can be done in Firefox 3.6.

A Google search for html5 drag-and-drop file uploading -gmail gives things like:

Native Drag + Drop file upload in Firefox 3.6

http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload

http://www.thecssninja.com/javascript/drag-and-drop-upload

All of these guides use FileReader (or the Firefox 3.6's deprecated getAsBinary, which no other browser supports, either).

However, Google recently released an update for Gmail that allowed drag-and-drop file uploading in Chromium as well as Firefox, and Chromium does not have FileReader. I'm using the latest Chromium nightly, and it can drag-drop upload files, while not supporting FileReader.

I've seen someone mention that drag-drop uploading can be possible by dragging onto an <input type=file />, but that can only support one file at a time, while Gmail's uploader can handle multiple files being dragged onto it, so that's clearly not what they're doing.

So the question is, how do they do it? How do you support Chromium for HTML5 file uploading? In addition, can you support Safari?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

longd

Add To Favorites

Follow

Total Points: 616

Total Questions: 110

Total Answers: 101

Location: Andorra

Member since Sat, May 27, 2023

1 Year ago

longd questions

1 JS to TS: Type 'null' is not assignable to type 'number'

Mon, Jan 24, 22, 00:00, 2 Years ago

1 Typescript class variables and error: refers to a value, but is being used as a type here. . Did you mean typeof' .... Why exactly?

Wed, May 26, 21, 00:00, 3 Years ago

1 Slick Slider two rows, how?

Sat, Apr 3, 21, 00:00, 3 Years ago

1 VS Code auto formatting with prettier

Mon, Jul 13, 20, 00:00, 4 Years ago

1 Uncaught SyntaxError: import declarations may only appear at top level of a module:1:18 asking again

Tue, Jun 9, 20, 00:00, 4 Years ago

View All

answered 14 Years ago alorafrancisl · Accepted Answer

WARNING: This is compatibility code for very old versions of Safari and Chrome. Modern browsers all support the FileReader API; here's one tutorial: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

This code is now only useful if for some reason you have a need to support Safari 5 and older, or Chrome 6 and older.

One possibility is to use the method used in SwellJS:

Use <input type=file multiple=multiple /> like so:

<form method=post enctype=multipart/form-data id=uploadform>

  <input type=file name=dragupload[] multiple=multiple

  onchange=if (this.value) document.getElementById('uploadform').submit(); />

</form>

The input element can be styled to have opacity: 0 and positioned (absolutely) over an element that accepts uploads. The entire form can be placed inside an iframe for pseudo-Ajax like behavior. And the upload element can be a layer hidden until something is dragged over it.

Such an iframe would look like:

<script>

<!--

  var entered = 0;

-->

</script>

<body ondragenter=entered++;document.getElementById('uploadelement').style.display='block' ondragleave=entered--;if (!entered) document.getElementById('uploadelement').style.display='none'>

  <form method=post enctype=multipart/form-data id=uploadform>

    Things can be dragged and dropped here!

    <input type=file id=uploadelement name=dragupload[] multiple=multiple onchange=if (this.value) { document.getElementById('uploadform').submit(); } style=display:none;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0; />

  </form>

</body>

This should only be done when Safari or Chrome is detected (since other browsers don't support drag-and-drop onto <input type=file /> elements), and can be used in combination with the HTML5 drop event for Firefox 3.6+.

I can't tell if this is the method Gmail uses, but it certainly works about as well.