Permalink
Browse files

added support to V5

  • Loading branch information...
1 parent 2a32a00 commit d3a25e0f49873661a1383577141a2d5b402466cb @yortz committed Oct 23, 2011
@@ -5,5 +5,8 @@
// the compiled file.
//
//= require jquery
-//= require jquery_ujs
+//= require jquery-ui
+//= require jquery.iframe-transport
+//= require jquery.fileupload
+//= require jquery.fileupload-ui
//= require_tree .
@@ -1,3 +0,0 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
@@ -0,0 +1,28 @@
+$(function () {
+ // Initialize the jQuery File Upload widget:
+ $('#fileupload').fileupload({
+ maxNumberOfFiles: 1
+ });
+ //
+ // Load existing files:
+ $.getJSON($('#fileupload form').prop('action'), function (files) {
+ var fu = $('#fileupload').data('fileupload');
+ fu._adjustMaxNumberOfFiles(-files.length);
+ fu._renderDownload(files)
+ .appendTo($('#fileupload .files'))
+ .fadeIn(function () {
+ // Fix for IE7 and lower:
+ $(this).show();
+ });
+ });
+
+ // Open download dialogs via iframes,
+ // to prevent aborting current uploads:
+ $('#fileupload .files a:not([target^=_blank])').live('click', function (e) {
+ e.preventDefault();
+ $('<iframe style="display:none;"></iframe>')
+ .prop('src', this.href)
+ .appendTo('body');
+ });
+
+});
@@ -4,4 +4,6 @@
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require_tree .
-*/
+ //= require jquery.fileupload-ui
+ //= require nifty-layout
+*/
@@ -1,100 +0,0 @@
-@charset 'UTF-8';
-/*
- * jQuery File Upload UI Plugin CSS 5.0.6
- * https://github.com/blueimp/jQuery-File-Upload
- *
- * Copyright 2010, Sebastian Tschan
- * https://blueimp.net
- *
- * Licensed under the MIT license:
- * http://creativecommons.org/licenses/MIT/
- */
-
-.fileupload-buttonbar .ui-button input {
- position: absolute;
- top: 0;
- right: 0;
- margin: 0;
- border: solid transparent;
- border-width: 0 0 100px 200px;
- opacity: 0;
- filter: alpha(opacity=0);
- -o-transform: translate(250px, -50px) scale(1);
- -moz-transform: translate(-300px, 0) scale(4);
- direction: ltr;
- cursor: pointer;
-}
-
-.fileinput-button {
- overflow: hidden;
-}
-
-/* Fix for IE 6: */
-*html .fileinput-button {
- padding: 2px 0;
-}
-
-/* Fix for IE 7: */
-*+html .fileinput-button {
- padding: 2px 0;
-}
-
-.fileupload-buttonbar {
- padding: 0.2em 0.4em;
-}
-
-.fileupload-buttonbar .ui-button {
- vertical-align: middle;
-}
-
-.fileupload-content {
- padding: 0.2em 0.4em;
- border-top-width: 0;
-}
-
-.fileupload-content .ui-progressbar {
- width: 200px;
- height: 20px;
-}
-
-.fileupload-content .ui-progressbar-value {
- background: url(pbar-ani.gif);
-}
-
-.fileupload-content .fileupload-progressbar {
- width: 400px;
- margin: 10px 0;
-}
-
-.files {
- margin: 10px 0;
- border-collapse: collapse;
-}
-
-.files td {
- padding: 5px;
- border-spacing: 5px;
-}
-
-.files img {
- border: none;
-}
-
-.files .name {
- padding: 0 10px;
-}
-
-.files .size {
- padding: 0 10px 0 0;
- text-align: right;
- white-space: nowrap;
-}
-
-.ui-state-disabled .ui-state-disabled {
- opacity: 1;
- filter: alpha(opacity=100);
-}
-
-.ui-state-disabled input {
- cursor: default;
-}
@@ -1,3 +0,0 @@
-// Place all the styles related to the Pictures controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
@@ -1,56 +0,0 @@
-body {
- background-color: #fff;
- color: #333;
- font-family: verdana, arial, helvetica, sans-serif;
- font-size: 13px;
- line-height: 18px; }
-
-p, ol, ul, td {
- font-family: verdana, arial, helvetica, sans-serif;
- font-size: 13px;
- line-height: 18px; }
-
-pre {
- background-color: #eee;
- padding: 10px;
- font-size: 11px; }
-
-a {
- color: #000;
- &:visited {
- color: #666; }
- &:hover {
- color: #fff;
- background-color: #000; } }
-
-div {
- &.field, &.actions {
- margin-bottom: 10px; } }
-
-#notice {
- color: green; }
-
-.field_with_errors {
- padding: 2px;
- background-color: red;
- display: table; }
-
-#error_explanation {
- width: 450px;
- border: 2px solid red;
- padding: 7px;
- padding-bottom: 0;
- margin-bottom: 20px;
- background-color: #f0f0f0;
- h2 {
- text-align: left;
- font-weight: bold;
- padding: 5px 5px 5px 15px;
- font-size: 12px;
- margin: -7px;
- margin-bottom: 0px;
- background-color: #c00;
- color: #fff; }
- ul li {
- font-size: 12px;
- list-style: square; } }
@@ -6,7 +6,7 @@ def index
respond_to do |format|
format.html # index.html.erb
- format.json { render json: @pictures }
+ format.json { render :json => @pictures.collect { |p| p.to_jq_upload }.to_json }
end
end
@@ -44,11 +44,9 @@ def create
respond_to do |format|
if @picture.save
- format.html { redirect_to @picture, notice: 'Picture was successfully created.' }
- format.json { render json: @picture, status: :created, location: @picture }
+ format.json { render :json => [ @picture.to_jq_upload ].to_json }
else
- format.html { render action: "new" }
- format.json { render json: @picture.errors, status: :unprocessable_entity }
+ format.json { render :json => [ @picture.to_jq_upload.merge({ :error => "custom_failure" }) ].to_json }
end
end
end
@@ -77,7 +75,7 @@ def destroy
respond_to do |format|
format.html { redirect_to pictures_url }
- format.json { head :ok }
+ format.json { render :json => true }
end
end
end
View
@@ -1,4 +1,17 @@
class Picture < ActiveRecord::Base
+ include Rails.application.routes.url_helpers
validates_presence_of :title, :description, :file
mount_uploader :file, ImageUploader
+
+ #one convenient method to pass jq_upload the necessary information
+ def to_jq_upload
+ {
+ "name" => read_attribute(:file),
+ "size" => file.size,
+ "url" => file.url,
+ "thumbnail_url" => file.thumb.url,
+ "delete_url" => picture_path(:id => id),
+ "delete_type" => "DELETE"
+ }
+ end
end
@@ -40,9 +40,9 @@ def store_dir
# Add a white list of extensions which are allowed to be uploaded.
# For images you might use something like this:
- # def extension_white_list
- # %w(jpg jpeg gif png)
- # end
+ def extension_white_list
+ %w(jpg jpeg gif png)
+ end
# Override the filename of the uploaded files:
# def filename
@@ -1,29 +1,94 @@
-<%= form_for(@picture) do |f| %>
- <% if @picture.errors.any? %>
- <div id="error_explanation">
- <h2><%= pluralize(@picture.errors.count, "error") %> prohibited this picture from being saved:</h2>
+<%= content_for :head do %>
+ <%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css", :id => "theme" %>
+ <%= javascript_include_tag "http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" %>
+<% end %>
- <ul>
- <% @picture.errors.full_messages.each do |msg| %>
- <li><%= msg %></li>
- <% end %>
- </ul>
- </div>
+<div id="fileupload">
+ <%= form_for @picture, :html => { :multipart => true } do |f| %>
+ <div class="field">
+ <%= f.label :title %><br />
+ <%= f.text_field :title %>
+ </div>
+ <div class="field">
+ <%= f.label :description %><br />
+ <%= f.text_field :description %>
+ </div>
+ <br />
+ <div class="fileupload-buttonbar">
+ <label class="fileinput-button">
+ <span>Add files...</span>
+ <%= f.file_field :file %>
+ </label>
+ <button type="submit" class="start">Start upload</button>
+ <button type="reset" class="cancel">Cancel upload</button>
+ <button type="button" class="delete">Delete files</button>
+ </div>
<% end %>
-
- <div class="field">
- <%= f.label :title %><br />
- <%= f.text_field :title %>
- </div>
- <div class="field">
- <%= f.label :description %><br />
- <%= f.text_field :description %>
- </div>
- <div class="field">
- <%= f.label :file %><br />
- <%= f.file_field :file %>
+ <div class="fileupload-content">
+ <table class="files"></table>
+ <div class="fileupload-progressbar"></div>
</div>
- <div class="actions">
- <%= f.submit %>
- </div>
-<% end %>
+</div>
+
+<script id="template-upload" type="text/x-jquery-tmpl">
+ <tr class="template-upload{{if error}} ui-state-error{{/if}}">
+ <td class="preview"></td>
+ <td class="name">${name}</td>
+ <td class="size">${sizef}</td>
+ {{if error}}
+ <td class="error" colspan="2">Error:
+ {{if error === 'maxFileSize'}}File is too big
+ {{else error === 'minFileSize'}}File is too small
+ {{else error === 'acceptFileTypes'}}Filetype not allowed
+ {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
+ {{else}}${error}
+ {{/if}}
+ </td>
+ {{else}}
+ <td class="progress"><div></div></td>
+ <td class="start"><button>Start</button></td>
+ {{/if}}
+ <td class="cancel"><button>Cancel</button></td>
+ </tr>
+</script>
+
+<script id="template-download" type="text/x-jquery-tmpl">
+ <tr class="template-download{{if error}} ui-state-error{{/if}}">
+ {{if error}}
+ <td></td>
+ <td class="name">${name}</td>
+ <td class="size">${sizef}</td>
+ <td class="error" colspan="2">Error:
+ {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
+ {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
+ {{else error === 3}}File was only partially uploaded
+ {{else error === 4}}No File was uploaded
+ {{else error === 5}}Missing a temporary folder
+ {{else error === 6}}Failed to write file to disk
+ {{else error === 7}}File upload stopped by extension
+ {{else error === 'maxFileSize'}}File is too big
+ {{else error === 'minFileSize'}}File is too small
+ {{else error === 'acceptFileTypes'}}Filetype not allowed
+ {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
+ {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
+ {{else error === 'emptyResult'}}Empty file upload result
+ {{else}}${error}
+ {{/if}}
+ </td>
+ {{else}}
+ <td class="preview">
+ {{if thumbnail_url}}
+ <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
+ {{/if}}
+ </td>
+ <td class="name">
+ <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a>
+ </td>
+ <td class="size">${sizef}</td>
+ <td colspan="2"></td>
+ {{/if}}
+ <td class="delete">
+ <button data-type="${delete_type}" data-url="${delete_url}">Delete</button>
+ </td>
+ </tr>
+</script>
Oops, something went wrong.

0 comments on commit d3a25e0

Please sign in to comment.