Question

I am changing/improving this example and I stuck now on error-messages.

I have found some error-variables in index.html.erb and I am wondering how I can connect them with my validations, so that a message-window comes out, when a file is too big or so small

I would be grateful if somebody helps me.

That is the small cut-off of the index.html.erb:

<script>
  var fileUploadErrors = {
  maxFileSize: 'File is too big',
  minFileSize: 'File is too small',
  acceptFileTypes: 'Filetype not allowed',
  maxNumberOfFiles: 'Max number of files exceeded',
  uploadedBytes: 'Uploaded bytes exceed file size',
  emptyResult: 'Empty file upload result'
  };
</script>

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
  {% for (var i=0, file; file=o.files[i]; i++) { %}
  <tr class="template-upload fade">
    <td class="preview"><span class="fade"></span></td>
    <td class="name"><span>{%=file.name%}</span></td>
    <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
    {% if (file.error) { %}
    <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
    {% } else if (o.files.valid && !i) { %}

    <td class="start">{% if (!o.options.autoUpload) { %}
      <button class="btn btn-mini btn-primary">
        <i class="icon-upload icon-white"></i>
        <span>{%=locale.fileupload.start%}</span>
      </button>
      {% } %}</td>
    {% } else { %}
    <td colspan="2"></td>
    {% } %}
    <td class="cancel">{% if (!i) { %}
      <button class="btn btn-mini btn-warning">
        <i class="icon-ban-circle icon-white"></i>
        <span>{%=locale.fileupload.cancel%}</span>
      </button>
      {% } %}</td>
  </tr>
  {% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
  {% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
      {% if (file.error) { %}
        <td></td>
        <td class="name"><span>{%=file.name%}</span></td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else { %}
        <td class="preview">{% if (file.thumbnail_url) { %}
          <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
          {% } %}</td>
        <td class="name">
          <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
        </td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        <td colspan="2"></td>
        {% } %}
      <td class="delete">
        <button class="btn btn-mini btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
          <i class="icon-trash icon-white"></i>
          <span>{%=locale.fileupload.destroy%}</span>
        </button>
        <input type="checkbox" name="delete" value="1">
      </td>
    </tr>
    {% } %}
</script>

And my validations:

class Upload < ActiveRecord::Base
  attr_accessible :upload, :upload_file_name, :upload_file_size
  has_attached_file :upload

  include Rails.application.routes.url_helpers

  validates :upload_file_name,  :presence   => true,
                                #:uniqueness =>{:case_sensitive => false},
                                :format     =>{:with => %r{\.(cel)$}i}
  # validates_presence_of :upload_file_name
  validates_uniqueness_of :upload_file_name, :message => "blabla"
  #validates_attachment_size :upload, :in =>1.megabytes..20.megabytes
  validates :upload_file_size,  :inclusion  => {:in =>10.megabytes..20.megabytes}

  def to_jq_upload
    {
      "name" => read_attribute(:upload_file_name),
      "size" => read_attribute(:upload_file_size),
      "url" => upload.url(:original),
      "delete_url" => upload_path(self),
      "delete_type" => "DELETE" 
    }
  end

end

and uploads.controller:

  def create
    p_attr=params[:upload]
    p_attr[:upload] = params[:upload][:upload].first if params[:upload][:upload].class == Array
    @upload = Upload.new(p_attr)

    respond_to do |format|
      if @upload.save
        format.html {
          render :json => [@upload.to_jq_upload].to_json,
          :content_type => 'text/html',
          :layout => false
        }
        format.json { render json: [@upload.to_jq_upload].to_json, status: :created, location: @upload }
      else
        format.html { render action: "new" }
        format.json { render json: @upload.errors, status: :unprocessable_entity }
      end
    end
  end

Answer 1

This might help you with some file-related validations:

find this $('#fileupload').fileupload in your index.html.erb and change to something like this:

$('#fileupload').fileupload({
            maxFileSize: 100000000,
            acceptFileTypes: '/^image\/(gif|jpeg|png)$/',
            previewSourceFileTypes: '/^image\/(gif|jpeg|png)$/',
        });

You should check the “blueimp / jQuery-File-Upload” wiki page for more error types.