Skip to content

Instantly share code, notes, and snippets.

@andrewhavens
Created April 17, 2014 18:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrewhavens/11003706 to your computer and use it in GitHub Desktop.
Save andrewhavens/11003706 to your computer and use it in GitHub Desktop.
broken jQuery file upload example
<h1>Upload Documents</h1>
<form action="/documents" enctype="multipart/form-data" id="fileupload" method="post">
<input type="file" name="document[attachment][]" multiple="multiple">
<table>
<tbody id="files" class="files"></tbody>
</table>
</form>
<!-- jQuery 1.8.3 already included -->
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="/javascripts/jquery.iframe-transport.js"></script>
<!-- javascript templating library -->
<script src="/javascripts/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="/javascripts/load-image.min.js"></script>
<!-- The basic File Upload plugin -->
<script src="/javascripts/jquery.fileupload.js"></script>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class="btn btn-primary start" disabled>
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<script>
$(function () {
$('#fileupload').fileupload(); // What are the minimum requirements to enable template support?
});
</script>
@andrewhavens
Copy link
Author

Here's a code sample that I was able to get working:

<script id="template-upload" type="text/x-tmpl">
  <tr>
    <td></td>
    <td>{%=o.name%}</td>
    <td><div class="progress"><div class="bar" style="width:0%;"></div></div></td>
  </tr>
</script>
<script>
  $(function(){
    $('#fileupload').fileupload(
      add: function (e, data) {
        var file = data.files[0]
        data.context = $(tmpl('template-upload', file))
        $('#files').append(data.context);
      }
    );
  });
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment