CODEWITHSUNDEEP
reactjsamazon-web-servicesamazon-s3elixirphoenix-framework
Ian
Ian

Reputation: 562

Uploading images to S3 with React and Elixir/Phoenix

I'm trying to scheme how I'm going to accomplish this and so far I have the following:

I grab a file in the front end and on submit send the file name and type to the back end where it generates a presigned URL. I send that to the FE. I then send the file on the front end.

The issue here is that when I generate the presign, I want to commit my UUID filename going to S3 in my database via the back end. I don't know if the front end will successfully complete this task. I can think of some janky ways to garbage collect this - but I'm wondering, is there a typically prescribed way to do this that doesn't introduce the possibility of failures the BE isn't aware of?

Upvotes: 0

Views: 352

Answers (2)

giraffesyo
giraffesyo

Reputation: 5362

The way I'm currently handling this is as such:

  1. Compress the image client side.
  2. Send the image to the backend application server.
  3. Create a UUID on the backend.
  4. Send the image from s3 to the backend, using the UUID as the key.
  5. On success, put the UUID into the database.
  6. Respond to the client with the UUID so it can display the image.

By following these steps, you don't introduce error into your database.

Upvotes: 0

Abhyudit Jain
Abhyudit Jain

Reputation: 3748

Yes there's an alternate way. You can configure your bucket so that it sends an event whenever an object is created/updated. You can either send this event to a SNS topic or AWS Lambda.

From there you can make a request to your Phoenix app webhook, that can insert it into the database.

The advantage is that the event will come only when the file has been created.

For more info, you can read the following: https://docs.aws.amazon.com/AmazonS3/latest/dev/NotificationHowTo.html

Upvotes: 3

Related Questions