DragDropUpload
From Teslacore
Contents |
What it is?
This extension lets fill an upload input of a form using the drag and drop service from the system. Just drop the file into the input box and then send it.
Developer Version (Testing Version 1.8 with support for FireFox 3.5): Download
Mozilla Update Addons: Download from Mozilla Update
Features and Notes
- drop files into file input fields
- expand file when dropping multiple files
- special support for GMail
- SideBar for dropping file from inside FireFox (actually I don't like it)
- resolution of Windows shortcuts
- drop snippets of text, html pages, or email texts and the extension will generate a temporary file for you. For example to attach a Thunderbird email as attachment press CTRL+U CTRL+A and drop it.
Multi file uploader tested with
- Flickr
- CommuniGate Pro
- Gmail (September 2008) Just drop the files over the blue area of the Gmail panel
- FaceBook (September 2008)
- Kerio WebMail (September 2008)
- Salesforce
Clients:
- Firefox 2.0, 3.0, 3.5
- Prism 0.9
Status
- 1.8 (2009/07/01) Support for 3.5
- 1.6.8 (2008/07/19) Fix for Kerio WebMail, support for 3.0.1, support for Windows Links
- 1.6.5 (2008/05/05) BETA version solving last bugs of 1.6.2 and support for Prism 0.9 and Gmail drop on message area
- 1.6.2 (2008/04/05) dropping text into the Browse Button and generating temporary .eml .html or .xml files (works with Thunderbird)
- 1.6.1 (2008/02/29) released with support for FF 3.0 (waiting for Approval). Dropping is possible only into the Browse Button
- 1.5.25 (2008/02/13) released with support for the new GMail. Yet no FF 3.0
Maybe you can donate for supporting future development Teslacore:Site_support
Requests and Bugs
- Support for the strange Styling of the Input Field as in quircksmode.
Styling of the Upload field
The extension works with the styling of the Upload button as implemented in Dojo but not in the way as it is implemented in quircksmode.
Solved
- Support for 3.5 (solved in 1.8)
- Bug for Kerio
- Bug under Linux systems since temporary file introduction (solved in 1.6.4)
- Support for Prism 0.9 (solved in 1.6.4)
- Firefox 3.0 (solved in 1.6.1) Dropping is possible only into the Browse Button
- GMail 2.0 (done in 1.5.25)
- Exposing presence of Extension to Web page (done in 1.5.24)
- Support of [] for multiple uploads in PHP (done in 1.5.24)
- Handling of non-alphanumeric and japanese (done in 1.5.24)
Planned/Requested Features
High Request
- drop attachments from Thunderbird or Outlook
- basecamp fix http://basecamphq.com
- add clear of upload field (much like another extension)
- Localization for GMail (pr)
Low Request
- recursive upload of folders
- computation MD5 from local files and placement in the form (and put it somewhere)
- zipping on upload of multiple files
Updates
New Features 1.8 (July 03, 2009)
- Firefox 3.5 (finally!)
New Features 1.6.8 (July 19, 2008)
- Solved bugs in 1.6.7
- Windows Desktop shortcuts resolution
- Support for Kerio WebMail
New Features 1.6.7 (May 29, 2008)
- Fixed bug with email text drop
New Features 1.6.5 (May 05, 2008)
- GMail drop over blue area
New Features 1.6.4 (May 04, 2008)
- Prism 0.9
- Fixed bad bugs
New Features 1.6.2 (April 05, 2008)
- Dropping of text snippets with temporary file generation and identification of emails
New Features 1.6.1 (February 29, 2008)
- FF 3.0, but Dropping is possible only into the Browse Button
New Features 1.5.25 (February 13, 2008)
- GMail 2.0
New Features 1.5.24 (October 31, 2007)
- Fixed various problems in url<->path conversion
- Added support for PHP sites
- Recognition of Extension
New Features 1.5.21 (October 24, 2006)
- Multilingual GMail support
New Features 1.5.20 (October 20, 2006)
- compatibility with FF 2.0
- added new locale
New Features 1.5.15 (July 05, 2006)
- little bug with Gmail on 1.5.14
New Features 1.5.14 (July 03, 2006)
- added localization for fr-FR, it-IT
- onChange event fired on drop
- reduced number of alerts
New Features 1.5.11
- Fixed small issues of the Sidebar
New Features 1.5.10
- Added folder entry and selection in the SideBar
- Fixed bug under Linux
New Features 1.5.9
- Added Toolbar button for opening the Sidebar
New Features 1.5.8
- Just Drop into the Gmail "Attach It", one click saved
- Support for Bon Echo
New Features 1.5.6
- Fixed multi file drop support in GMail
New Features 1.5.5
- Fixed Sidebar
New Features 1.5.3
- Support for Firefox 1.5
- Support for input fields crated dynamically
- Support for automatic creation of input fields with Gmail
New Features 1.2
- Drag And Drop sidebar opened on the Home Directory (Alt+L)
- support for input in frames
- multiple Drag and Drop on multiple fields
Test
Test the extensions here:
<xhtml>
<form>
File 1: <input size="100" name="Attachment" type="file">
File 2: <input size="100" name="Attachment2" type="file">
File 3: <input size="100" name="Attachment2" type="file">
</form>
</xhtml>
For Web Developers
Drop into Input Field
When a user drags files onto a file input element, this extension automatically adds the paths to value of any file inputs that it finds in that form.
For more flexibility, note that the the onchange event handler of each input is fired before the extension does its work. So, for example, you could have just one input on the page and have onchange events that create more file inputs as they are filled. The form will then automatically grow in size as needed.
Dynamic Input Fields
When the available input fields are all full the extension tries to add new of them. There is specific code for supporting GMail and Kerio, but other websites can be supported as well by adding the DOM attribute "ddattacher" to the form that contains the id of the element that should be clicked for adding new attachments.
Look at the code in page testdyn.html
Check for extension
It is possible to recognize the presence of the extension testing the _dragdropupload DOM attribute of the window. This check should be done after the loading and not inside the onLoad because the way dragdropupload is triggered by FireFox.
Example:
<html>
<head>
<script language="JavaScript">
function myOnLoad()
{
window.setInterval(check,1)
}
function check()
{
if (window["_dragdropupload"])
t = "DragDrop Upload present"
else
t = "DragDrop Upload missing"
document.getElementById("present").innerHTML = t
}
</script>
</head>
<body onLoad="myOnLoad()">
<div id="present" onClick="check()">Test</div>
<form>
<input type="file" size="100" id="qq" name="finput" />
<input type="file" size="100" name="finput" /><br/>
</form>
</body>
</html>
Citations
- This extension has been put on PCJapan (Softbank Creative in Japan) October 2007
- LifeHacker talked about this extension in May 2006
See Also
Thanks
To the various people that have reported bug and tested the extension and in particular
- Jaakko Helle
- TowerData
Comments
Please post here comments and bugs
