Drag n Drop Files to Webpage Form Area

11 Jan 2007 - 5:49am
7 years ago
21 replies
3280 reads
Anton T
2007

Dear friends,

I got fairly simple idea that could greatly heighten the usability of
many web based applications.

It's about dragging and dropping files to webpage form areas for
uploading files to a server. -A feature I believe is greatly needed. It
is posted on:

http://www.whynot.net/ideas/3102

I'd like your opinion on it, since I believe I haven't fully realized
the full ramification of this feature.

Thank you for your time,

-Anton Tandiono

Comments

11 Jan 2007 - 9:56am
Esteban Barahona
2006

so, this is like ftp over html? Have you thought of the way it can be
implemented? A box/container in the website? Or a pop-up that works like an
ftp folder/carpet (drag 'n drop, ctrl-c ctrl-p)?

2007/1/11, Anton T <anton.t en gmx.de>:
>
> Dear friends,
>
> I got fairly simple idea that could greatly heighten the usability of
> many web based applications.
>
> It's about dragging and dropping files to webpage form areas for
> uploading files to a server. -A feature I believe is greatly needed. It
> is posted on:
>
>
> http://www.whynot.net/ideas/3102
>
>
> I'd like your opinion on it, since I believe I haven't fully realized
> the full ramification of this feature.
>
>
> Thank you for your time,
>
> -Anton Tandiono
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss en ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists en ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

--
http://www.zensui.org

11 Jan 2007 - 10:54am
Josh
2006

The idea is great. Obviously it would require a good amount of usability
testing especially because the users would be visually switching between the
web browser and their desktop or finder/folders.

I can't count the number of times I've run into problems with the file input
form element as a barrier to optimization. You can check out how many other
people are struggling with implementations of it by taking a look at how the
social networking, online personals, and photo sharing sites deal with it.
For many of these sites, the business requirement is to gather as many
photos as possible (each photo is considered a valuable asset), but the
1-at-a-time nature of the current form element practically forces many
companies to create downloadable applications, or design very cumbersome
interfaces.

If you have time, check out the similarities between the photo upload pages
on some very popular sites:

Flickr
Myspace
Friendster
JDate

What are the odds they wish they could do it differently?

- Josh Viney

11 Jan 2007 - 11:26am
Dan Saffer
2003

On Jan 11, 2007, at 3:49 AM, Anton T wrote:

> It's about dragging and dropping files to webpage form areas for
> uploading files to a server. -A feature I believe is greatly
> needed. It
> is posted on:

This would break the drag and drop conventions in some significant
ways. Dropping a file onto a folder places the file into that folder.
Dropping a file onto an application launches the file in the
application. What you are proposing--dropping a file into an
application that doesn't launch but instead uploads the file--changes
the convention. And for me, before I do that, I'd have to see some
serious gains in usefulness and usability, and I'm not yet sold on that.

Dan

11 Jan 2007 - 11:50am
Robert Hoekman, Jr.
2005

Hate to break up the stream of consciousness here, but you can already drag
and drop files onto a web page, using a Java Applet. Most of the
implementations pretty much suck, because it's a Java Applet and no one can
seem to design a good one, but it can already be done.

Dragging files onto a form field probably wouldn't take much additional
work.

-r-

On 1/11/07, Dan Saffer <dan at odannyboy.com> wrote:
>
>
> On Jan 11, 2007, at 3:49 AM, Anton T wrote:
>
> > It's about dragging and dropping files to webpage form areas for
> > uploading files to a server. -A feature I believe is greatly
> > needed. It
> > is posted on:
>
> This would break the drag and drop conventions in some significant
> ways. Dropping a file onto a folder places the file into that folder.
> Dropping a file onto an application launches the file in the
> application. What you are proposing--dropping a file into an
> application that doesn't launch but instead uploads the file--changes
> the convention. And for me, before I do that, I'd have to see some
> serious gains in usefulness and usability, and I'm not yet sold on that.
>
> Dan
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

11 Jan 2007 - 11:39am
.pauric
2006

"What you are proposing--dropping a file into an application that doesn't
launch but instead uploads the file--changes the convention."

To clarify, what is being put forward is the ability to drop a selection in
to a construct -within- a window, in this case the browser. Similar to
dropping a selection in to a folder within Finder or Windows Explorer.

This is possible with this ff extension:
https://addons.mozilla.org/firefox/2190/

regards - pauric

On 1/11/07, Dan Saffer <dan at odannyboy.com> wrote:
>
>
> On Jan 11, 2007, at 3:49 AM, Anton T wrote:
>
> > It's about dragging and dropping files to webpage form areas for
> > uploading files to a server. -A feature I believe is greatly
> > needed. It
> > is posted on:
>
> This would break the drag and drop conventions in some significant
> ways. Dropping a file onto a folder places the file into that folder.
> Dropping a file onto an application launches the file in the
> application. What you are proposing--dropping a file into an
> application that doesn't launch but instead uploads the file--changes
> the convention. And for me, before I do that, I'd have to see some
> serious gains in usefulness and usability, and I'm not yet sold on that.
>
> Dan
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

--
Jnr. designabilityhitect & interinfofaceactioneer.
The more I learn, the less I seem to know.

11 Jan 2007 - 11:50am
Oleh Kovalchuke
2006

On 1/11/07, Dan Saffer <dan at odannyboy.com> wrote:
>
>
> On Jan 11, 2007, at 3:49 AM, Anton T wrote:
>
> > It's about dragging and dropping files to webpage form areas for
> > uploading files to a server. -A feature I believe is greatly
> > needed.

I agree. Uploading files one at the time, the way it is done in various web
applications has always seemed clumsy to me.

This would break the drag and drop conventions in some significant
> ways. Dropping a file onto a folder places the file into that folder.
> Dropping a file onto an application launches the file in the
> application.
>
Not necessarily. For example in the CD burner 'Record Now' dropping files
from Explorer adds the files to the list to burn. This approach is efficient
because it uses familiar explorer interface: drag files from the already
open folder and push 'Burn' button in the Record Now. I use Record Now
instead of Nero precisely because of this neat feature - it is one step
add-on on top of familiar explorer interface, which I use all the time
anyway.

There is no confusion because the purpose of recieving box in the Record Now
is obvious - list files to be burned on CD. Same obvious purpose could be
indicated for the "recieving box" within web application.

--
Oleh Kovalchuke
Interaction Design is Design of Time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm

11 Jan 2007 - 11:55am
Robert Hoekman, Jr.
2005

> I agree. Uploading files one at the time, the way it is done in various
> web
> applications has always seemed clumsy to me.

Multi-file upload can also be done using Flash Player 9. Much more graceful.
See Box.net for an example.

-r-

11 Jan 2007 - 11:59am
Lorne Trudeau
2006

Seriously? A java applet? When was the last time you saw one of those
bad boys put to any good use? 1995? ;)
I think the original poster has a point. The existing standard for file
uploading via HTML is simply terrible. It shouldn't be necessary for
every web developer to create their own widget (and God forbid they
choose to use a java applet) to upload multiple files.
As for usability concerns ... surely it can't get much worse than the
current standard!
Cheers,
Lorne
-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
Robert Hoekman, Jr.
Sent: Thursday, January 11, 2007 9:50 AM
To: Dan Saffer
Cc: discuss at lists.interactiondesigners.com
Subject: Re: [IxDA Discuss] Drag n Drop Files to Webpage Form Area

Hate to break up the stream of consciousness here, but you can already
drag
and drop files onto a web page, using a Java Applet. Most of the
implementations pretty much suck, because it's a Java Applet and no one
can
seem to design a good one, but it can already be done.

Dragging files onto a form field probably wouldn't take much additional
work.

-r-

11 Jan 2007 - 12:04pm
Ari
2006

point well taken.

with Flash 8, you can perform file uploads via a SWF. this isn't ideal
but Flash is pretty flexible and the user penetration is much higher
than...cough..Java.

On 1/11/07, Lorne Trudeau <lorne.trudeau at number41media.com> wrote:
> Seriously? A java applet? When was the last time you saw one of those
> bad boys put to any good use? 1995? ;)
> I think the original poster has a point. The existing standard for file
> uploading via HTML is simply terrible. It shouldn't be necessary for
> every web developer to create their own widget (and God forbid they
> choose to use a java applet) to upload multiple files.
> As for usability concerns ... surely it can't get much worse than the
> current standard!
> Cheers,
> Lorne
> -----Original Message-----
> From: discuss-bounces at lists.interactiondesigners.com
> [mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
> Robert Hoekman, Jr.
> Sent: Thursday, January 11, 2007 9:50 AM
> To: Dan Saffer
> Cc: discuss at lists.interactiondesigners.com
> Subject: Re: [IxDA Discuss] Drag n Drop Files to Webpage Form Area
>
> Hate to break up the stream of consciousness here, but you can already
> drag
> and drop files onto a web page, using a Java Applet. Most of the
> implementations pretty much suck, because it's a Java Applet and no one
> can
> seem to design a good one, but it can already be done.
>
> Dragging files onto a form field probably wouldn't take much additional
> work.
>
> -r-
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

--
----------------------------------------------------------------
http://www.flyingyogi.com

11 Jan 2007 - 11:53am
Sharma, Amit (S...
1969

Yahoo! Photos uses this feature (http://photos.yahoo.com). It's pretty simple and easy to use.

cheers,
Amit

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com]On Behalf Of Dan
Saffer
Sent: Thursday, January 11, 2007 9:27 AM
To: discuss at lists.interactiondesigners.com
Subject: Re: [IxDA Discuss] Drag n Drop Files to Webpage Form Area

On Jan 11, 2007, at 3:49 AM, Anton T wrote:

> It's about dragging and dropping files to webpage form areas for
> uploading files to a server. -A feature I believe is greatly
> needed. It
> is posted on:

This would break the drag and drop conventions in some significant
ways. Dropping a file onto a folder places the file into that folder.
Dropping a file onto an application launches the file in the
application. What you are proposing--dropping a file into an
application that doesn't launch but instead uploads the file--changes
the convention. And for me, before I do that, I'd have to see some
serious gains in usefulness and usability, and I'm not yet sold on that.

Dan

________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
List Guidelines ............ http://listguide.ixda.org/
List Help .................. http://listhelp.ixda.org/
(Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org
Home ....................... http://ixda.org/
Resource Library ........... http://resources.ixda.org
Notice: All email and instant messages (including attachments) sent to
or from Franklin Templeton Investments (FTI) personnel may be retained,
monitored and/or reviewed by FTI and its agents, or authorized
law enforcement personnel, without further notice or consent.

11 Jan 2007 - 11:38am
Stan Drozdetski
2007

MS SharePoint offers drag-and-drop functionality for file manipulation
in the "Explorer" view of its Document Libraries. It will come as no
surprise that this functionality is enabled through proprietary ASPX
calls, so the only browser that supports it is Internet Explorer.

Besides the implementation and compatibility hurdles, there are also
the usability and user comprehension challenges. We haven't had a
chance to do a formal inquiry yet, but anecdotal evidence suggests
that users at my company are often choosing not to utilize web-based
document libraries that are available to them, opting instead for the
traditional shared file folders - folders that don't require them to
use a web browser.

Stan Drozdetski

11 Jan 2007 - 12:43pm
jstanford
2003

Several online photo apps support photo upload via drag and drop using this
method. For example, Snapfish uses ActiveX to accomplish something very
similar.

Julie

________________________________
Julie Stanford
Principal, Sliced Bread Design
650-969-0400 / 800-969-0434 x706

11 Jan 2007 - 2:02pm
michel.milano
2005

Perhaps someone(s) have some opinions on why WebDav (as a
basis) has not achieved much traction for file uploads?

Big picture reasons, that is, other than the fact that only
IE had the capability to display a working "web folders"
link.

Technically, these kinds of uploads do not require a web
browser. OS X, for instance, simply connects to them as a
network location if you give an address. So does Win.

If you arent familiar with webdav, a place to start is
here:
http://webdav.org/other/faq.html

-m. milano

11 Jan 2007 - 2:37pm
DanielSouza
2007

my 2 cents: i tried yahoo photos multiple upload, and its very usable (and fast). it requires a mozilla extension, but its still great. IMHO, better than flickr ajax mode or picasa web app.

Daniel Souza
UX/AI

"Robert Hoekman, Jr." <rhoekmanjr at gmail.com> wrote: > I agree. Uploading files one at the time, the way it is done in various
> web
> applications has always seemed clumsy to me.

Multi-file upload can also be done using Flash Player 9. Much more graceful.
See Box.net for an example.

-r-
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
List Guidelines ............ http://listguide.ixda.org/
List Help .................. http://listhelp.ixda.org/
(Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org
Home ....................... http://ixda.org/
Resource Library ........... http://resources.ixda.org

---------------------------------
Cheap Talk? Check out Yahoo! Messenger's low PC-to-Phone call rates.

11 Jan 2007 - 4:14pm
Ari
2006

i only surf using Firefox or some derivative but FF/Mozilla users make
up c. 22% of the internet population so relying on an extension isn't
the best way to go.

On 1/11/07, Daniel V. Souza <davisouza at yahoo.com> wrote:
> my 2 cents: i tried yahoo photos multiple upload, and its very usable (and fast). it requires a mozilla extension, but its still great. IMHO, better than flickr ajax mode or picasa web app.
>
> Daniel Souza
> UX/AI
>
>
>
> "Robert Hoekman, Jr." <rhoekmanjr at gmail.com> wrote: > I agree. Uploading files one at the time, the way it is done in various
> > web
> > applications has always seemed clumsy to me.
>
>
> Multi-file upload can also be done using Flash Player 9. Much more graceful.
> See Box.net for an example.
>
> -r-
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>
>
>
> ---------------------------------
> Cheap Talk? Check out Yahoo! Messenger's low PC-to-Phone call rates.
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

--
----------------------------------------------------------------
http://www.flyingyogi.com

11 Jan 2007 - 5:09pm
Anton T
2007

To Josh Viney.

In reply to:
"The idea is great. Obviously it would require a good amount of usability
testing especially because the users would be visually switching between the
web browser and their desktop or finder/folders."

Of course some kind of "add" / "remove" button can be offered, so that people do the operation as they are used to now. That should not be such a problem. Backward compatibility.

-Anton

11 Jan 2007 - 5:24pm
Anton T
2007

In reply to:

=======

"This would break the drag and drop conventions in some significant
ways. Dropping a file onto a folder places the file into that folder.
Dropping a file onto an application launches the file in the
application. What you are proposing--dropping a file into an
application that doesn't launch but instead uploads the file--changes
the convention. And for me, before I do that, I'd have to see some
serious gains in usefulness and usability, and I'm not yet sold on that."

Dan
========

I see your concerns. The user must first select the area/box first and then paste it there. Or the focus could be shifted particularly to the area/box - visually that is - to tell the user that it is the field of focus. The files are not uploaded till the user clicks on "submit". The mapping is created by the browser.

Food for thought: A File Explorer is an application, but when you drop a file there, it does not open.

Another way could be as Esteban suggested: open up a file explorer window like a red carpet and let users drop their files in there.

As of usefulness in usability. Consider Web based Document management systems that allow users to "import" their files. Consider 20 Files. They have to select their files one-by-one. Of course there are workarounds: Java Applets. But:

a. they can be malicious -> security

b. it's slow to startup the applet -> usability

c. you would have to click through 2 popups that would allow the applet to access your local filesystem.

d. It's a "workaraound". The problem is still there.

That's my sales pitch.

-Anton

11 Jan 2007 - 5:34pm
Anton T
2007

Robert, this is an excerpt of my mail to Dan Saffer,

Of course there are workarounds: Java Applets. But:

a. they can be malicious -> security

b. it's slow to startup the applet -> usability

c. you would have to click through 2 popups that would allow the applet to access your local filesystem.

d. It's a "workaraound". The problem is still there.

======
Actually, browser manufacturers should be able to do this for single
files. They just need to implement it. But it gets a lot more
interesting when you could do this for multiple files.

======

-Anton

In reply to:
"Hate to break up the stream of consciousness here, but you can already drag
and drop files onto a web page, using a Java Applet. Most of the
implementations pretty much suck, because it's a Java Applet and no one can
seem to design a good one, but it can already be done.

Dragging files onto a form field probably wouldn't take much additional
work."

11 Jan 2007 - 5:47pm
Anton T
2007

Sorry for the double post, I'm new to this.

============
In reply to:
"so, this is like ftp over html? Have you thought of the way it can be
implemented? A box/container in the website? Or a pop-up that works like
an ftp folder/carpet (drag 'n drop, ctrl-c ctrl-p)?"
============

It should be simple POST over HTTP.

Please read: http://www.whynot.net/ideas/3102

Browsers would have to recognize the new tag and display a field so that
users can drop or paste files into that field. The browser would then
have to supply the correct data / values when the user clicks the
"Submit" button. Web developers know this procedure as sending data over
a POST method. Browser manufacturers and the W3C would have to play along.

Actually, browser manufacturers should be able to do this for single
files. They just need to implement it. But it gets a lot more
interesting when you could do this for multiple files.

So Yes: A box / container in the website. No pop up because that would
add to complexity.

I've visualised the idea and you can see it here:

http://picasaweb.google.com/passion.art.life/Ideas/photo#5018908595501021922

-Anton

11 Jan 2007 - 6:24pm
Anton T
2007

To clarify:

My original idea had 2 aspects:

1. Proposing a tag that is to be standardized by w3c
2. Getting browser makers to render and handle the tag correctly.

I know of workaraounds (Java was obvious, Flash not so obvious, AJAX I
am still unsure). But something as basic as this I believe should work
similarly across all browsers. Their behaviour should be uniform. The
FireFox extensions is one step in the direction - and I think every
browser should adopt it NOW. But can we extend this idea to multiple
files? It would most certainly help users and programmers alike.

I've sent my idea to W3C and am waiting for responses. If W3C does adopt
it, then browser makers would be more accepting in implementing it.

-Anton

More opinions are most welcome.

11 Jan 2007 - 5:51pm
Anton T
2007

In reply to:

=======

"This would break the drag and drop conventions in some significant
ways. Dropping a file onto a folder places the file into that folder.
Dropping a file onto an application launches the file in the
application. What you are proposing--dropping a file into an
application that doesn't launch but instead uploads the file--changes
the convention. And for me, before I do that, I'd have to see some
serious gains in usefulness and usability, and I'm not yet sold on that."

Dan
========

I see your concerns. The user must first select the area/box first and
then paste it there. Or the focus could be shifted particularly to the
area/box - visually that is - to tell the user that it is the field of
focus. The files are not uploaded till the user clicks on "submit". The
mapping is created by the browser.

Food for thought: A File Explorer is an application, but when you drop a
file there, it does not open.

Another way could be as Esteban suggested: open up a file explorer
window like a red carpet and let users drop their files in there.

As of usefulness in usability. Consider Web based Document management
systems that allow users to "import" their files. Consider 20 Files.
They have to select their files one-by-one. Of course there are
workarounds: Java Applets. But:
a. they can be malicious -> security

b. it's slow to startup the applet -> usability

c. you would have to click through 2 popups that would allow the applet
to access your local filesystem.

d. It's a "workaraound". The problem is still there.

That's my sales pitch.

-Anton

Syndicate content Get the feed