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.

Image

////////////////////////////////////////////////////////////////////////////////////////////

 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);
      reader.readAsDataURL(file);
    });
  }

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

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

  const handleChangePhoto = (e) => {
    e.preventDefault();
    inputFileRef.current.click();
  };

  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) => ({
        ...prevState,
        file,
        base64: dataUrl,
        objectUrl: URL.createObjectURL(file),
      }));
    });
  };

  const clearImage = () => {
    setState((prevState) => ({
      ...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.

https://codesandbox.io/s/fervent-wilbur-nkduk?file=/src/App.js

please help and share with the code sandbox

Source: Ask Javascript Questions

LEAVE A COMMENT