Uploading images to amazon s3 works locally but when I try to upload an image via railway.app, I get a mysterious 422 error. I've set the correct permissions on my bucket.
I have tried two ways of uploading images and both resorted to these errors.
The error arises when I try to attach the image to a record and save it.
Another time is when I try to create a blob.
blob = ActiveStorage::Blob.create_before_direct_upload!(filename: blob_args[:filename],
byte_size: blob_args[:byte_size],
checksum: blob_args[:checksum],
content_type: blob_args[:content_type])
I have no idea.
EDIT:
I have no validations on this record.
EDIT:
I am hitting this controller to create a blob, ultimately sending my a signed_id to my front end
class DirectUploadsController < ActiveStorage::DirectUploadsController
include ActionController::HttpAuthentication::Basic::ControllerMethods
skip_before_action :verify_authenticity_token
def create
blob = ActiveStorage::Blob.create_before_direct_upload!(filename: blob_args[:filename],
byte_size: blob_args[:byte_size],
checksum: blob_args[:checksum],
content_type: blob_args[:content_type])
render json: direct_upload_json(blob)
end
private
def direct_upload_json(blob)
blob.as_json(root: false, methods: :signed_id).merge(service_url: url_for(blob)).merge(direct_upload: {
url: blob.service_url_for_direct_upload,
headers: blob.service_headers_for_direct_upload
})
end
end
My FE is sending an image to my Rails API. This works locally, it even gets uploaded into a bucket but when I do this in a remote server, creating a blob or attaching an image to a record resorts to a status 422 log from my FE.
Here is the FE Code, this is in Angular2.
uploadFile = (name:any, the_attachment:any) => { // name is a string, the_attachment is a File object
const upload = new DirectUpload(
the_attachment,
'https://some-api.railway.app/rails/active_storage/direct_uploads', // This url is exposed by default in your app
);
upload.create((error, blob) => {
if (error) {
// debugger
console.log(error)
// Something happened, handle the error
} else {
// blob.signed_id, a String, is the key piece of data that lets Rails identify the file we are referring to
let signed_id = blob.signed_id;
// debugger
// BONUS: We can already request the uploaded file from Rails by using this url.
// let url = `/rails/active_storage/blobs/${signed_id}/${"whatever_we_want_the_filename_to_be"}`;
let request_body = {
logo: signed_id
}
// post_thing_to_rails(request_body) // This can be REST, or GraphQL, doesn't matter
this.http.put("https://some-api.railway.app/api/v1/upload_logo/38", request_body).subscribe((resp)=>{
console.log(resp)
})
}
});
AWS CORS Policy JSON
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"POST",
"DELETE",
"GET"
],
"AllowedOrigins": [
"https://some-app.up.railway.app/",
"https://some-admin.netlify.app/",
],
"ExposeHeaders": []
}
]
POST https://some-app.up.railway.app/rails/active_storage/direct_uploads 422
q @ polyfills.95931a543c43c26d.js:1
scheduleTask @ polyfills.95931a543sdfsdfc43c26d.js:1
onScheduleTask @ polyfills.95931a543c43c26d.js:1
scheduleTask @ polyfills.95931a543c43c26d.js:1
scheduleTask @ polyfills.95931a54sdfs3c43c26d.js:1
scheduleMacroTask @ polyfills.95931a543c43c26d.js:1
Me @ polyfills.95931a543c43c26d.js:1
(anonymous) @ polyfills.95931a543c43c26d.js:1
o.<computed> @ polyfills.95931a543c43c26d.js:1
value @ main.a7200f0b44d7afc6.js:1
(anonymous) @ main.a7200f0b44d7afc6.js:1
value @ main.a7200f0b44d7afc6.js:1
(anonymous) @ main.a7200f0b44d7afc6.js:1
invokeTask @ polyfills.95931a543c43c26d.js:1
onInvokeTask @ main.a7200f0b44d7afc6.js:1
invokeTask @ polyfills.95931asdf543c43c26d.js:1
runTask @ polyfills.95931a543c43c26d.js:1
invokeTask @ polyfills.959sdf31a543c43c26d.js:1
Z @ polyfills.95931a543c43c26d.js:1
N @ polyfills.95931a543c43c26d.js:1
B @ polyfills.95931a543c43c26d.js:1
load (async)
J.t @ polyfills.95931a543c43c26d.js:1
scheduleTask @ polyfills.95931a543c43c26d.js:1
onScheduleTask @ polyfills.95931a543c43c26d.js:1
scheduleTask @ polyfills.95931a543c43c26d.js:1
scheduleTask @ polyfills.95931a543c43c26d.js:1
scheduleEventTask @ polyfills.95931a543c43c26d.js:1
(anonymous) @ polyfills.95931a543c43c26d.js:1
i.<computed>.Y.<computed>.<computed> @ polyfills.95931a543c43c26d.js:1
value @ main.a7200f0b44d7afc6.js:1
value @ main.a7200f0b44d7afc6.js:1
value @ main.a7200f0b44d7afc6.js:1
uploadFile @ main.a7200f0b44d7afc6.js:1
onSubmit @ main.a7200f0b44d7afc6.js:1
(anonymous) @ main.a7200f0b44d7afc6.js:1
km @ main.a7200f0b44d7afc6.js:1
i @ main.a7200f0b44d7afc6.js:1
next @ main.a7200f0b44d7afc6.js:1
_next @ main.a7200f0b44d7afc6.js:1
next @ main.a7200f0b44d7afc6.js:1
(anonymous) @ main.a7200f0b44d7afc6.js:1
$r @ main.a7200f0b44d7afc6.js:1
next @ main.a7200f0b44d7afc6.js:1
emit @ main.a7200f0b44d7afc6.js:1
onSubmit @ main.a7200f0b44d7afc6.js:1
(anonymous) @ main.a7200f0b44d7afc6.js:1
km @ main.a7200f0b44d7afc6.js:1
i @ main.a7200f0b44d7afc6.js:1
(anonymous) @ main.a7200f0b44d7afc6.js:1
invokeTask @ polyfills.95931a543c43c26d.js:1
onInvokeTask @ main.a7200f0b44d7afc6.js:1
invokeTask @ polyfills.95931a543c43c26d.js:1
runTask @ polyfills.95931a543c43c26d.js:1
invokeTask @ polyfills.95931a543c43c26d.js:1
Z @ polyfills.95931a543c43c26d.js:1
N @ polyfills.95931a543c43c26d.js:1
B @ polyfills.95931a543c43c26sdfsdfd.js:1
Show 27 more frames
main.a7200f0b44d7afc6.js:1 Error creating Blob for "386-3863556_ruby-clipart-vector-ruby-programming-language-png-transparent.png". Status: 422