CODEWITHSUNDEEP
formikreact-typescript
user19989236
user19989236

Reputation: 31

How to handle formik state to show file upload name?

I'm using formik to handle my form for this file upload input. I want to show the name of the files currently in the dropzone of the files or one line bellow. however, right now im not seeing a name just the word item. any help?

    <div className="mb-3">
                    <Heading type="h6-small-bold">
                      <label htmlFor="files">Upload Files</label>
                    </Heading>
                    <input
                      type="file"
                      role="input"
                      className="form-control my-2"
                      id="files"
                      multiple
                      onChange={(event: ChangeEvent) => {
                        setFieldValue(
                          'files',
                          (event.target as HTMLInputElement).files
                        );
                      }}
                    />
                    {values.files.item.name}
                    {errors.files && touched.files ? (
                      <div className="alert alert-danger">
                        {errors.files.toString()}
                      </div>
                    ) : null}
                  </div>

Upvotes: 0

Views: 412

Answers (1)

user19989236
user19989236

Reputation: 31

The answer was:

  {Array.from(values.files).map((file, index) => (
              <div className="text-success" key={index}>
                {file.name}
              </div>
            ))}

Upvotes: 1

Related Questions