32

I have a simple form where a user may contribute a link or upload a document adding a title and optionally some notes.

What's the best UI for allowing for either a URL or a file (but not both)?

Improve this question
1
  • 3
    Ctrl+G in the text editor will open SO's own image field that does what you describe.
    – zzzzBov
    Commented May 30, 2012 at 17:31

11 Answers 11

Reset to default
31

Since this is a form, I would actually just provide two buttons inline to choose the image, and not a separate dialog or a set of radio buttons.

I believe this is actually better (in this instance) than having a single image button which opens a dialog to choose the option to then choose your picture. If you're choosing from your computer, the button on the main form would allow you to instantly open the file browse dialog as opposed to forcing the user to go through another dialog. Also, unlike radio-selection options (like the StackExchange option) both options are clearly present up front and are given equal weight.

An example of this would be the imgur upload control, shown below. I might update it to make it more clear that the "Computer" and "Web" buttons are a picture source by indicating "From Computer" and "From Web" or something similar.

enter image description here

Improve this answer
2
  • 1
    I totally agree re: SO's pattern being confusing. I'm thrown for a loop quite often by the sequence of controls to press.
    – peteorpeter
    Commented May 30, 2012 at 17:12
  • Yes, this is a very simple method of providing the two options equally and it fits in with our application quite nicely
    – Tom Carter
    Commented Jun 5, 2012 at 15:05
10

I think I would agree that one option should be more prominent than the other especially if there is a strong preference for one option. Perhaps something like this can work. enter image description here

Improve this answer
1
  • 2
    When the URL field is expanded, it gives an impression of the ability to upload 1 image per the 2 different methods.
    – dnbrv
    Commented May 30, 2012 at 18:10
8

Our very own Stack Exchange has this implemented relatively well (just click the image icon in the toolbar above the answer field):

enter image description here

Though, I would just improve the switch between the 2 modes by increasing the clicking affordance of the inactive method (right now it doesn't look clickable).

The key in this patterns is having some semblance of tabs: they clearly indicate the method of accessing the file.

Improve this answer
10
  • 10
    I find this control to be confusing - I screw it up frequently. The underlying pattern makes sense, but the graphic implementation is sooo bad. The "center-everything" layout is ragged in every way, it's not clear that "from my computer" isn't an action itself, and there is mix of three styles of button-looking elements that each do different things. For selecting the image input type tabs, iOS-style toggles, radio buttons, or vertical stacking would be better than a button bar.
    – peteorpeter
    Commented May 30, 2012 at 17:23
  • (I wouldn't recommend this as a pattern without some caveats.)
    – peteorpeter
    Commented May 30, 2012 at 17:24
  • 3
    Note that there is very little that can realistically be done to style the "choose file" component of the form - different browsers show it differently, and CSS support for styling it is terrible.
    – Erics
    Commented May 30, 2012 at 17:46
  • @peteorpeter: Good point about the problems with this visual implementation but vertical stacking is even more confusing because it gives the impressions of the ability to upload multiple files.
    – dnbrv
    Commented May 30, 2012 at 18:05
  • @Erics: It's possible to replace it with something custom but it takes a lot of JS to accomplish (see GMail's implementation of attachment command).
    – dnbrv
    Commented May 30, 2012 at 18:07
7

I like using link UI conventions in this case, because that is what the user is doing... linking.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
6

This is an old question but there are some great solutions in 2015 for this UI/UX....

StackExchange sites including this one...

enter image description here

enter image description here

Trello - choose upload option or paste in URL Popover/Modal...

enter image description here

Gmail Pick from existing upload or gallery

enter image description here

Gmail Upload from remote server by pasting in a URL - Preview is shown after it downloads the file for you too!

enter image description here

Gmail Select from computer hard drive or Drag and Drop to upload file

enter image description here

Improve this answer
1
  • Is there a standard way of doing this in 2023?
    – Vatsal
    Commented Sep 25, 2023 at 3:15
5

I think TinEye's approach is great, even though it does take up a lot of space.

TinEye's image uploader

Improve this answer
4

While I don't like having to click to choose an option, I think it's the lesser of several evils. Google does a good job with their image search input:

enter image description here

Improve this answer
1
  • I don't agree they do a good job here. But the basic idea of the control is good. Just not the execution of the GUI. A lot of things happening and text all over the place. It should say "Drag an image here or [Browse]" Also the "tabs" or whatever they are, aren't very clear they are formatted as normal links so is unclear exactly what they do.
    – Joakim
    Commented Sep 14, 2016 at 12:26
4

I was very pleased with how Pinterest handled this conundrum, but I thought it could be improved a little (and made more generic).

I created the below wireframe for an internal process, and would recommend it for you, too. Wherever it says "Product," substitute "image" or whatever element you intend. This wireframe was for a specific form to add products into our system, but it applies to anything.

Note that it starts with two clear paths, represented iconically and with simple wording. From either path, you can switch to the other. And if you go the URL path, if any clarification is needed on what element to upload, it's laid out for the user to make an easy selection.

enter image description here

Improve this answer
2

One thing I personally stay away from is putting both options equally visible on a same page.

Speaking generally, I'd say first determine whether from your or the point of view of your company, one option is more desirable than another. Do you expect one option to be more frequently used than another by your users? Unless, your and users points of view are conflicting in some difficult ways, Pick the primary one and make it the default. Of course, you'd want to have a clearly labeled alternative shown but when visual hierarchy is right, the alternative should look secondary to this default, primary option.

Improve this answer
2

Two possible options (that avoid an additional selection of the type of input) are:

  1. Selectively enabling/disabling the unused control
    When the user fills in the URL field, disable the file upload and vice-versa. Here it is important to clearly communicate the either-or relationship and give the user an clearly visible way to change his mind at any time. Clearing the used field, for example with a dedicated button, should then reenable the other field.

  2. Auto detection of input
    I don't think there is a straightforward way of auto-detecting the input in a regular HTML field and deciding which type of data it is, since the text field and file upload element are distinct controls.
    There might be a way around that with the new HTML drag & drop API which could be used to detect when a file is dragged onto a File/URL text input. Dragging in files from the desktop into a browser is not yet a common pattern though and has to be explained and implemented extremely carefully.

Improve this answer
1
  • Second options isn't going to work because Select a file... button next to a URL field looks weird.
    – dnbrv
    Commented May 30, 2012 at 15:14
1

I would use radio buttons to show the appropriate interface for either choice, but select by default the option you think people will use the most.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.