title: encoding error when uploading image via paperclip
body: <p>I'm trying to upload an image to paperclip and save it to s3. However, I get the following error in my console</p>
  
  <pre>!! Unexpected error while processing request: invalid byte sequence in UTF-8</pre>
  
  <p>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??). </p>
  
  <p>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. </p>
  
  <p>My controller is fairly simple, just like the example on the paperclip github documentation</p>
  
  <pre>
   def create
     wine_photo = WinePhoto.create(params[:wine_photo])
  
     return render :json => wine_photo
  
    end
  </pre>
  
  <p>though originally I used the more common</p>
  
  <pre>
    wine_photo - WinePhoto.new(params[:wine_photo])
    if wine_photo.save
       return render :json => wine_photo
    else 
       return render :json => wine_photo.errors
    end
  </pre>
  
  <p>My model (which I doubt is very helpful) is</p>
  
  <pre>
  class WinePhoto  true
      validates_with AttachmentPresenceValidator, :attributes => :photo
  
      belongs_to :wine
      belongs_to :user
  
      def photo_url
          photo.url
      end
  end
  </pre>
  
  <p>based on this response on stackoverflow, <a href="https://stackoverflow.com/questions/9607554/ruby-invalid-byte-sequence-in-utf-8">Ruby Invalid Byte Sequence in UTF-8</a>, I've tried the below in my controller</p>
  
  <pre>
   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)
   ...
  </pre>
  
  <p>but still got the error.</p>
  
  <p>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? </p>
  
  <p>My upload code (ajax) is </p>
  
  <pre>
  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);
              }
          }
  </pre>
  
  <p>and the params for <code>file</code> are</p>
  
  <pre>
  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}
  
  </pre>