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 :activerecordShrine.plugin :cached_attachment_dataShrine.plugin :restore_cached_dataShrine.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"