I have a ready-made template and in this template there is a file, which is the file below, and this code is through which you can select several images from the computer as shown in the image, but the problem is that I do not want to choose an image. I want to choose a PDF file and I tried to make Several changes such as changing the type of the selected file from image to file, but my problem was not resolved.

import { orange } from '@material-ui/core/colors';
import Icon from '@material-ui/core/Icon';
import { makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import FuseUtils from '@fuse/utils';
import { Controller, useFormContext } from 'react-hook-form';


function ProductImagesTab(props) {
  const classes = useStyles(props);
  const methods = useFormContext();
  const { control, watch, setValue } = methods;

  const images = watch('images');

  return (
    <div>
      <div className="flex justify-center sm:justify-start flex-wrap -mx-16">
        <Controller
          name="images"
          control={control}
          render={({ field: { onChange, value } }) => (
            <label
              htmlFor="button-file"
              className={clsx(
                classes.productImageUpload,
                'flex items-center justify-center relative w-128 h-128 rounded-16 mx-12 mb-24 overflow-hidden cursor-pointer shadow hover:shadow-lg'
              )}
            >
              <input
                accept="image/*"
                className="hidden"
                id="button-file"
                type="file"
                onChange={async (e) => {
                  function readFileAsync() {
                    return new Promise((resolve, reject) => {
                      const file = e.target.files[0];
                      if (!file) {
                        return;
                      }
                      const reader = new FileReader();

                      reader.onload = () => {
                        resolve({
                          id: FuseUtils.generateGUID(),
                          url: `data:${file.type};base64,${btoa(reader.result)}`,
                          type: 'image',
                        });
                      };

                      reader.onerror = reject;

                      reader.readAsBinaryString(file);
                    });
                  }

                  const newImage = await readFileAsync();

                  onChange([newImage, ...value]);
                }}
              />
              <Icon fontSize="large" color="action">
                cloud_upload
              </Icon>
            </label>
          )}
        />
        <Controller
          name="featuredImageId"
          control={control}
          defaultValue=""
          render={({ field: { onChange, value } }) =>
            images.map((media) => (
              <div
                onClick={() => onChange(media.id)}
                onKeyDown={() => onChange(media.id)}
                role="button"
                tabIndex={0}
                className={clsx(
                  classes.productImageItem,
                  'flex items-center justify-center relative w-128 h-128 rounded-16 mx-12 mb-24 overflow-hidden cursor-pointer outline-none shadow hover:shadow-lg',
                  media.id === value && 'featured'
                )}
                key={media.id}
              >
                <Icon className={classes.productImageFeaturedStar}>star</Icon>
                <img className="max-w-none w-auto h-full" src={media.url} alt="product" />
              </div>
            ))
          }
        />
      </div>
    </div>
  );
}

export default ProductImagesTab;

CodePudding user response：

Looks like your Input HTML element is set to accept="image/*"

Instead you should have it accept pdf format like this <input type="file" accept="application/pdf">

https://www.w3schools.com/tags/tag_input.asp

Similar question answered here