Since the last post, we’ve received a huge number of requests and questions about drag&dropping files onto your beloved browser.
The mechanism behind is quite simple: the Ajax library, the DOM element wrapper and the Asset component are assuring most of the work (handling the upload and the callback process), the DDM detects the dragged files, then your browser is doing the rest, defining the interaction between your desktop and the file input (nicely styled of course).
By now, two browsers are playing well with the demo (Safari 4, Chrome 2+) while others degrades gracefully.
Here’s the code :
Swell.Core.Event.add('upload', 'change', function() { $('loader').show(); $('foorm').xhr(function() { var currentEl = $('upload').current(); $('filelist').show(); for (var i = 0, len = currentEl.files.length; i < len; i++) { $('filelist').appendHTML(currentEl.files.item(i).fileName + ' '); } var imgs = this.responseText.split('|'); new Swell.Core.Asset().load('img', imgs, function(img) { $('loader').hide(); $(img).appendTo('image-container'); }); }); });
The demo:
And the video:
Tags: desktop to browser drag & drop, drag&drop, Javascript, playground, showcase
July 28th, 2009 at 5:33 pm
Thats crazy, I want this stuff
July 28th, 2009 at 5:44 pm
[...] just added a little demo of their drag and drop prototype. it work with Safari4 and Chrome2, I suppose this have something [...]
July 28th, 2009 at 8:06 pm
[...] This post was Twitted by julius_eckert [...]
July 28th, 2009 at 8:07 pm
[...] post: Drag and drop files from your desktop to your browser « SwellJS … Filed under Uncategorized « Phoenix 1.0 [pes2009][xbox 360] – GU1337 New to retail [...]
July 28th, 2009 at 8:28 pm
[...] Swell to be able to drag and drop between Web and desktop Also there is a demo on their web page: Drag and drop files from your desktop to your browser. They say “two browsers are playing well with the demo (Safari 4, Chrome 2+) while others [...]
July 28th, 2009 at 11:02 pm
That’s just amazing stuff! I’m so stunned! Wow! Go ahead guys! It will change the web 2.0 for sure!
July 29th, 2009 at 2:59 am
Congratulations guys,
This is an amazing step forward and has great potential, for instance, I’m so impressed with it that I have already used it to create a proof of concept Drupal module.
Can’t wait to see what you do next.
July 29th, 2009 at 1:36 pm
Any ideas, of doing it the other way round if at all. Drag-Dropping a file hyperlink on desktop from a web page. So that we get the file without the download dialogue. Same as on Macs as we see today ?
July 29th, 2009 at 4:02 pm
@Amit:
Unfortunately this is not possible at the time, you can’t bypass the file download dialog, at least on Windows.
July 30th, 2009 at 11:38 pm
Hi Guys,
Just discovered that you can get somewhat Firefox support for this, however it requires a 3rd party Firefox add-in. The add-in can be found at http://www.teslacore.it/wiki/index.php?title=DragDropUpload.
Also, I have put together a brief video showing off the Drupal module that I put together. Available at http://www.deciphered.net/blog/2009/07/29/drupal_drag_and_drop_file_upload_demo.
I would be more than happy to share the code with you to show you how I achieved what I did.
Cheers,
Stuart Clark
July 31st, 2009 at 8:39 am
@Stuart:
We’ve already heard about the Firefox add-in, but we wanted to stick to browser standards without using any third-party extension.
Congratulations for the plugin you’ve done, we’re more than happy to see real-life usages of Swell’s DD!
As we are preparing a public website with Swell’s documentation, implementations focuses and API docs, we thought that it would be nice to have a nice explanation on how you’ve integrated SwellJS into your project as well as having an overview of goodsides and downsides.
Great work!
July 31st, 2009 at 10:43 am
Simply nice – get rid of the could improve usability (if more users get used to drag-n-drop)
August 1st, 2009 at 1:14 pm
hi, do you think to make this example opensource?
August 1st, 2009 at 5:24 pm
[...] Drag and drop files from your desktop to your browser [SwellJS - Jul 28, 2009] – The mechanism behind is quite simple: the Ajax library, the DOM element wrapper and the Asset component are assuring most of the work (handling the upload and the callback process), the DDM detects the dragged files, then your browser is doing the rest, defining the interaction between your desktop and the file input (nicely styled of course) [...]
August 1st, 2009 at 10:53 pm
@luca
This example is BSD-licensed.
August 5th, 2009 at 2:20 am
Is there a chance this will work with Firefox in the near future? That would increase use substantially.
August 5th, 2009 at 9:54 am
We still don’t know much about FF 3.6+ and its planned features, but it should be implemented… for 2010.
August 26th, 2009 at 5:02 am
Great work man, I had to do this using java applets and its super slow and makes the browser crash some times.
I’ve seen on the net one guy has done this using a firefox only implementation, so if you could use it then it’s only IE left!
http://cultivatewebdesign.com.au/blog/cross-browser-drag-and-drop-file-upload/
August 26th, 2009 at 3:32 pm
We won’t be using any thirdparty script for the cross-browser implementation, btw this ticket shows us that the next FF version may support DnD file upload!
September 1st, 2009 at 3:36 am
You guys might be interested in this http://www.thecssninja.com/javascript/drag-and-drop-upload it demonstrates drag’n drop file uploading in Firefox 3.6 without the need for a file input.
September 1st, 2009 at 9:41 am
Thanks for your input! So FF 3.6 did implement the dataTransfer files property, great news
September 1st, 2009 at 9:43 am
Another item in the @todo list, dammit!
October 1st, 2009 at 6:32 pm
Hi Swell ! you are such a big fish in sea. Great !!!
i have one question on Desktop to Web functionality.
can you Drag N Drop Word, any voice file or Text File from “Desktop” to “Web” ??
if Yes so please give me link to download !!!
Such a nice Work !!
Regards,
Hitesh Panchal
October 5th, 2009 at 12:10 pm
You can practically drag and drop anything from the desktop with the method exposed on this example. For now we are still lacking documentation so I would recommend that you wait for the main website to be done before using it.
April 16th, 2010 at 9:38 am
this doesnt work anymore
May 7th, 2010 at 5:11 pm
Doesn’t work for me… FireFox 3.6.3 on Mac…
Honestly… these things always break, whether someone builds a flash application or what not. They never work.
Good effort though.
June 6th, 2010 at 5:40 pm
[...] Drag and drop files from your desktop to your browser « SwellJS – another big fish in the sea. Jún 6th, 2010 | Category: JavaScript [...]
August 20th, 2010 at 12:33 pm
Bridging desktop and browser with Swell’s native Drag and Drop implementation…
Today is a big step forward for us, we are proud to feature the first showcase of our Drag&Drop implementation. This is not what you may think about, you may think about drag & drop as being stuck inside your browser window but today what we……
October 5th, 2010 at 7:03 am
Hello
any can guide me how can i use this code for my website . how i can get whole the code with all library to run this on my site
thanks
December 28th, 2010 at 5:07 pm
thank you for this script. it’s amazing!
any chance to see the php code for the upload? (upload.php file)
November 19th, 2011 at 1:02 am
I have been checking out a few of your posts and i can state pretty clever stuff. I will surely bookmark your website.
January 5th, 2012 at 5:18 pm
I might make the statement that We are near waking when we dream we are dreaming. or potentially A true friend is the most precious of all possessions and the one we take the least thought about acquiring.
April 28th, 2012 at 11:15 pm
plugin…
[...]Drag and drop files from your desktop to your browser « SwellJS – another big fish in the sea[...]…
May 25th, 2012 at 10:00 am
I Am Going To have to come back again whenever my course load lets up – nevertheless I am taking your Feed so i can go through your site offline. Cheers.
January 4th, 2013 at 1:47 am
If some one desires expert view regarding blogging then i advise
him/her to visit this weblog, Keep up the good job.
April 10th, 2013 at 4:54 am
Hi there, You have done a great job. I’ll certainly digg it and personally recommend to my friends. I’m sure they will be benefited from this website.
May 4th, 2013 at 6:47 pm
I have been surfing online more than 3 hours lately, but I never discovered any attention-grabbing article like yours. It is pretty value enough for me. In my view, if all webmasters and bloggers made excellent content as you probably did, the internet will likely be a lot more useful than ever before.