The Uploader

This uploader instance had been configured to accept .jpg and .jpeg files only, with a maximum filesize of 100KB. The key (destination folder in the bucket) has been set as my_special_case.

Select A File

The Code

The uploader above would be generated from your a Rails view using the following code:

<!-- Markup required to render an uploader -->
<div id='uploadcontainer'>
 <h3>Select A File</h3>
 <div id='uploadfile'> 
   <div class="progress"></div>
 </div>
 <button type="button" class="btn btn-default btn btn-sm" id="selectfile">Select File</button>
 <button type="button" class="btn btn-danger btn btn-sm disabled" id="resetupload">Reset</button>
 <p id='info' style='margin-top:20px;'>
 </p>
</div>


<!-- The pail Rails helper method, turns the markup above into an uploader isntance -->
<%= pail({key: 'my_special_place', max_filesize: 102400, filter_title: 'Jpg Files', filter_extensions: 'jpg,jpeg'}) %>


<!-- Custom actions that bind to the FileUpload and Error events -->
<script>
  window.uploader.bind('FileUploaded', function(up, file, info) { 
    var location = $($.parseXML(info.response)).find('Location').text()
    $('#uploadcontainer').find('#info').html('Woot! Your file has been uploaded to <a href="' + location + '">'+ unescape(location) +'</a>.')
  })
  window.uploader.unbind('Error')
  window.uploader.bind('Error', function(up, err) {
    $('#uploadcontainer').find('#info').html("Oops! Attempting to upload <strong>" + err.file.name + "</strong> resulted in a " + err.message);
  });
</script>