Problem/Motivation

It is not currently possible for an image file field to access the camera on a mobile device, allowing users to take and upload a photo in a single step.

Proposed resolution

This SO question describes what is needed in the HTML5 input tag to make this possible. @cafuego's image_mobile_camera sandbox project implements this using javascript. It is proposed that we add it to core so that no js is needed.

In this issue, we should focus only on implementing this for image fields. In a future, separate issue, this could also be implemented for images inserted into text fields using a WYSIWYG editor.

Remaining tasks

Document the API addition (see below) somewhere

User interface changes

API changes

Classes with a formElement() method can set $element['#accept'] to a string value to be included in the HTML5 input tag's attributes.

Data model changes

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

martin_q created an issue. See original summary.

martin_q’s picture

Issue summary: View changes
martin_q’s picture

Working patch attached - with thanks to @swentel and @saphyel
...and a picture of our successful test:

martin_q’s picture

Status: Active » Needs review
martin_q’s picture

Issue summary: View changes
Gábor Hojtsy’s picture

Issue tags: +sprint, +Needs tests

Looks fantastic, but I think this needs tests :)

Saphyel’s picture

Issue summary: View changes
Status: Needs review » Active
FileSize
2.4 KB

Test added @Gábor Hojtsy

chr.fritsch’s picture

martin_q’s picture

Status: Active » Needs review
Dave Reid’s picture

Should we move this patch to #2307451: Image file fields do not limit accepted file types in HTML?

I had imagined this being an option on the field widget that would be enabled by default. Do we think it's worthwhile to make this configurable? I feel like it would be (plus then it has the advantage of helping advertise that this feature is available).

I'm starting to wonder if we should actually be setting the #accept attributes using the allowed file extensions for the image field instead of 'image/*' which allows any image to be uploaded, instead of the allowed extensions. I did a quick test with http://codepen.io/anon/pen/qNqbJL which worked for me on Chrome and Firefox for Android, but could maybe use some additional validation to prove it still works with extensions instead of the wildcard.

martin_q’s picture

@Dave Reid, thanks for pointing out that there's already an issue for this (I'd been told there wasn't, but I didn't check!) I too had just started wondering whether in fact it would make sense to add this to all file field widgets (that can accept images) rather than just image fields. That said, I'll need help understanding how to implement slashsrm's two recommendations in that issue.

I'm in two minds about making it configurable. I can't conceive of a use case where you'd want to switch it off. And I also wonder whether we need to advertise it; I kind of feel like most people would just expect this to work anyway.

I do think you're right about the extensions and I'll try to implement this - though I agree it needs some more testing in the wild to be sure that it works everywhere.

swentel’s picture

Issue tags: -Needs tests

I'm starting to wonder if we should actually be setting the #accept attributes using the allowed file extensions for the image field instead of 'image/*' which allows any image to be uploaded, instead of the allowed extensions

Makes sense indeed, it's totally possible someone doesn't want to let users upload a certain extension, especially since it's configurable.

Saphyel’s picture

I test the extension and as I was thinking drupal already validate it just after the upload, and even if you specify the extension (in our new code) it works in the same way (no difference at all) so this is only useful for make sure that the camera only allow certain options (like only a picture, or video or audio)

About make it configurable why are you going to disallow this option? this only allow upload a picture faster if the user wants to and it will be potentially the same picture (I don't see the point, maybe can you give an example that could make sense)

My only concern is about should be image specific or file in general (because you may allow to upload images to your site as files, or upload a video/audio from the camera directly)

Dave Reid’s picture

Note, for image field, configurable I assume is a checkbox that is enabled by default. It would be something the user could turn off, but for default it would be available.

Dave Reid’s picture

Should we move this to #2307451: Image file fields do not limit accepted file types in HTML then for consolidation?

Saphyel’s picture

@Dave-Reid we understood your idea, but we still don't know why someone wants to disallow one option that makes easy the life of the end user

martin_q’s picture

Status: Needs review » Closed (duplicate)

Still not sure of the real-life use case for switching it off.
I'll move it over to issue #2307451: Image file fields do not limit accepted file types in HTML though.

Gábor Hojtsy’s picture

Issue tags: -sprint
Gábor Hojtsy’s picture

Issue tags: -Media Initiative +D8Media

Fix to use current tag.

Joel MMCC’s picture

My philosophy: never deny implementing a feature or configuration option just because you can’t think of a real-world usage case. Someone else may want it for some reason that you can’t at present think of.

One I can think of is that users may not want their cameras draining their batteries while they’re just trying to update some text. Another is that a particular image field’s purpose may not be suitable for a camera image, such as one intended for uploading digital-only artwork generated in some application for a contest.

Also, how well do browsers implement this? Can the user easily switch between multiple cameras that their device may have (most smartphones and tablets these days have at least two), or will they be fumbling trying to aim the front “selfie” camera at some scenery while trying to tap the buttons to accept it instead of being able to easily switch to the rear camera?