Reputation: 13
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