Skip to content
This repository

Custom image insert not working in Firefox #145

Closed
shreyas-satish opened this Issue · 6 comments

5 participants

Shreyas Satish Matthew Beale Jeremy Jackson Ryan Rosiek David Horsák
Shreyas Satish

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});
Mercury.modal.hide();

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)

Jeremy Jackson
Owner

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

Shreyas Satish

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

Ryan Rosiek

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.
Array
(
    [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.

David Horsák

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 127.0.0.1 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 127.0.0.1 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.

Matthew Beale

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

  private

  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'
      end
    end
  end

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

Matthew Beale

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

Please help and test the fix in #184!

Matthew Beale mixonic closed this in e4fec9a
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.