Hide input type file from older iOS devices

I recently added support for user image upload in Eventfy. You can find more details and screenshots here.

Safari mobile in iOS devices like iPhone and iPad do not yet support file uploads and render input type file disabled. It may change with the upcoming update to iOS 6, but until then our web applications must take that limitation into account.

I wanted to hide the file update controls in iOS and show a note in its place. Instead of checking the browser version I am simply checking the state of the input file, which may also cover other devices with similar limitations.

The code below describes how to set it up with jQuery, but it is simple to do the same with plain Javascript.

1. HTML part:

<div id="imageUploadDiv" class="control-group">
 <label class="control-label" for="imageUpload">Image</label>
 <div class="controls">
   <input id="imageUploadInt" name="imageUploadInt" class="input-file" type="file" />
   <p class="help-block">You can optionally include a picture or image in your invite</p>
   <span id="imgPreview" class="thumbnail" style="display:none;width: 250px;"></span>
 </div>
</div>
<div id="imageUploadiOSWarning" class="alert alert-info" style="display: none;">
 <button type="button" class="close" data-dismiss="alert">×</button>
 <strong>Note</strong> Image upload isn't supported by iOS before version 6.0
</div>

2. Javascript / jQuery part:

<script>
$(document).ready(function(){
    if ($("#imageUploadInt").prop("disabled")) { 
        $('#imageUploadiOSWarning').show();
        $('#imageUploadDiv').hide();
    }
}
</script>

In this simple example DIV "imageUploadInt" is presented by default. But as soon the document loads we check if the input file was automatically disabled by the browser, and if so we hide "imageUploadInt" and show instead DIV "imageUploadiOSWarning".

Note: this DIV structure and CSS classes are defined in Twitter Bootstrap. You can find more about Bootstrap control forms here, on section 'Validation States'.

Update: I tested the image upload function in Eventfy yesterday (9/19) with iOS 6 and this code works great. Now users can upload pictures (if their device supports it), otherwise they are presented with a message explaining why the control is disabled.

Here are some screenshots to show how it works with iOS 6:

Input type file is enabled with iOS 6

Photo selection

Photo uploaded to Eventfy