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