How to hide file input after file upload

Question

When a user clicks on the file input, they are prompted with the standard file picker and once selected, the upload begins. I have a custom progress bar which once it reaches 100%, it shows the image preview. However, the file picker is still there. I want to hide it once the preview shows. I am used to using jQuery whereby you can just select the element by class or ID and then hide it but don't believe it is as nice an easy with react. Is this possible or do I need to use state for this? Just seems like overkill to have to use state.

Here is the code which shows the progress bar and the preview image once file uploaded.

          {file && <ProgressBar file={file} setFile={setFile} />}
          {courses && (
            <>
              <div className={styles.course_image_holder}>
                <span
                  className={styles.delete_course_image}
                  onClick={() => console.log("delete me")}
                >
                  <MdDeleteForever />
                </span>
                <img
                  className={styles.image_preview}
                  src={`${process.env.REACT_APP_ASSET_URL}/${courses.courseImage}`}
                />
              </div>
            </>
          )}

And this is the actual file input which I have just styled differently so it doesn't look like the standard ugly file input

          <label className={styles.upload_label_course}>
            <input
              type="file"
              onChange={changeHandler}
              name="image"
              ref={register}
            />
            <span>
              <FaCloudUploadAlt />
            </span>
          </label>

The preview image also has a delete button in the top right corner in which case it should remove the preview and show the upload input again.

Viet · Accepted Answer · 2021-02-03 14:45:44Z

1

There is nothing with using state here, the purpose of state is to control/reflect updates to GUI, in this case you want to hide the input. You could choose either to hide the input using style: <input style={{visibility: shouldHide? 'visible': 'hidden' }} or, not render the input at all {shouldHide? <input>...</input} : null}

answered Feb 3, 2021 at 14:45

Viet

12.9k2 gold badges18 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

How to hide file input after file upload

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related