Epic: Upload images to AWS S3 via Phoenix LiveView

[nelsonic]

At present this repo is just a loose collection of notes and some sample code.
What it should be instead is an end-to-end working example of uploading, compressing, resizing, rotating and cropping images.

Goal

Our goal with image uploads is to be able to seamlessly upload any type of image
have it saved in a reliable place e.g. S3 (though we can research cheaper comparable options later...)
and display that image in our App and other places.

We want to be able to upload in a Web interface and in a Flutter App.

Todo

• Move all existing code to an _archive directory in case we need to refer to any of it.
  • Move the README.md to _archive too so you have a fresh start.

  Note: it will all be DELETED once we have fully working version.

• Watch Chris McCord's LiveView Uploads Demo:

Phoenix LiveView Uploads Deep Dive: https://youtu.be/PffpT2eslH8

• Create a new Phoenix Project and replicate what Chris but document the steps
  e.g: https://github.com/dwyl/phoenix-chat-example

• Upload images to AWS S3: https://gist.github.com/chrismccord/37862f1f8b1f5148644b75d20d1cb073

• Use a Content ID cid as the image name so that its unique.

• Once images are uploaded to S3, they should be "processed" by a Lambda function.

  Note: resizing and compressing images is a well-known/resolved challenge:
  https://aws.amazon.com/blogs/compute/resize-images-on-the-fly-with-amazon-s3-aws-lambda-and-amazon-api-gateway/

• In-browser resizing. This will be it's own Epic which will start with research for existing solutions. 🔍

• Deploy the app to Fly.io: https://fly.io/dashboard/dwyl-image-uploads/ e.g: https://image-upload.fly.dev/ 🚀

If we can get to the point where we are uploading images in a Phoenix LiveView App we will already be showing great progress.
Don't worry too much about the UI/UX at this stage. Use TailwindUI:
https://tailwindui.com/components/application-ui/forms/form-layouts

@LuchoTurtle as discussed on standup this morning, this should be the next "big chunk" of work you should attempt to tackle.
If you have questions, please comment. 🙏

[nelsonic]

When Chris says "modern application" at 01:03 showing a Modal as input I want to shake my monitor!

🙄

[nelsonic]

@LuchoTurtle as noted on our Standup call: Chris's LiveView Uploads video builds upon his twitter clone video(s).
The idea is not to follow it step-by-step but just use it as a reference to know that it's possible to do uploads in Phoenix.
Sadly the nature of YT Videos relating to frameworks like Phoenix is that they become out-of-date quite quickly when a newer version is released. That's the reason we tend to stick to written tutorials that can more easily be updated/maintained.

Our objective with this repo is just to have the most barebones image uploads working.
If you are able to follow the docs: https://hexdocs.pm/phoenix_live_view/uploads.html you should get quite close.

Thankfully you aren't in the dark when approaching this challenge as others have documented some of the steps e.g:
https://medium.com/@traceyonim22/how-to-enable-file-uploads-with-phoenix-liveview-3d224de9def5
and: https://github.com/mcrumm/live_upload_example which uses Phoenix 1.6 👌

[nelsonic]

@LuchoTurtle, as usual, please post comments with your progress and especially when you get stuck. 💬 🙏

[LuchoTurtle]

I'm trying to get a simple file upload to show the files on the web app running but nothing is being shown.
I'm getting this error since setting up the project:

I don't know if this is affecting the "file upload" because I'm using the <.live_file_input/> element from https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html#live_file_input/1...

[LuchoTurtle]

I think I fixed it.
The above error shown on console was because of <.flash_group flash={@flash} /> that was on top of the file. It was rendering components with id="disconnected", which were not used.

The reason file import wasn't working it's because the <form> with the phx-submit was inside another one. This, for some reason, caused conflicts and wasn't adding the file to the list of files that was declared inside the LiveView via

     |> allow_upload(:image_list, accept: ~w(video/* image/*), max_entries: 6, chunk_size: 64_000)}

on the mount/3 function.

[LuchoTurtle]

I fixed it. Uploading now works.
But I need to show the progress to the person and the URL of the uploaded image inside the bucket as well, now ⚡

[nelsonic]

@LuchoTurtle can’t say I understand why CORS would be an issue… are the images being uploaded from the Browser/Client or Server? 💭

[LuchoTurtle]

It's being uploaded from the client, because there aren't any files being saved on the server. However, the pre-signing occurs in the server, which is a necessary step to be able to upload to the S3 bucket.

That's at least how they do it in the Phoenix guide -> https://hexdocs.pm/phoenix_live_view/uploads-external.html#content

[nelsonic]

Ok. keep going with this approach. (for now, so that you don't lose track)
Ideally we should be uploading from the server if possible.
But if uploading from the client can be done securely, and it enables the progress indicator, then let's go with that.
My only "concern" is we will have to re-implement it from scratch in Dart/Flutter ...
whereas if we did it server-side an API would be a lot easier and then Flutter is easy. 💭

[nelsonic]

Demo is looking good. Please upload screen shots of your progress so others can see. 🙏

[LuchoTurtle]

Here are two screenshots.
The person uploads locally and they, after confirming, upload the image to the S3 bucket.

[LuchoTurtle]

If you could give me access to search for public applications in Lambda Functions, that'd be awesome :)

I'm getting this error:

User: arn:aws:iam::110797354241:user/lucho-localhost is not authorized to perform: serverlessrepo:SearchApplications on resource: arn:aws:serverlessrepo:eu-west-3:110797354241:applications/*

This oughta do it https://stackoverflow.com/questions/58563456/lambda-creation-error-creating-application-you-are-not-authorized-to-perform-s

[nelsonic]

if I search for "serverless" in the IAM permissions there are no results:

In Policies: https://us-east-1.console.aws.amazon.com/iamv2/home#/policies

[LuchoTurtle]

Apparently you need extra steps to have that policy show up.
Perhaps checking https://stackoverflow.com/questions/59354412/cannot-find-any-serverlessrepo-permissions-in-my-aws-permissions-policies-list might help

[LuchoTurtle]

I'm trying to search for public lambda applications in https://eu-west-3.console.aws.amazon.com/lambda/home?region=eu-west-3#/create/application.

[nelsonic]

Followed the instructions in the SO post and created:

So you should have access to all the Serverless Apps. 🤞

[LuchoTurtle]

Confirmed 👌
Thanks!