ReactJS Blueprints

Taking a picture

We'll be using the camera API to take pictures for our image app. Through this interface, it is possible to take pictures with a native camera device as well as select pictures to upload them through a web page.

The API is set up by adding an input element with type="file" and an accept attribute to declare to our component that it accepts images.

The ReactJS JSX looks like this:

<Input type="file" label="Camera" onChange={this.takePhoto}
  help="Click to snap a photo" accept="image/*" />

When a user activates the element, they are presented with an option to choose a file or take a picture with the built-in camera (if available). The user must accept the picture before it's sent to the <input type="file"> element, and its onchange ...