i.e. "Upload CTA" usually launches an OS based file selection interface on desktop devices. How would this work within a responsive design environment if the user is on a mobile browser. Would it / could it go directly into the native photo app so the user can choose a picture? Or would it not work at all?

  • This would be better suited for stackoverflow. I'd say it probably depends on how the plugin is written, but in the last responsive web app I did, we left mobile out because it wasn't done automatically.
    – Yisela
    Jan 18, 2013 at 1:31
  • 1
    @yisela I think this could very well be a User Expereience question, well suited for this site! Jan 18, 2013 at 8:40

3 Answers 3


To answer the last part of your question first: how uploading an image works on different devices depends largely on the support for and implementation of HTML5 features such as the File API and file form input fields. On iOS, for example, a prompt appears asking whether the user wants to take a picture with the camera or upload an existing file (see this screenshot).

The more interesting part of your question is how to make the design respond appropriately to those capabilities. What if the device does not support device uploads at all? One solution could be to provide the user with alternative ways for uploading the image. For example, many photo sharing sites allow you to post images via email. If the image is already uploaded elsewhere, you might want to allow the user to get the image from Dropbox, Google Drive or something similar. There is actually a product that tries to do all of this for you called filepicker.io (I have no affiliation with them, but I heard good things about them). Perhaps this is an option for you.

Depending on what you're designing, you may also want to respond to context. Perhaps uploading an image is not critical for completion of the current task, so even when users are on a device capable of uploading files, they might want to skip that step for now because they don't have the file at hand or cannot be bothered doing it on a small screen (especially when multiple files need to be uploaded). A user on a mobile device might be on the move, after all. In that case, it might be appropriate to allow the user to skip that step and complete it at a different time and/or on a different device.

All of these things matter when designing for the colourful mess that is the web and there are probably a lot more, depending on what you are trying to do.

  • 1
    Great idea about uploading elsewhere and being able to pull that item from that location instead of from the device. If you'd have to get upload working on all devices that means including lots of device detection, something responsive design should avoid.
    – JonW
    Jan 18, 2013 at 12:32

It is supported on opera browser via getusermedia feature of html5


If the user has to leave the app to fetch any data and come back to you application, then it doesn't give a good experience especially if it has to be done repeatedly.


It depends greatly on the device and how old its OS is and which browser is being used. You should definitely consider the scenario where the user is unable to upload something with his device.

If the user is able to upload, it happens often with a flow similar to that of desktop devices. The browser will open a dialog that allows the selection of media and will return the user to the form when the item has been selected. Some devices will also allow you to create media and select it in one go.

With uploading, orientation is also an issue. Some devices don't store images in their correct orientation. On iOS all camera images are stored in landscape orientation and rotated when their metadata suggests it should be displayed as a portrait image. Because of this, the upload of a portrait image will result in it being rotated 45 degrees. Your server-side logic will have to extract the intended orientation and rotate the image accordingly.

Providing a good UX for uploads across all devices will not be an easy task!

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.