Arif
Arif

Reputation: 13

Rails Shrine with Uppy can't perform direct uploads

Trying to integrate uppy on my rails app. I'm using rails 7 minimal version with Shrine gem. I'm able to upload to s3 but as i try to integrate uppy it just fails.

I get errors in browser console and it's not very helpful.

[Uppy] [09:22:09] se(...)[Oe] is undefined [Uppy] [09:22:09] TypeError: se(...)[Oe] is undefined

Here is shrine configuration below:

config/initializers/shrine.rb

require "shrine"
require "shrine/storage/s3"

s3_options = {
  bucket: "testing-app",
  access_key_id: "<hidden>",
  secret_access_key: "<hidden>",
  region: "ap-south-1"
}

Shrine.storages = {
  cache: Shrine::Storage::S3.new(prefix: "cache", **s3_options),
  store: Shrine::Storage::S3.new(**s3_options)
}

Shrine.plugin :activerecord
Shrine.plugin :cached_attachment_data
Shrine.plugin :restore_cached_data
Shrine.plugin :presign_endpoint, presign_options: -> (request) {
  filename = request.params["filename"]
  type = request.params["type"]
  {
    content_disposition: ContentDisposition.inline(filename),
    content_type: type,
    content_length_range: 0..(10 * 1024 * 1024),
  }
}

Added js below html here.

app/views/photos/new.html.erb:

<%= form_for @photo do |f| %>
  <%= f.hidden_field :image, value: @photo.cached_image_data, id: nil %>
  <%= f.text_field :name, placeholder: "Photo name" %>
  <div id="uppy"></div>
  <%= f.submit %>
<% end %>


<script type="module">
  import { Uppy,Dashboard, AwsS3 } from "https://releases.transloadit.com/uppy/v4.0.4/uppy.min.mjs"
  const uppy = new Uppy()
  .use(Dashboard,{
    inline: true,
    target: '#uppy',
  })
  .use(AwsS3, {
    companionUrl: "/"  
  })

  uppy.on('upload-success', function (file, response) {
  var uploadedFileData = JSON.stringify({
    id: file.meta['key'].match(/^cache\/(.+)/)[1],
    storage: 'cache',
    metadata: {
      size:      file.size,
      filename:  file.name,
      mime_type: file.type,
    }
  })
  })
</script>

config/routes.rb

  resources :photos

  mount Shrine.presign_endpoint(:cache) => "/s3/params"

Upvotes: 0

Views: 97

Answers (0)

Related Questions