This is a little bit different use case than traditional approach where we first upload our assets/files to our server-machine, do some munging and processing, and, then upload the files to AWS-S3 like services. Rails developers generally use tools like PaperClip, CarrierWave, Shrine, Active Storage, etc. Although there are numerous other tools to do the job, but these are particularly famous in the industry.
Today, you will go through the process of uploading assets to storage like S3 directly from the browser, bypassing your app-server.
Normally you do direct-upload when your asset-size exceeds 4MB. We do this because PASS services like Heroku use ephemeral filesystem; this makes the storage less trustworthy. It’s not that you can’t use it to upload files in the form submission, but, for larger files, it might take longer to upload and by the time file is uploaded completely its possible that it’s already deleted.
Note: Ephemeral File System
Each dyno gets its own ephemeral filesystem, with a fresh copy of the most recently deployed code. During the dyno’s lifetime its running processes can use the filesystem as a temporary scratchpad, but no files that are written are visible to processes in any other dyno and any files written will be discarded the moment the dyno is stopped or restarted. For example, this occurs any time a dyno is replaced due to application deployment and approximately once a day as part of normal dyno management.
Tools to be Used
- Create a S3 bucket
- Get the AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY from root account console.
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 403.
you will encounter this error if you have forgotten to configure the CORS policy properly. See the sample policy that is usable
<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>http://localhost:3000</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>