html5 <input type="file" accept="image/*" capture="camera"> display as image rather than "choose file" button

I've been looking into using html 5 <input type="file" accept="image/*" capture="camera"> to take a picture from my webapp and upload the image to the database using php - this is now working correctly.

However, the only way I can seem to find to display the "take picture" option is by a text field that has a button in it called "choose file"

Is there a way to be able to click on the existing image to open up the take picture options, then display the new image instead of the existing picture after the picture has been taken/file selected by the user? They should then click on the "upload" button if they are happy to save the image.

See JS fiddle here, hopefully this makes some sense! http://jsfiddle.net/6dxGY/

Solution 1:

You have to use Javascript Filereader for this. (Introduction into filereader-api: http://www.html5rocks.com/en/tutorials/file/dndfiles/)

Once the user have choose a image you can read the file-path of the chosen image and place it into your html.

Example:

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

Javascript:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

Solution 2:

I know this is an old question but I came across it while trying to solve this same issue. I thought it'd be worth sharing this solution I hadn't found anywhere else.

Basically the solution is to use CSS to hide the <input> element and style a <label> around it to look like a button. Click the 'Run code snippet' button to see the results.

I had used a JavaScript solution before that worked fine too but it is nice to solve a 'presentation' issue with just CSS.

label.cameraButton {
  display: inline-block;
  margin: 1em 0;

  /* Styles to make it look like a button */
  padding: 0.5em;
  border: 2px solid #666;
  border-color: #EEE #CCC #CCC #EEE;
  background-color: #DDD;
}

/* Look like a clicked/depressed button */
label.cameraButton:active {
  border-color: #CCC #EEE #EEE #CCC;
}

/* This is the part that actually hides the 'Choose file' text box for camera inputs */
label.cameraButton input[accept*="camera"] {
  display: none;
}

<!DOCTYPE html>
<html>

<head>
  <title>Nice image capture button</title>
</head>

<body>
  <label class="cameraButton">Take a picture
    <input type="file" accept="image/*;capture=camera">
  </label>
</body>

</html>