Support for capture attribute

[kevzettler]

Trying to use <input type="file" capture="camera"/ >and thecapture` attribute is not getting rendered

Doesn't look like its supported in the list at:
https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes

More information on capture at:
http://www.w3.org/TR/html-media-capture/#introduction

[jontewks]

What version of react are you using? The support for it is here: https://github.com/facebook/react/blob/master/src/renderers/dom/shared/HTMLDOMPropertyConfig.js#L60 and testing it really quickly kept the capture attribute on the rendered element. If you read the more information link you provided you'll see it expects an "accept" attribute on the input element, perhaps that's the issue you are experiencing?

[jontewks]

You were right about it missing from the docs tho, so I submitted #4788 to resolve.

[jimfb]

This was added in React 0.14, which you can play with in the beta, and the final release should be coming very soon now.

[milesj]

Anyway to get this in 0.13 right now? We need it desperately.

[sophiebits]

@milesj No, sorry. We'll release 0.14 soon (RC this week, probably) but before then you can simply access the DOM node with a ref and set the attribute manually.

[ccorcos]

I'm using 14.2 and this doesnt appear to be fixed.

[jimfb]

@ccorcos As per #4784 (comment), it appears to be in the code. Do you have a simple jsfiddle that demonstrates your issue?

[ccorcos]

https://jsfiddle.net/ccorcos/jqyxqe0d/4/

<input type="file" accept="image/*" capture="camera"/> turns into <input type="file" accept="image/*" capture/>

[jimfb]

According to the spec, capture is a boolean attribute: http://www.w3.org/TR/html-media-capture/#the-capture-attribute

There are some sources places that specify string values for the capture attribute (http://mobilehtml5.org/ts/?id=23) and some browsers appear to honor that, but it doesn't look like it's part of the spec. Furthermore, the spec seems to indicate that users specify the capture control type using the accept attribute. As far as I can tell, supporting the string value of capture goes against the specification and provides no value above/beyond what is already provided by the accept attribute.

Do you know of a situation where the capture attribute's string value is meaningful, and the accept attribute is not a viable alternative?

[ccorcos]

I'm just trying to deal with some quirks on old Android browsers. Some stackoverflow questions pointed toward the need for capture="camera" for it to work. 👎

[jimfb]

@zpao Is there any harm in specifying this as a must_use_attribute that takes in a string? Seems like that would allow us to support legacy browsers, and the boolean_attribute logic is only really useful if you're using properties instead of attributes, right?

[sophiebits]

No harm. (@syranide's pending DOM removeAttribute pull request should change everything to use attributes.)

[zpao]

It's unrealistic to support all quirks in all old browsers. It would be helpful to know which ones and if we should support then.

No harm

Not quite true (at least not based on my understand of what @jimfb was saying)

The boolean logic currently allows us to specify capture={true} and then we can output the correct thing in markup, which is either the empty string or "capture". Other values aren't valid. If we remove the HAS_BOOLEAN_VALUE then capture={true} will output capture="true" which is invalid. https://html.spec.whatwg.org/multipage/infrastructure.html#boolean-attributes. We could make it HAS_OVERLOADED_BOOLEAN_VALUE (which is what the spec for the download attr requires). It will handle true/false correctly and pass the string through if it gets that.

[BohdanTkachenko]

So is there any walkaround way to force set string value to capture attribute?

This is really important for mobile browsers where you can specify which camera to use when capturing image (front / rear) and since WebRTC is not supported in Safari and iOS, it seems to be the only way to get camera image from user.

See for example: https://codepen.io/Guntrisoft/details/OpBOrE

UPD: Seems that simply adding is attribute to an element solves the issue, for example:

<input
  type="file"
  accept=".jpg,.jpeg"
  is capture="user"
/>

Found solution here

[maxschmeling]

The is attribute doesn't seem to solve this in React 16. Is there any other workaround?