Show Image preview before uploading new server image

[growupanand]

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]

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

[growupanand]

@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]

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

[growupanand]

@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 -

  Discord-Clone/components/file-upload.tsx

  Line 51 in d04d67e

  <UploadDropzone

• 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 -

  Discord-Clone/components/file-upload.tsx

  Line 14 in d04d67e

  if (value && fileType === "image") {

[Yeasir0032]

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

[growupanand]

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]

You can wait

[growupanand]

<UploadDropzone component now supports onDrop prop.

FYI - pingdotgg/uploadthing#809