I have 2 apps I have re-written from older versions of Rails (3.2 and 4.2.1) to Rails v6.1.4.1 and they both use the s3_direct_upload gem.
On Both apps I do not get any errors in the Webdev console or in the Rails console or in the log or ANYPLACE I can find. The buckets are displaying just fine in the case of Both Apps.
I checked the CORS Setup and it is fine. Both of these apps are currently running on Heroku with the code the same way it is now but are working.
Does anyone know if the s3_direct_upload gem actually works with Rails 6?
I get the file select window, I choose the filename, it shows the filename but instead of it starting the upload and showing the progress bar it just acts as if I did nothing at that point. No errors no nothing anyplace I can find. When I have the original app side by side at that point I should see a quick progress bar come up and then go away, the page refreshes and shows the new file. IN the 2 Apps I have re-written, it never gets past the file select and showing the file name of what I have selected. I will show the general files so at least that can be seen:
So that is question 1, does the s3_direct_upload gem work in Rails 6?
Here are the basic files that are required:
s3_direct_upload.rb
S3DirectUpload.config do |c|
c.access_key_id = Rails.configuration.aws[:access_key_id]
c.secret_access_key = Rails.configuration.aws[:secret_access_key]
c.bucket = Rails.configuration.aws[:bucket]
c.region = "ENV['AWS_REGION']"
c.url = "https://#{c.bucket}.s3.amazonaws.com/"
end
aws.rb
require 'aws-sdk-v1'
# Rails.configuration.aws is used by AWS, Paperclip, and S3DirectUpload
Rails.configuration.aws = YAML.load(ERB.new(File.read("#{Rails.root}/config/aws.yml")).result)[Rails.env].symbolize_keys!
AWS.config(logger: Rails.logger)
AWS.config(Rails.configuration.aws)
paperclip.rb
Paperclip::Attachment.default_options.merge!(
url: ":s3_domain_url",
path: ":class/:attachment/:id/:style/:filename",
storage: :s3,
s3_credentials: Rails.configuration.aws,
s3_permissions: :private,
s3_protocol: "https",
s3_region: ENV["AWS_REGION"]
)
aws.rb
require 'aws-sdk-v1'
# Rails.configuration.aws is used by AWS, Paperclip, and S3DirectUpload
Rails.configuration.aws = YAML.load(ERB.new(File.read("#{Rails.root}/config/aws.yml")).result)[Rails.env].symbolize_keys!
AWS.config(logger: Rails.logger)
AWS.config(Rails.configuration.aws)
aws.yml (I changed the bucket names to mybucket, the pictures work so I know the bucket works)
defaults: &defaults
development:
<<: *defaults
region: <%=ENV["AWS_REGION"]%>
bucket: "mybucket"
access_key_id: <%=ENV["AWS_ACCESS_KEY_DPFR"]%>
secret_access_key: <%=ENV["AWS_SECRET_KEY_DPFR"]%>
test:
<<: *defaults
region: <%=ENV["AWS_REGION"]%>
bucket: "mybucket-test"
production:
region: <%=ENV["AWS_REGION"]%>
access_key_id: <%=ENV["AWS_ACCESS_KEY_DPFR"]%>
secret_access_key: <%=ENV["AWS_SECRET_KEY_DPFR"]%>
bucket: "mybucket"
Here are the relevant gems: (If someone wants to see the entire gemfile let me know)
gem 'paperclip-aws', '~> 1.6', '>= 1.6.8'
gem 'aws-sdk-v1', '~> 1.67'
gem 's3_direct_upload', '~> 0.1.7'
And here is the relevant js s3_direct_upload.js.coffee. (I even tried converting to strait JS vs the coffee and no difference. The alert is in there because I wanted to be sure it was reading the file and it does I get the alert.
#= require jQuery-fileupload/basic
#= require jQuery-fileupload/vendor/tmpl
alert("We are in the S3_Direct_Upload coffee file");
$ = jQuery
$.fn.S3Uploader = (options) ->
# support multiple elements
if @length > 1
@each ->
$(this).S3Uploader options
return this
$uploadForm = this
settings =
path: ''
additional_data: null
before_add: null
remove_completed_progress_bar: true
remove_failed_progress_bar: false
progress_bar_target: null
click_submit_target: null
allow_multiple_files: true
dropZone: null
$.extend settings, options
current_files = []
forms_for_submit = []
if settings.click_submit_target
settings.click_submit_target.click ->
form.submit() for form in forms_for_submit
false
$wrapping_form = $uploadForm.closest('form')
if $wrapping_form.length > 0
$wrapping_form.off('submit').on 'submit', ->
$wrapping_form.find('.s3_uploader input').prop "disabled", true
true
setUploadForm = ->
$uploadForm.find("input[type='file']").fileupload
dropZone: settings.dropzone_target
add: (e, data) ->
file = data.files[0]
file.unique_id = Math.random().toString(36).substr(2,16)
unless settings.before_add and not settings.before_add(file)
current_files.push data
if $('#template-upload').length > 0
data.context = $($.trim(tmpl("template-upload", file)))
$(data.context).appendTo(settings.progress_bar_target || $uploadForm)
else if !settings.allow_multiple_files
data.context = settings.progress_bar_target
if settings.click_submit_target
if settings.allow_multiple_files
forms_for_submit.push data
else
forms_for_submit = [data]
else
data.submit()
start: (e) ->
$uploadForm.trigger("s3_uploads_start", [e])
progress: (e, data) ->
if data.context
progress = parseInt(data.loaded / data.total * 100, 10)
data.context.find('.bar').css('width', progress + '%')
done: (e, data) ->
content = build_content_object $uploadForm, data.files[0], data.result
callback_url = $uploadForm.data('callback-url')
if callback_url
content[$uploadForm.data('callback-param')] = content.url
$.ajax
type: $uploadForm.data('callback-method')
url: callback_url
data: content
beforeSend: ( xhr, settings ) ->
event = $.Event('ajax:beforeSend')
$uploadForm.trigger(event, [xhr, settings])
return event.result
complete: ( xhr, status ) ->
event = $.Event('ajax:complete')
$uploadForm.trigger(event, [xhr, status])
return event.result
success: ( data, status, xhr ) ->
event = $.Event('ajax:success')
$uploadForm.trigger(event, [data, status, xhr])
return event.result
error: ( xhr, status, error ) ->
event = $.Event('ajax:error')
$uploadForm.trigger(event, [xhr, status, error])
return event.result
data.context.remove() if data.context && settings.remove_completed_progress_bar # remove progress bar
$uploadForm.trigger("s3_upload_complete", [content])
current_files.splice($.inArray(data, current_files), 1) # remove that element from the array
$uploadForm.trigger("s3_uploads_complete", [content]) unless current_files.length
fail: (e, data) ->
content = build_content_object $uploadForm, data.files[0], data.result
content.error_thrown = data.errorThrown
data.context.remove() if data.context && settings.remove_failed_progress_bar # remove progress bar
$uploadForm.trigger("s3_upload_failed", [content])
formData: (form) ->
data = $uploadForm.find("input").serializeArray()
fileType = ""
if "type" of @files[0]
fileType = @files[0].type
data.push
name: "content-type"
value: fileType
key = $uploadForm.data("key")
.replace('{timestamp}', new Date().getTime())
.replace('{unique_id}', @files[0].unique_id)
.replace('{cleaned_filename}', cleaned_filename(@files[0].name))
.replace('{extension}', @files[0].name.split('.').pop())
# substitute upload timestamp and unique_id into key
key_field = $.grep data, (n) ->
n if n.name == "key"
if key_field.length > 0
key_field[0].value = settings.path + key
# IE <= 9 doesn't have XHR2 hence it can't use formData
# replace 'key' field to submit form
unless 'FormData' of window
$uploadForm.find("input[name='key']").val(settings.path + key)
data
build_content_object = ($uploadForm, file, result) ->
content = {}
if result # Use the S3 response to set the URL to avoid character encodings bugs
content.url = $(result).find("Location").text()
content.filepath = $('<a />').attr('href', content.url)[0].pathname
else # IE <= 9 retu rn a null result object so we use the file object instead
domain = $uploadForm.find('input[type=file]').data('url')
key = $uploadForm.find('input[name=key]').val()
content.filepath = key.replace('/{filename}', '').replace('/{cleaned_filename}', '')
content.url = domain + key.replace('/{filename}', encodeURIComponent(file.name))
content.url = content.url.replace('/{cleaned_filename}', cleaned_filename(file.name))
content.filename = file.name
content.filesize = file.size if 'size' of file
content.lastModifiedDate = file.lastModifiedDate if 'lastModifiedDate' of file
content.filetype = file.type if 'type' of file
content.unique_id = file.unique_id if 'unique_id' of file
content.relativePath = build_relativePath(file) if has_relativePath(file)
content = $.extend content, settings.additional_data if settings.additional_data
content
cleaned_filename = (filename) ->
filename.replace(/\s/g, '_').replace(/[^\w.-]/gi, '')
has_relativePath = (file) ->
file.relativePath || file.webkitRelativePath
build_relativePath = (file) ->
file.relativePath || (file.webkitRelativePath.split("/")[0..-2].join("/") + "/" if file.webkitRelativePath)
#public methods
@initialize = ->
# Save key for IE9 Fix
$uploadForm.data("key", $uploadForm.find("input[name='key']").val())
setUploadForm()
this
@path = (new_path) ->
settings.path = new_path
@additional_data = (new_data) ->
settings.additional_data = new_data
@initialize()
I tried having webpacker server the JS files no difference, I am starting to suspect the s3_direct_upload gem doesn't work with newer rails as that is pretty much the only difference left, OR there is some configuration change that needs to be made that I haven't been able to find in the last 3 days.
Any help would be greatly appreciated, I have EVERYTHING ELSE working on these 2 apps 100% but the pic UPLOAD.
Thank You, Scott