Mobile upload using a different image button immediately after selecting image? - css

Question

I would like to use my own .png image to trigger a
<input type="file" id="pictureCapture" accept="image/*; capture=camera" />
and then instantly upload the image to an MVC controller.
So, the first question is how to replace the input tag with a clickable image?
And second, thus far, I've only seen file upload as a 2 part process. You click the browse button, select your file, then click Upload to send the file.
How do I consolidate it so that right after you select the file, it uploads?
Is there a 3rd party control that does all this for me?

Answer 1

Here's what I ended up doing:
Html:
<input type="file" id="pictureCapture" accept="image/*; capture=camera" style="visibility:hidden;" />
<img src="#(Url.Content("~/Images/Mobile/Camera.png"))" />
Javascript:
<script>
$("#uploadPhotoFromCamera").click(function (e) {
e.preventDefault();
$("#pictureCapture").trigger("click");
});
$('#pictureCapture').on("change", function () {
var formdata = new FormData(); //FormData object
var fileInput = document.getElementById('pictureCapture');
//Iterating through each files selected in fileInput
for (i = 0; i < fileInput.files.length; i++) {
//Appending each file to FormData object
formdata.append(fileInput.files[i].name, fileInput.files[i]);
}
//Creating an XMLHttpRequest and sending
var xhr = new XMLHttpRequest();
xhr.open('POST', '#(Url.Action("UploadMobile", "Document"))')
xhr.send(formdata);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
alert('success');
}
}
return false;
});
</script>
Controller:
public virtual ActionResult UploadMobile()
{
List<HttpPostedFileBase> files = new List<HttpPostedFileBase>();
for (int i = 0; i < Request.Files.Count; i++)
{
files.Add(Request.Files[i]); //Uploaded file
}
// Do whatever now with your list of files
return Json("Uploaded " + Request.Files.Count + " files");
}