title: Rails: Uploading dropzone, S3, carrierwave, not working in Safari, but works in Google Chrome
body: <p>I'm using dropzone with S3 and carrierwave. I'm able to upload images through Google Chrome, but I can't get it to work with Safari, which is weird.</p>
  
  <p>This is my form</p>
  
  <pre><code>= nested_form_for @trip, html: { multipart: true, id: 'fileupload', class: 'directUpload', data: { 'form-data' =&gt; (@s3_direct_post.fields), 'url' =&gt; @s3_direct_post.url, 'host' =&gt; URI.parse(@s3_direct_post.url).host } } do |f|
    .dropzone#imageUpload
      = f.simple_fields_for :trip_images, TripImage.new, child_index: TripImage.new.object_id do |ff|
      = ff.file_field :photo, class: 'hide form-fields'
      = f.button :submit, id: "submit-data"
  </code></pre>
  
  <p>This is in the Trip controller</p>
  
  <pre><code>def set_s3_direct_post
    @s3_direct_post = S3_BUCKET.presigned_post(key: "/uploads/temporary/#{SecureRandom.uuid}/${filename}", success_action_status: '201', acl: 'public-read', content_type: 'image/jpeg')
  end
  </code></pre>
  
  <p>This is TripImage model</p>
  
  <pre><code>class TripImage &lt; ActiveRecord::Base
    belongs_to :resource, :polymorphic =&gt; true
    mount_uploader :photo, PhotoUploader
    after_create :process_async
  
    def to_jq_upload
      {
        'name' =&gt; read_attribute(:attachment_file_name),
        'size' =&gt; read_attribute(:attachment_file_size),
        'url' =&gt; attachment.url(:original),
        'thumbnail_url' =&gt; attachment.url(:thumb),
        'delete_url' =&gt; "/photos/#{id}",
        'delete_type' =&gt; 'DELETE'
      }
    end
  
    private
  
    def process_async
      PhotoVersioningJob.set( wait: 5.seconds ).perform_later(self.id)
    end
  
  end
  </code></pre>
  
  <p>This is js</p>
  
  <pre><code>$(function(){
    $('.directUpload').find(".dropzone").each(function(i, elem) {
      s3ImageUpload(elem);
    });
  })
  
  function s3ImageUpload(elem){
    var fileInput    = $(elem);
    var form         = $(fileInput.parents('form:first'));
    var form_url = form.data('url');
    var form_data = form.data('form-data');
    Dropzone.options.imageUpload = {
      url: form_url,
      params: form_data,
      uploadMultiple: false,
      addRemoveLinks: true,
      removedfile: function(file){
        //some codes
      },
      success: function(file, serverResponse, event){
        //some codes
      },
      error: function(data){
        //some codes
      }
    };
  }
  </code></pre>
  
  <p>EDIT: Current CORS configuration</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"&gt;
      &lt;CORSRule&gt;
          &lt;AllowedOrigin&gt;*.example.com&lt;/AllowedOrigin&gt;
          &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
          &lt;AllowedMethod&gt;POST&lt;/AllowedMethod&gt;
          &lt;AllowedMethod&gt;PUT&lt;/AllowedMethod&gt;
          &lt;MaxAgeSeconds&gt;3000&lt;/MaxAgeSeconds&gt;
          &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
          &lt;AllowedHeader&gt;origin&lt;/AllowedHeader&gt;
      &lt;/CORSRule&gt;
  &lt;/CORSConfiguration&gt;
  </code></pre>
  
  <p><em>Tested and doesn't work</em></p>
  
  <p>EDIT: I also have S3 direct upload, not sure if this affects it too?</p>
  
  <pre><code>S3DirectUpload.config do |c|
    c.access_key_id = Rails::AWS.config['access_key_id']       # your access key id
    c.secret_access_key = Rails::AWS.config['secret_access_key']   # your secret access key
    c.bucket = Rails::AWS.config['bucket_name']              # your bucket name
    c.region = 's3'             # region prefix of your bucket url. This is _required_ for the non-default AWS region, eg. "s3-eu-west-1"
  end
  </code></pre>