I am facing an issue when i try to upload different file format [.pdf,.doc,.xls,] unable to upload and need to block[.svg] type

  angularjs, javascript, react-native, reactjs, rxjs

Tried to fix the issue in various methods and ways but it’s not fixing. I am not able to know why it’s getting an error I don’t understand the exact issue in the code. Could anyone help with the solution?

Below is the pdf file format when i try to upload it’s not uploading properly with mentioned file name.



 async function readDataUrl(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (e) => resolve(reader.result);
      reader.onerror = (e) => reject(reader.error);

  const initState = {
    file: null,
    base64: null,
    objectUrl: null,

  const [state, setState] = useState(initState);
  const inputFileRef = useRef();
  const imgRef = useRef();

  const handleChangePhoto = (e) => {

  const handleChangeFile = (e) => {
    const target = e.currentTarget;
    const file = target.files.item(0);
    // validate file as image
    // if (!file.type.startsWith("image/")) {
    //   alert("File is not an correct format");
    //   return;
    // }

    // store reference to the File object and a base64 representation of it
    readDataUrl(file).then((dataUrl) => {
      setState((prevState) => ({
        base64: dataUrl,
        objectUrl: URL.createObjectURL(file),

  const clearImage = () => {
    setState((prevState) => ({
      base64: null,

  const { base64 } = state;

This things are not working

1.)only need to Accept common file types/extensions:
Definitely .png, .jpeg, .gif, .csv, .xls/.xlsx, .doc/.docx, .pdf, .txt, other common extensions

2.)Blacklist: .svg & Executables I am facing still and issue with this

3.) need to restrict file size upto 10mb.


please help and share with the code sandbox

Source: Ask Javascript Questions