Show Image preview before uploading new server image

Yeasir0032 / Discord-Clone

A Discord clone built using Next.js, Tailwind CSS, and LiveKit, providing users with real-time text, voice, and video communication features.

https://discord-a.up.railway.app/

MIT License

39 stars 47 forks source link

Show Image preview before uploading new server image #19

Open growupanand opened 4 months ago

growupanand commented 4 months ago

Is your feature request related to a problem? Please describe. A modal window appears asking the user to upload their server image and provide a name when they sign up or start a new server. After the user selects the file there is no preview of the image showing before uploading or even after uploading.

Describe the solution you'd like A preview image should shown before the user uploads the file when they select an image file.

Describe alternatives you've considered We can upload the image immediately when the user clicks the "create" button, providing a better user experience than uploading the image first and then creating the server by clicking on the "create" button.

Additional context

Before upload

After upload

growupanand commented 4 months ago

@Yeasir0032 Assign the issue so that I can start working on it.

growupanand commented 4 months ago

@Yeasir0032 do you agree with below solution?

We can upload the image immediately when the user clicks the "create" button, providing a better user experience than uploading the image first and then creating the server by clicking on the "create" button.

Yeasir0032 commented 4 months ago

Actually this is handled with uploadthing Do check it if you really can do it

growupanand commented 3 months ago

@Yeasir0032 There are two points below that I want to discuss with you:

Showing preview before upload You are using <UploadDropzone from "@uploadthing/react" for handling the whole file selection and upload flow. As per my knowledge after reading its documentation, there is no way to get the currently selected file before uploading it. Solution - Instead of relying on <UploadDropzone for image upload flow, we can use useUploadThing like here. This way we have full control of the upload flow. Reference - https://github.com/Yeasir0032/Discord-Clone/blob/d04d67e9e1692128f93e41afe462189993ea1467/components/file-upload.tsx#L51
Showing preview after upload While we implement a custom image upload flow which can take some time, I can fix showing the uploaded image preview. Reference - https://github.com/Yeasir0032/Discord-Clone/blob/d04d67e9e1692128f93e41afe462189993ea1467/components/file-upload.tsx#L14

Yeasir0032 commented 3 months ago

Check issue 10. It is working on to replace upload thing

growupanand commented 3 months ago

Until new upload service #10 is implemented, Should I fix Showing preview after upload for the current upload flow? Or just wait for the new upload service?

Yeasir0032 commented 3 months ago

You can wait

growupanand commented 3 months ago

<UploadDropzone component now supports onDrop prop.

FYI - https://github.com/pingdotgg/uploadthing/pull/809