Examples

The following examples demonstrate how to give hints that it is preferred for the user to capture media of a specific MIME type using the media capture capabilities of the hosting device. Both a simple declarative example using an HTML form, as well as a more advanced example including scripting, are presented.

• To take a picture using the device's user-facing camera, and upload the picture taken using an HTML form:

            <form action="server.cgi" method="post" enctype="multipart/form-data">
              <input type="file" name="image" accept="image/*" capture="user">
              <input type="submit" value="Upload">
            </form>
          

• Or alternatively, to capture video using the device's local video camera facing the environment:

            <form action="server.cgi" method="post" enctype="multipart/form-data">
              <input type="file" name="video" accept="video/*" capture="environment">
              <input type="submit" value="Upload">
            </form>
          

• Or alternatively, to capture audio using the device's local microphone (without preferred facing mode defined, falls back to the implementation-specific default facing mode):

            <form action="server.cgi" method="post" enctype="multipart/form-data">
              <input type="file" name="audio" accept="audio/*" capture>
              <input type="submit" value="Upload">
            </form>
          

• For more advanced use cases, specify the [^input/capture^] attribute in markup:

            <input type="file" accept="image/*" capture>
            <canvas></canvas>
          

  And handle the file upload in script via `XMLHttpRequest`:

            var input = document.querySelector('input[type=file]'); // see Example 4
  
            input.onchange = function () {
              var file = input.files[0];
  
              upload(file);
              drawOnCanvas(file);   // see Example 6
              displayAsImage(file); // see Example 7
            };
  
            function upload(file) {
              var form = new FormData(),
                  xhr = new XMLHttpRequest();
  
              form.append('image', file);
              xhr.open('post', 'server.php', true);
              xhr.send(form);
            }
          

  The image can also be displayed on the client-side without uploading it e.g. for client-side image editing purposes, using the {{FileReader}} and a [^canvas^] element:

            function drawOnCanvas(file) {
              var reader = new FileReader();
  
              reader.onload = function (e) {
                var dataURL = e.target.result,
                    c = document.querySelector('canvas'), // see Example 4
                    ctx = c.getContext('2d'),
                    img = new Image();
  
                img.onload = function() {
                  c.width = img.width;
                  c.height = img.height;
                  ctx.drawImage(img, 0, 0);
                };
  
                img.src = dataURL;
              };
  
              reader.readAsDataURL(file);
            }
          

  Or alternatively, to just display the image, using the {{URL/createObjectURL()}} method and an [^img^] element:

            function displayAsImage(file) {
              var imgURL = URL.createObjectURL(file),
                  img = document.createElement('img');
  
              img.onload = function() {
                URL.revokeObjectURL(imgURL);
              };
  
              img.src = imgURL;
              document.body.appendChild(img);
            }
          

When an [^input^] element's [^input/accept^] attribute is set to image/* and the [^input/capture^] attribute is specified as in the [[[#example-1]]] or [[[#example-4]]], the file picker can be rendered as presented below:

When the attribute is not specified, the file picker can be rendered as represented below: