Should a file location field be provided up-front as part of a file upload feature?

Question

Where there is the option to upload a single file to a website, what is the most intuitive method of doing this?

There seem to be two obvious options:

1. Give the user the location field and 'browse' button where they can specify the specific path of the item
2. Just to give them a single Upload button that acts as the browse one in the first example.

The first example seems to be the most commonplace, but is it actually necessary? Do many people actually paste in the file location into this field and then choose Upload, or (as I suspect) is the 'Browse' button itself the most commonly used route, thereby removing the need for the field entry?

I also suspect that having both a Browse and an Upload button available may cause additional confusion as to which button to use (i.e. user may not know the file location immediately so providing the field first may put them off even trying "I don't know what to type in that field..." Also, if they do paste the file location into the field what is the instinctive next action - do you press 'Browse' or 'Upload'?)

So basically, my question is: Why do file upload options give the ability to paste in a file location when a single upload button would take care of both browse and upload in one action?

Interestingly, Imgur uses both options. imgur.com directly has the upload button, but uploading an image to imgur via UX.SE provided the 'Browse' version.

Answer 1

The funny thing is browsers already made this choice for your users, as you're using a web form.

Here's Firefox 6:

Clicking the input field opens your Browse dialog. You can't type into the field, you can't paste the location to this field.

Here's IE8:

That text field doesn't work. Clicking doesn't let you type. You can double click it to open the Browse dialog.

Chrome at least has the decency to not give you a fake text input field:

In all cases all the "text field" really does is show the path of the file AFTER you've used the browse dialog. If anything the text input is a holdover of an older web, I can't see any reason not to use a single button to do the same, the only benefit you get out of the text field is showing the user the path to the file they uploaded--your site can do this with some nice styling or even provide a thumbnail, which is more helpful.

If your users want to paste the directory path they can paste the path into the Browse dialog window. You're really just doubling up on that functionality if you do manage to provide it, and people are more likely familiar with their operating system's Browse dialog than your website's form.

Bottom line, if your users use a standard browser, they probably use the browse dialog exclusively. They may not even know what to do with a text input anymore, since that option was taken from them by the browser.

Answer 2

There are people that will type in or copy the file name and location. If you are working on a file that is at the end of a long directory structure, and you have it open, it is often easier to just copy the link to the file and paste that in than browse to it.

For other people it is easier to browse to that file and select it.

For both of them there is a good reason to have the select a file field, as it serves as a confirmation field allowing you to see the file before you choose to upload it. People often open the wrong file by mistake, so automatically uploading that file without a check before hand is usually a bad idea.

That said, the "upload" button should present some helpful error message if it is selected while there is no link to a file in the select a file field.

There are some situations where only having one method pick a file makes sense, but then why would you show a dialogue with only one button? They obviously clicked on something before this, so adding this dialogue just doubles the actions that someone has to take to start choosing a file.

In summary, there are very few situations where I think the select a file field is not good to include.

Answer 3

I think it makes sense to have both options, especially if your users are not very evolved. Most desktop users are used to the functionality of having both options. Changing the status quo could result in users getting confused.

Answer 4

Here is what I'm going for with the new UI in one of my projects, it's a WordPress style; drag and drop to upload & select files option in one. And since it's an image upload function, I have put preview right beside it directly.

Here is a screenshot: