Uploading images from Backbone

To allow us to upload files from our Backbone application, we should create an input file to be able to show a Choose file dialog. This could be done in the ContactEditor sub-application by changing the ContactPreview class to add this functionality. So let's change the current template and add the input:

<div class="box thumbnail">
<div class="photo">
<% if (avatar && avatar.url) { %>
<imgsrc="<%= avatar.url %>" alt="Contact photo" />
<% } else { %>
<imgsrc="http://placehold.it/250x250" alt="Contact photo" />
<% } %>
<input id="avatar" name="avatar" type="file" 
style="display: none" />
</div>
<!-- ... -->
</div>

Note that we have created a hidden input file field; we don't want to show the input field, but we want the control to open a Select File dialog. As the input is hidden, when the user clicks on the current image, we will show the file chooser:

// apps/contacts/views/contactPreview...