encoding error when uploading image via paperclip

Question

I'm trying to upload an image to paperclip and save it to s3. However, I get the following error in my console

!! Unexpected error while processing request: invalid byte sequence in UTF-8

There are a few responses on StackOverflow about how to resolve this problem, though most point to the original solution being an update to Rack. However, I'm using Ruby 1.9.3 and Rails 3.1.3, and believe I don't have Rack (I haven't installed it as a Gem, should I??).

The filenames that I've been trying are fairly simple, so I'm assuming the issue is in the actual file, but I'm not sure how to debug which upload variable the error is coming from. Rails isn't putting any of these errors in the log files, so I can't seem to get more details.

My controller is fairly simple, just like the example on the paperclip github documentation

 def create
   wine_photo = WinePhoto.create(params[:wine_photo])

   return render :json => wine_photo

  end

though originally I used the more common

  wine_photo - WinePhoto.new(params[:wine_photo])
  if wine_photo.save
     return render :json => wine_photo
  else 
     return render :json => wine_photo.errors
  end

My model (which I doubt is very helpful) is

class WinePhoto  true
    validates_with AttachmentPresenceValidator, :attributes => :photo

    belongs_to :wine
    belongs_to :user

    def photo_url
        photo.url
    end
end

based on this response on stackoverflow, Ruby Invalid Byte Sequence in UTF-8, I've tried the below in my controller

 def create
   wine_photo = WinePhoto.new(params[:wine_photo])
   wine_photo.photo = IO.read(wine_photo.photo).force_encoding("ISO-8859-1").encode("utf-8", replace: nil)
 ...

but still got the error.

Any suggestions on how to get past this encoding issue? Is there a way to confirm that the error is coming from the file being uploaded?

My upload code (ajax) is

save_photo: function(){
        var file = document.getElementById('file_api').files[0];
        console.log(file);
    var xhr = new XMLHttpRequest();
        if (xhr.upload && file.type == "image/jpeg" ) {

            // create progress bar
            var o = document.getElementById("progress");
            var progress = o.appendChild(document.createElement("p"));
            progress.appendChild(document.createTextNode("upload " + file.name));


            // progress bar
            xhr.upload.addEventListener("progress", function(e) {
                var pc = parseInt(100 - (e.loaded / e.total * 100));
                progress.style.backgroundPosition = pc + "% 0";
            }, false);

            // file received/failed
            xhr.onreadystatechange = function(e) {
                if (xhr.readyState == 4) {
                    progress.className = (xhr.status == 200 ? "success" : "failure");
                }
            };

            // start upload
            xhr.open("POST", document.getElementById("add_photo").action, true);
            xhr.setRequestHeader("X_FILENAME", file.name);
            xhr.send(file);
            }
        }

and the params for file are

File {webkitRelativePath: "", lastModifiedDate: Thu Nov 10 2011 09:40:39 GMT+1100 (AUS Eastern Summer Time), name: "WP_000012.jpg", type: "image/jpeg", size: 1344450}

pedalpete pedalpete · Accepted Answer · 2012-12-05T04:33:51

After two days of messing with this, it turns out the problem was in my ajax upload, rails wasn't getting the file field at all.

I followed this blog post to get the ajax upload working, https://github.com/newbamboo/example-ajax-upload/blob/master/public/index.html

and changed the name in my input file to

< input type="file" name="wine_photo[photo]" >

photo

the html form now also has

<input name="utf8" type="hidden" value="✓">

encoding error when uploading image via paperclip

1 Answers