UploadKit-Rails¶ ↑

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.

Setup¶ ↑

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

Usage¶ ↑

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"/>

Listening for events¶ ↑

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>

Change Log¶ ↑

Version 1.1.0¶ ↑

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.

Version 1.0.0¶ ↑

Adds CSS and Javascript files to ensure that UploadKit works properly
Created generator to place necessary references in application.js and application.css

License¶ ↑

Licensed under the Apache License, Version 2.0: www.apache.org/licenses/LICENSE-2.0

upload_kit-rails

Runtime