Forums

I have a couple forms that use file uploads. One has photos uploaded and the other has document-type files. I'm trying to optimize the user experience so less people get lost.

When you select Choose File from Android Lollipop, the Choose an action dialog shows options of Android System, Voice, Recorder, and Documents. If you are persistent, you will eventually get to the camera or a way to browse your gallery. But I believe many people do not make it that far and give up.

What is the proper/best practices way to setup forms that have uploads from mobile devices? I know the options vary based on OS and version, but I'm hopeful there's some form of best practice that tells the browser what is expected and helps the visitor select the appropriate app to find the right type of file.

I searched the forums and didn't find anything related, but if I just missed it in the documentation a point in the right direction would be appreciated.

Hi flywheel.

Sorry, I don't have anything useful to offer. Maybe asking the question on StackOverFlow would get you more useful information. I don't have an Android device to test, I do recall that there were naming problems in Apple devices (there is a FAQ about that IIRC).

Bob

Thanks. This is a genuine question and not any form of a dig or sarcasm: do you intend or have a desire to the upload file functionality to work with mobile devices?

It would be great functionality that I would pay for if the file selection and upload process was clean and efficient across iOS and Android devices.

It seems like the solution (on Android first) is telling the browser what type of file is expected to be uploaded so that the OS can display options for the correct types of apps to choose a file.

I'll report back if I learn anything of use. I will put a question on StackOverflow as well.

Hi flywheel,

That's really a question for Max - the owner and developer - rather than for me. It would clearly be helpful if it worked smoothly - though on the other hand I can only recall this being raised once before (the question then was about file naming) so it may not be top of his to-do list.

Bob

Hey Bob,

I did a little research and feel I have something to contribute to the community.

Mobile devices use a few variables in the <input> tag to decide what to do. CF already includes type="file", which handles the desktop upload experience. It does, however, leave mobile devices confused and makes the app selection for upload unclean (showing Android System, Voice Recorder, etc and no file browser or photo gallery).

To fix this go to Designer > File Field (for each upload) > Extra Params

In the extra params box add this line to indicate you want a photo and prompt mobile users with their photo galleries AND file browsers:

accept=image/*

If you want to force users to take a photo right then with their phone (and not have access to browsing files), add this line in addition to the accept code:

capture=camera

But here's the big thing: using the accept=image/* code allows ALL file types to get uploaded and presents users with file browsers AND photo galleries. That code *should* be able to safely be added to all file fields by default to greatly improve mobile functionality with no change to the desktop experience, regardless of whether the desired file is an image or not. In fact, leaving out the image tag presents the user with other system apps that aren't relevant or aren't apps people are used to using. If it's something you want to incorporate into the CF core by default, hopefully I was of help.

If you have any questions please let me know.