UploadKit-Rails packages up Entropi Software’s Upload Kit UI and places it in a gem so that it can be easily included in Ruby on Rails based projects. For further information on UploadKit, please refer to github.com/entropillc/UploadKit.
UploadKit requires use of Twitter’s Bootstrap css library. We recommend the use of Bootstrapped for easily integrating the Bootstrap CSS/Less and Javascript files in to your project. You can find more information about Bootstrapped here: github.com/entropillc/bootstrapped.
UploadKit-Rails was specifically developed for Rails 3 and above applications. To install, include upload_kit-rails in your Gemfile.
gem "upload_kit-rails"
Ensure that you have A copy of Twitter’s Bootstrap CSS in your asset pipeline. For ease of use, you can use Bootstrapped. Refer to the installation instructions at github.com/entropillc/bootstrapped.
After running bundle install to install the gem, you need to run the upload_kit install generator. T
rails g upload_kit:install
You can use the following markup for creating a uploader for a single file. The URL has to be to a restful interface of uploading files:
<%= f.file_field :attachment, :class => "uk-input", :data => { :upload_url => './', :max_file_size => "10mb" } %>
This is the HTML generated:
<!-- Single-file uploader --> <input type="file" class="uk-input" name="attachment" data-upload-url="./" data-max-file-size="10mb"/>
Upload kit allows you to listen for events that occur during the lifecycle of the upload. Below is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>UploadKit Demo</title>
<link rel="stylesheet" type="text/css" href="externals/bootstrap/docs/assets/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="uploadkit.css"/>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="externals/plupload/js/plupload.full.js"></script>
<script type="text/javascript" src="uploadkit.js"></script>
<script type="text/javascript">
$(function() {
$('.uk-input').bind(UKEventType.FileUploaded, function(evt) {
console.log(evt.response);
});
});
</script>
</head>
<body>
<form method="post" action="#">
<!-- Multi-file uploader -->
<input type="file" class="uk-input" name="attachments" multiple="multiple" data-upload-url="./" data-max-file-size="100mb"/>
<!-- Single-file uploader -->
<input type="file" class="uk-input" name="avatar" data-upload-url="./" data-max-file-size="10mb"/>
</form>
</body>
</html>
-
Added custom events for file upload completion and upload errors so that application-specific code can listen for these events and handle server responses and errors.
-
Adds CSS and Javascript files to ensure that UploadKit works properly
-
Created generator to place necessary references in application.js and application.css
Copyright 2011 Entropi Software, LLC.
Licensed under the Apache License, Version 2.0: www.apache.org/licenses/LICENSE-2.0