Tag Archives: files

Dragging a File from File Explorer Causes Google Chrome to Crash

Hey everyone,

A team member found an interesting bug today that caused chrome to go non-responsive. The cause was simply dragging a file from the file explorer onto a drag and drop upload area. It is reproducible on every site I’ve tested, including Gmail and Dropbox.

Reproduce

  • Go to https://mail.google.com
  • Click compose
  • Click attach files (close any of the annoying popups that appear)
  • DRAG a number of files from the file selector window to the new message screen (they will start to upload) (IMPORTANT: these need to be dragged from the file selector popup, NOT a new explorer window)
  • While they are still uploading hit cancel on the file browser window. Browser will go non-responsive

A bug has been reported here: https://code.google.com/p/chromium/issues/detail?id=388661

Detecting File Size with jQuery

Detecting FileSize – jQuery

Hey everyone,

Just a quick post on how to detect a file’s size with jQuery. I’m currently using a version of this for basic client side validation:

<form action="upload" enctype="multipart/form-data" method="post">
 
    Upload image:
    <input id="image-file" type="file" name="file" />
</form>
$(document).ready(function(){
    $('#image-file').bind('change', function() {
 
        var fileSize = this.files && this.files.length > 0 && this.files[0].size ? this.files[0].size / 1024 / 1024 : 0;
 
        if(fileSize > 0){
            $('body').append('<div class="file valid">' + fileSize + ' MB</div>');  
        }
        else{
            $('body').append('<div class="file invalid">' + fileSize + ' MB</div>'); 
        }            
    });
});
.file{
padding: 5px 7px;
border-radius: 3px;
background-color: green;
color: white;
margin: 5px;
}
 
.file.valid{
background-color: rgb(127, 197, 127);
}
 
.file.invalid{
background-color: rgb(197, 127, 127);
}

Here’s the link to the full fiddle: http://jsfiddle.net/nLLMF/

There’re also a whole heap of other options listed on this StackOverflow post if you’re chasing something a bit more robust: http://stackoverflow.com/a/13249924/522859

POST http://192.168.1.3:3000 406 (Not Acceptable) – AJAX with Ruby on Rails

Just a quick post on an error I ran into today when trying to create an AJAX image upload with Ruby on Rails. When submitting an AJAX form I received the following error:

POST http://192.168.1.3:3000/uploads 406 (Not Acceptable)

It turns out that there is a fairly simple (and admittedly obvious) solution. Ensure that your controller has an appropriate response for JavaScript files:

i.e.
Form:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%= form_for(@upload, :html =>{:multipart => true}, :remote => 'true') do |f| %>
  <% if @upload.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@upload.errors.count, "error") %> prohibited this image from being saved:</h2>
      <% @upload.errors.keys.each do |field| %>
        <% @upload.errors[field].each do |msg| %>
          <% if field.to_s == "uploads.upload_content_type" %>
            <li><%= field.to_s + " " + msg %></li>
        <% end %>
      <% end %>
    </div>
  <% end %>
  <div>
    <p>
      <%= f.file_field :upload %>
    </p>
  </div>
  <div class="actions">
    <%= f.submit :class => 'button' %>
  </div>
  <%= f.hidden_field :product_id, :value => @upload.product_id %>
<% end %>

Form JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* Wait for document to load */
$(document).ready(function() {
    create_ajax_form('new_upload');
})
 
/* Create an ajax form */
function create_ajax_form(form_id){
 
   //Handle ajax submission
   $j('#' + form_id).submit(function(){
 
       //Send for data
       $j.post($j(this).attr("action"), $j(this).serialize(), null, "script");
 
       //Return false
       return false;
   });
}

Controller Action:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#Create an upload
  def create
 
    #Create vars
    @upload = Upload.new(params[:upload])
 
    #Create responses
    respond_to do |format|
      if @upload.save
 
        #Retrieve product
        @product = Product.find_by_id(@upload.product_id)
 
        #Create success responses
        format.html { redirect_to @product, :notice => 'Image Added Successfully!'}
        format.js
      else
 
        #Create error responses
        format.html { render :action => 'new'}
        format.js
      end
    end
  end

JavaScript Response:

1
alert('test');

Not Recognised by the ‘identify’ command – Paperclip

Just a quick post on another problem I ran into while setting up PaperClip. When attempting to submit a form WITHOUT an image I received the following error message:

Assets asset /tmp/stream20120218-22611-dgnkr-0.exe is not recognized by the 'identify' command.

Apparently the most common cause of this issue is one of two things:

#1: You don’t have RMagick installed
The easiest fix for this is to simply install the rmagick gem. Simply add rmagick to your Gemfile and run bundle install. Restart your server and you should be ready to go.

#2: Your command_path isn’t set correctly
Run the following command from your console:

chris@chris-VirtualBox:~/site$ which identify
/usr/bin/identify

Then add the path that is returned to your environment settings:

1
Paperclip.options[:command_path] = "/usr/bin"

#3: If all else fails

If none of the above seem to be causing your issue, try adding the following to your model:

1
2
3
 def asset?
    !(asset_content_type =~ /^image.*/).nil?
  end

This will simply prevent the file being processed if it’s not an image, avoiding the issue all together. Hopefully this’ll help someone out, let me know if you come across any other solutions.

UPDATE:
Apparently a more recent cause of this issue is an update to the cocaine gem, rolling back to version 0.3.2 appears to resolve the issue. Thanks to Ahmed and Fabrice for bringing it to my attention:
https://github.com/thoughtbot/paperclip/issues/1038
http://stackoverflow.com/a/12760881/522859

PaperClip Issues – Ruby on Rails

I finally decided to replace all my existing code to handle images with Paperclip. I was following the screencast by Emerson Lackey, #134 Paperclip, however I ran into a couple of issues. Thankfully they were all very easily fixed, and probably wouldn’t have occurred at all if I’d simply watched the whole screencast instead of trying to rush on ahead.

Issue #1:
The first issue I encountered was that my asset fields weren’t appearing on the page:

1
2
3
4
5
6
7
<% f.fields_for :assets do |asset_fields|   %>
      <% if asset_fields.object.new_record? %>
        <p>
          <%= asset_fields.file_field :asset %>
        </p>
      <% end %>
    <% end %>

I spent way too much time trying to work this one out, especially considering how obvious the solution is – the screencast is simply missing an “=” after the initial “<%" in "<% f.fields_for". Simply amend it as follows:

1
2
3
4
5
6
7
<%= f.fields_for :assets do |asset_fields|   %>
      <% if asset_fields.object.new_record? %>
        <p>
          <%= asset_fields.file_field :asset %>
        </p>
      <% end %>
    <% end %>

Issue #2:
The second one is actually encountered and addressed by Emerson himself. Unfortunately I started trying to find a solution before seeing his, so just in case someone else does a Google search I’ll include the issue here:

undefined method `symbolize_keys!' for "/system/assets/1/original/mack_truck.jpg?1329550205":String

     <% f.fields_for :assets do |asset_fields| %>
       <% unless asset_fields.object.new_record? %>
       

<%= link_to image_tag(asset_fields.object.asset.url(:thumb), asset_fields.object.asset.url(:original)) %>

<% end %> <% end %>

The problem here is simply that the parenthesis are in the wrong place, simply amend your code as follows:

1
2
3
4
5
6
7
     <% f.fields_for :assets do |asset_fields| %>
       <% unless asset_fields.object.new_record? %>
       <p>
         <%= link_to image_tag(asset_fields.object.asset.url(:thumb)), asset_fields.object.asset.url(:original) %>
       </p>
       <% end %>
     <% end %>

Anyway, hopefully this helps someone else out – let me know if there are any issues.

Update: Don’t name your model assets!
Unfortunately I followed the tutorials naming example and called my model Asset. While this may have been fine in earlier version of rails it causes quirky conflicts with the asset pipeline. I strongly encourage you to use a different name i.e. Uploads