Permalink
Browse files

- validating presence of file upload fields via js.

  • Loading branch information...
1 parent f3cceb5 commit 2b3ede3e64a73e9c1fa8e402b9ef488f4b56f78a @yortz committed Oct 25, 2011
@@ -1,13 +1,30 @@
$(function () {
+
+ var inputs = $('#new_picture :input[type=text]');
+
+ clearFields(inputs);
+
+ function clearFields (inputs) {
+ $('.ui-state-error-text').remove();
+ $.each(inputs, function(index, field){
+ $(field).focus(function(){
+ $(field).removeClass("ui-state-error");
+ $(field).next().remove();
+ });
+ });
+ };
+
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
- maxNumberOfFiles: 1
+ maxNumberOfFiles: 3,
+ acceptFileTypes: /\.(jpg|jpeg|gif|png|JPG|JPEG|GIF|PNG)$/
});
+
//
// Load existing files:
$.getJSON($('#fileupload form').prop('action'), function (files) {
var fu = $('#fileupload').data('fileupload');
- fu._adjustMaxNumberOfFiles(-files.length);
+ //fu._adjustMaxNumberOfFiles(-files.length);
fu._renderDownload(files)
.appendTo($('#fileupload .files'))
.fadeIn(function () {
@@ -24,5 +41,26 @@ $(function () {
.prop('src', this.href)
.appendTo('body');
});
+
+
+ $('#fileupload').bind('fileuploadsend', function (e, data) {
+
+ var values = {};
+
+ $.each($('#new_picture').serializeArray(), function(i, field) {
+ values[field.name] = field.value;
+ });
+
+ var title = values["picture[title]"]
+ var description = values["picture[description]"]
+
+ $.each( values, function(k, v){
+ if (v == 0) {
+ $('input[name="' + k + '"]').addClass("ui-state-error");
+ $('input[name="' + k + '"]').after("<span class=\"ui-state-error-text\"> can't be blank!</span>");
+ }
+ });
+
+ });
});
View
@@ -6,6 +6,8 @@ class Picture < ActiveRecord::Base
#one convenient method to pass jq_upload the necessary information
def to_jq_upload
{
+ "title" => read_attribute(:title),
+ "description" => read_attribute(:description),
"name" => read_attribute(:file),
"size" => file.size,
"url" => file.url,
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
- <title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
+ <title><%= content_for?(:title) ? yield(:title) : "jQuery-File-Upload" %></title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag :application %>
<%= csrf_meta_tag %>
@@ -9,6 +9,7 @@
<%= f.label :title %><br />
<%= f.text_field :title %>
</div>
+ <br />
<div class="field">
<%= f.label :description %><br />
<%= f.text_field :description %>
@@ -30,10 +31,5 @@
</div>
</div>
-<script id="template-upload" type="text/x-jquery-tmpl">
- <%= render :partial => "template-upload" %>
-</script>
-
-<script id="template-download" type="text/x-jquery-tmpl">
- <%= render :partial => "template-download" %>
-</script>
+<%= render :partial => "template-upload" %>
+<%= render :partial => "template-download" %>
@@ -1,38 +1,40 @@
-<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 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>
@@ -1,19 +1,21 @@
-<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 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>

0 comments on commit 2b3ede3

Please sign in to comment.