Skip to content

Custom image insert not working in Firefox #145

shreyas-satish opened this Issue Jan 24, 2012 · 6 comments

5 participants


I've defined a custom behavior for a button in my mercury.js as follows :

  imageUpload: function(selection) {
    Mercury.modal('/admin/assets/image_upload', { 
        title: 'Upload Image',
        fullHeight: false,
        handler: 'imageUploader'

In the image_upload.html.erb view I have an Ajax form that accepts an image. I'm able to get the file upload to work through ajax using the remotipart gem. After the image submit the following view (create.js.erb) is rendered

attrs = {src: "http://localhost:3000" + "<%=@picture.image.url%>"};
Mercury.trigger('action', {action: 'insertImage', value: attrs});

The image is inserted properly into the editable area, in Chrome but not inserted in Firefox. The Firebug Console does not report any errors.
Interestingly, when I run the the same code (as in create.js.erb) in the Firebug console

attrs = {src: "http://localhost:3000/some_image_path"};
Mercury.trigger('action', {action: 'insertImage', value: attrs});

The image is inserted into the editable area.

I'm using Firefox 7, Mercury 0.2.3 & Rails 3.2.0 (An additional note, this problem persists even when using Rails 3.1.3)


Any further information on this, and why the main one works, but this one doesn't?


Nope. Baffles me to be honest. I was hoping you'd spot the problem :)

rrosiek commented Feb 29, 2012

Just wanted to throw a comment in here although I doubt it will help very much. I'm having a similar issue in a non-Rails environment. I'm just sending the upload to a php controller. Firebug gives me the following post data:

Content-Disposition: form-data; name="userfile"; filename="undefined"
Content-Type: image/jpeg
Content-Transfer-Encoding: binary

On error I have the upload class spit back some data:

ERROR: The filetype you are attempting to upload is not allowed.
    [file_name] => undefined
    [file_type] => image/jpeg
    [file_path] => D:/xampp/htdocs/app/assets/files/
    [full_path] => D:/xampp/htdocs/app/assets/files/undefined
    [raw_name] => undefined
    [orig_name] => 
    [client_name] => undefined
    [file_ext] => .undefined
    [file_size] => 101149
    [is_image] => 1
    [image_width] => 
    [image_height] => 
    [image_type] => 
    [image_size_str] => 

The filetype error is obvious, but it looks like the name of the image getting dragged into the region is not getting passed through. Actual binary data appears to be OK since I can see it in Firebug and the class also measures the size of the file.

This only happens in Firefox though, not Chrome. I haven't tried it in Safari. I'm using Firefox 10.0.2 and Chrome 17.0.963.56 on a Win7 box.


Same problem here with Rails app. This is how the request looks in log when I try to upload image in Firefox:

Started POST "/mercury/images" for at 2012-03-10 11:54:58 +0100
Processing by Mercury::ImagesController#create as JSON
  Parameters: {"image"=>{"image"=>#<ActionDispatch::Http::UploadedFile:0x007fa6ce235dd0 @original_filename="undefined", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"image[image]\"; filename=\"undefined\"\r\nContent-Type: image/jpeg\r\nContent-Transfer-Encoding: binary\r\n", @tempfile=#<File:/var/folders/j0/_p6529rd045__h9qt46wkjhw0000gn/T/RackMultipart20120310-16447-15af21r>>}}
   (0.1ms)  begin transaction
   (0.0ms)  rollback transaction
Completed 422 Unprocessable Entity in 13ms (Views: 0.3ms | ActiveRecord: 0.1ms)

In comparison with Chrome, Chrome sends original file name with valid file type extension:

Started POST "/mercury/images" for at 2012-03-10 12:00:40 +0100
Processing by Mercury::ImagesController#create as JSON
  Parameters: {"image"=>{"image"=>#<ActionDispatch::Http::UploadedFile:0x007fa6d04a1810 @original_filename="jodie.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"image[image]\"; filename=\"jodie.jpg\"\r\nContent-Type: image/jpeg\r\nContent-Transfer-Encoding: binary\r\n", @tempfile=#<File:/var/folders/j0/_p6529rd045__h9qt46wkjhw0000gn/T/RackMultipart20120310-16447-4qrz2s>>}}
   (0.1ms)  begin transaction
  SQL (5.1ms)  INSERT INTO "mercury_images" ("created_at", "image", "updated_at") VALUES (?, ?, ?)  [["created_at", Sat, 10 Mar 2012 11:00:40 UTC +00:00], ["image", "jodie.jpg"], ["updated_at", Sat, 10 Mar 2012 11:00:40 UTC +00:00]]
   (55.2ms)  commit transaction
Completed 201 Created in 1540ms (Views: 40.3ms | ActiveRecord: 0.0ms)

I am using Carrierwave to mount images.

It seems to me there might be a problem in uploader since it's not able to obtain original filename.

mixonic commented Mar 14, 2012

A permanent, client-side fix would be nice, but I'm doing this in Rails right now:

class MyImageUpload
  # Mongoid, paperclip, etc.
  before_create :ensure_file_extension


  def ensure_file_extension
    unless image_file_name =~ /.(jpg|jpeg|png|gif|bmp|tiff)$/
      case image_content_type
      when /jpg/, /jpeg/
        image_file_name << '.jpg'
      when /png/
        image_file_name << '.png'
      when /gif/
        image_file_name << '.gif'
      when /bmp/
        image_file_name << '.bmp'
      when /tiff/
        image_file_name << '.tiff'

Also, note that image upload is broken in Safari: #37

mixonic commented Mar 16, 2012

A permanent fix for this should be in #184 now. Firefox uses File.prototype.fileName instead of That is old school, and has gone away in other browsers.

Please help and test the fix in #184!

@mixonic mixonic closed this in e4fec9a Mar 18, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.