Material-UI: Upload PDF file - reactjs

Question

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;

Answer 1

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