According to the specification, the INPUT file element features an additional attribute named \u2018capture<\/strong>\u2019. The recommended syntax is shown below:<\/p>\n The accept <\/strong>attribute is not strictly related to the Media Capture specification. You can use it to simply suggest to the browser which files it has to show if you browse for a file to upload. Note also that the attribute is not widely supported by browsers, especially within \u00a0the mobile segment. For more information on the accept<\/strong> attribute you can check http:\/\/caniuse.com\/#feat=input-file-accept<\/a>.<\/p>\n The most relevant part of the Media Capture specification is the capture<\/strong> attribute. According to the specification, the attribute is a Boolean value that indicates the preferred mechanism for picking the file to upload. If you set the attribute, then you\u2019re telling the browser to use one of the capture mechanisms the device has available, instead of the file system.<\/p>\n This is the only the theory, however.<\/p>\n In practice, the net effect of the above HTML snippet changes depending on the browser and the form factor of the device (mobile, desktop). Furthermore, you\u2019ll be surprised to see that, in practice, mobile browsers mostly ignore the capture<\/strong> attribute and pay greater account to the value of the accept<\/strong> attribute.<\/p>\n Let\u2019s see what some browsers do when processing the HTML file input element with the capture attribute.<\/p>\n Desktop browsers always show the Browse<\/strong> dialog box and use the value of the accept<\/strong> attribute to offer a filtered list of files. At present, desktop browsers completely ignore the capture<\/strong> element. Things are slightly different on the mobile side. You can find plenty of examples and posts discussing a slightly older Media Capture specification that uses \u00a0the syntax below:<\/p>\n As you can see, the capture<\/strong> element seems now to accept a string instead of a Boolean value. Feasible values for the capture<\/strong> attribute seem to be \u2018microphone<\/strong>\u2019, \u2018camcorder\u2019<\/strong> and \u2018camera<\/strong>\u2019.<\/p>\n Both iOS 6 and Android 4\u2014the oldest versions of the most popular mobile operating systems supporting file upload\u2014completely ignore the capture attribute. At present, both the above code snippet and the code snippet below produce the same output.<\/p>\n Only the value of the accept<\/strong> attribute is processed, and browsers use it to decide which options to offer to the actual user. Figure 1 shows the effect of the code snippet on a recent iPhone device. The user clicks the camera button to add a picture to the currently displayed record and the iOS device responds as shown. The screenshot is taken from a device equipped with iOS9.<\/p>\n F<\/strong>IGURE 1. The HTML Input Element on iOS 6+ devices<\/strong><\/p>\n In Figure 2 a sample HTML page shows what happens when you view it with an Android device.<\/p>\n FIGURE 2. The HTML Input Element on Android 4+ devices<\/strong><\/p>\n My friend wanted to use the camera to snap new pictures to upload to the web site. This was only relevant for a mobile device so the camera button had to appear on the website only when accessed from the mobile. This was one of those weird situations in which it wasn\u2019t enough to use Bootstrap or responsive design to hide the camera button on the desktop. To make sure the Camera button only appears on mobile devices running on at least iOS 6 or Android 4, you need a specific device detection library. For the purpose, I used the community edition of WURFL.JS. (For more information, check out http:\/\/web.wurfl.io<\/a>.)<\/p>\n The markup discussed so far, \u00a0the old familiar INPUT file element with the extra accept attribute, serves well the purpose of letting mobile users to upload a picture that is already saved to the local gallery or to snap a new one. In fact, by selecting the Camera option (See Figure 2) the device will switch to the camera to let users tap and save a new photo.<\/p>\n This is only part of the work required, though, for a realistic web page. The process of selecting an existing photo or taking a new one is only the first part of a larger slice of work. Having got the image, how would you then upload the image to the server and store it?<\/p>\n For an expert ASP.NET developer, it is no big deal to upload an image to the web server using the INPUT element. The browser does most of the work required on the client side. On the server side itis sufficient to arrange a controller endpoint that can accept a parameter of type HttpPostedFileBase<\/strong>, as below.<\/p>\n Initially, I coded the file-selection and upload tasks in the traditional way. This involved placing the INPUT file element in a HTML form and letting the submit button of the form do the hard work of serializing the form\u2019s data and uploading it via the browser. It worked fairly well as long as I tested it on the desktop. When I moved it to a staging web server and accessed the pages with a mobile device I noticed a couple of interesting things.<\/p>\n The combination of these two factors made for a typical unacceptably long upload time with nearly no feedback for the user. My friend didn\u2019t like it and asked for some improvement.<\/p>\n The primary improvement to the upload procedure is to change it to \u00a0use XmlHttpRequest <\/strong>and FormData<\/strong>. You programmatically build up an HTML form using the FormData<\/strong> object and, when done, pass it to XmlHttpRequest<\/strong> to post to the remote URL. The server side of the code remains unchanged: a controller endpoint accepting a HttpPostedFileBase<\/strong> object.<\/p>\n To hook up into the upload client side procedure, you define a JavaScript handler for the onchange<\/strong> event of the INPUT <\/strong>file element.<\/p>\n The onchange <\/strong>event fires every time a file is selected from either the browse dialog or the device gallery, or if it is taken with the camera. Here\u2019s the skeleton of such an onchange<\/strong> event handler:<\/p>\n Retrieving the file name is an easy step. The code above shows how it could work with the DOM API. All files selected through the INPUT <\/strong>element are gathered in the files collection of the underlying DOM object. If you enabled multiple file selection on the INPUT <\/strong>element (by adding the multiple attribute) then all selected file names are made available through the files<\/strong> collection.<\/p>\n<input type=\"file\" name=\"uploader\" id=\"uploader\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\u00a0\u00a0 accept=\"image\/*\" \r\n\u00a0\u00a0 capture \r\n\/><\/pre>\n
Taking Browsers to Capture Media Content<\/h1>\n
<input type=\"file\" name=\"uploader\" id=\"uploader\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \r\n\u00a0\u00a0 accept=\"image\/*\" \r\n\u00a0\u00a0 capture \r\n\/><\/pre>\n
<input type=\"file\" name=\"uploader\" id=\"uploader\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\u00a0\u00a0 accept=\"image\/*\" \r\n\u00a0\u00a0 capture=\"camera\"\r\n\/><\/pre>\n
<input type=\"file\" name=\"uploader\" id=\"uploader\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \r\n\u00a0\u00a0 accept=\"image\/*\" \r\n\/><\/pre>\n
![\"fig1\"](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2016\/08\/fig1.png\")
<\/strong><\/p>\n![\"fig2\"](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2016\/08\/fig2.png\")
<\/p>\nUploading the File to the Server<\/h1>\n
[HttpPost]\r\npublic string AddPhoto(HttpPostedFileBase selectedPicture) { ... }<\/pre>\n\n
<input type=\"file\" name=\"selectedPicture\" id=\"selectedPicture\" \r\n\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0accept=\"image\/*\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 onchange=\"pictureSelected()\" \/><\/pre>\n
function pictureSelected() {\r\n\u00a0\u00a0\u00a0 var filename = document.getElementById('selectedPicture').files[0];\r\n\u00a0\u00a0\u00a0 :\r\n}<\/pre>\n
![\"fig3\"](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2016\/08\/fig3.png\")
<\/p>\n