Preview File before uploading in proper way.(React&Typescript)

Question

I am trying to preview the image file before uploading.

const [selectedFile, setSelectedFile] = useState<File>();
const [preview, setPreview] = useState<string>();

<form action="" onSubmit={onUploadImage}>
                  <input
                    name="file"
                    type="file"
                    accept="image/*"
                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
                      if (!event.target.files) return
                      setSelectedFile(event.target.files[0]);
                      setPreview(URL.createObjectURL(event.target.files[0]));
                    }} />
                    <img src={preview} alt="preview" />
                </form>

This code above is working.

My problem I would like to solve is finding better way to preview the image file.

As my code, I set selectedFile as type of File like useState<File>(); It was not allowed to set selectedFile to img tag <img src={selectedFile} alt="preview" /> because of type errror. That is why I made a new state const [preview, setPreview] = useState<string>(); to preview image instead of using selectedFile since src should be string. But this is a hassle way to set the state twice.

If you have better idea not to use double states like my code, I would really appreciate. If possible, I would like to keep to use useState<File>()

Amr Eraky · Accepted Answer · 2022-11-10 07:33:29Z

2

You should first set the default of selectedFile to be null,
then set src of image directly :

const [selectedFile, setSelectedFile] = useState<File | null>(null);

<input
   onChange={(event: ChangeEvent<HTMLInputElement>) => {
      if (!event.target.files) return
      setSelectedFile(event.target.files[0]);
   }}
/>
<img src={selectedFile === null ? '' : URL.createObjectURL(selectedFile)} alt="preview" />

edited Nov 10, 2022 at 7:33

answered May 11, 2022 at 10:36

Amr Eraky

1,82610 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TiShow Over a year ago

Adding null value to default ! That makes sense. Appreciated.

TiShow Over a year ago

I still got the error "Type 'string | false' is not assignable to type 'string | undefined'. Type 'boolean' is not assignable to type 'string'."

Amr Eraky Over a year ago

I've updated the solution's code src={selectedFile === null ? '' : URL.createObjectURL(selectedFile)} .. instead of src={selectedFile !== null && URL.createObjectURL(selectedFile)}

Collectives™ on Stack Overflow

Preview File before uploading in proper way.(React&Typescript)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related