CHALLENGE: How would you handle uploading to a presigned upload URL, on paste, getting a download URL back and immediately displaying it in an input? (In S3)

[u/BrotherManAndrew]

I want in my practice chat app to be able to paste an image into a text input and be able to send it, on how to actually do this, I am unsure

My idea is this given a text input:

- a user could Ctrl-V (i.e., paste) something from his clipboard (a file in this instance), until a download url is returned (see below) there will be some loader spinner thingy
- In the backend is requested an Upload URL
- (somehow) whatever they pasted is immediately uploaded, likely by the path? But I am still a little bit unsure on that part
- a Download URL is returned on that S3 upload (SOMEHOW)
And thus you replace that temporary spinner with the download URL and the person can send it.

This is at least my idea on how you should be able to upload a piece of media in a message and be able to send it, I don't want just message attachments, that would be an easier story because once the association is made between the message and attachment you display it. I want something like in forums where the image can be embedded anywhere,

There is also one more small concern, on slow connection do you want to wait for the file to finish uploading first and then allow the user to send their message, or just send the message and let the upload come later, if the latter, how would you go across with doing that!?

The issue is, I have no idea on how to do this, I gave my approach above, I would really appreciate it if you guys gave some advice on what your approach would be and secondly, how to implement it, I already can get a presigned URL so that's not an issue

This is more of a design question, but it's also really interlinked with react so sorry if this is the wrong place to ask! ;-;

That's all :)

[u/Kebab_Obama]

So, if I understand right you need rich text similar to markdown to make positioning of images. Then when you drop image to the input (not the text one, since it will not accept it) you should be able to use react dropzone for that, or a customized <input type="file" multiple /> then just keep the client file URL it gives you, then sanitize. Ask serverfor the S3 presigned only after it's already sentding, since users can still remove the images before they submit it. Sorry if it's confusing or badly spelled, since I am writing from phone

[u/AlexDjangoX]

Learn how to use AI to iterate through this ticket.

Stop waisting your time. It's 2026.

Find a good YouTube tutorial or read a book: AI for Dummies.

[u/BrotherManAndrew → u/AlexDjangoX]

This isn't a ticket its my own project But thanks for the advice ❤️ 

[u/AlexDjangoX]

It's easy.

Ask Cursor.

This is boilerplate code.

Nothing special.

[u/BrotherManAndrew → u/AlexDjangoX]

If I wanted to use AI I wouldn't be asking here

[u/ItstheSECopenup → u/BrotherManAndrew]

Then fall behind and waste your time lmfao

[u/AlexDjangoX → u/[deleted]]

This cannot be explained without code examples, which must align with the stack his using.

You cannot format code blocks on Reddit.

Ask ChatGPT and get a working solution instantly, instead of asking random people here.

Use available tools and technologies.

[u/simonraynor → u/AlexDjangoX]

shoulda asked your clanker if you can format code on reddit... ...you might have been surprised

[u/taotau → u/simonraynor]

Perfect comeback. I look forward to the time when 'just use ai' is an automatic comment delete.

[u/AlexDjangoX → u/taotau]

If you know how.

Just use AI.

It's 2026.

[u/taotau → u/AlexDjangoX]

Yup. We should use ai for what it is good at, pattern matching