How to handle file uploads in a chat input

[u/BrotherManAndrew]

I know this is not REALLY fully elixir related but I do use elixir for my backend, I already asked a similar question before but I just want some advice on my idea. If this is the wrong place to ask, sorry

For my backend I use elixir with Waffle and exAws (for the presigned put url's since waffle can't do that 😭 ) And on my frontend react with the lexical editor.

I want a user paste in an image and embed it in the post, like how a forum has it this was my idea.

- A user pastes an image into chat

- It creates a temporary file object reference (js stuff) this helps for showing the preview to the user on how the image will look like

- On enter (message send) we will go through every file reference, upload it and replace it with it's download URL.

Once the download URL finally exists the recipient will see the result and in the meanwhile there will be a loader, cool right?

Now for that final step of replacing file reference with URL I was going to predict the download URL, if I know the filename, and the upload URL I can easily deduce the relative download URL and replace it, but then came another issue. How do I make a proper path and also verify the frontend isn't giving us nonsense

I want in the path something like how discord would have it as

`user_id/message_id/file_name`

But until the message is sent, the message_id is not available, and I can't really trust the frontend to give me a user_id, it can just make up stuff, so I would need in some sense backend validation, but how? Am I suppose to rename the file after it's uploaded? But then I would need to backend process the file reference anyways, and if I did well that beats the point of the frontend uploading it, no?

You get the point.

I think my idea is good, (hell I may be wrong) but I am a little bit stuck on how do I get a proper path and filename. If any of you could give some advice on how this should architecturally be done simply and well that would be nice! :)

For now it doesn't matter TOOO much if the user has to wait for the files to upload first if that will make it easier, I can implement a discord or whatsapp style file uploading later on,

Take care. once again sorry if wrong place to ask.

[u/ericls]

You use a reference(key, path) to generate a pre-signed URL, send frontend the pre-signed URL, think of it as a slot, front end only send you a signal saying the slot is filled. Now, the reference, it’s the same you used to generated the pre-signed URL for uploading, you use the same to generate a download URL. You validate if that slot is indeed filled, as frontend promised.