reactjs - Uploading file (Images/PDF) and also preview uploaded images/PDFusing React

Question

I am using specified link Uploading File using React for uploading files but it is accepting only images, I have to upload PDF's as well, Also want to preview uploaded files.

Please help me in uploading Images, PDF format and preview the uploaded files. Please let me know if there are any libraries based on my requirement.

I am new to React.Please help me on this Thanks in Advance.

Answer 1

If you pass on accept="image/png, image/jpeg" it limits to images also some more options available here

const App = () => {
  
  const handleImageChange = (e) => {
    let reader = new FileReader();
    const files = e.target.files;

    if (files.length) {
      const file = files[0];
      console.log(file)
    }
  };
  return(
      <input
      type="file"
      onChange={handleImageChange}
      // accept="image/png, image/jpeg"
    />
   )
}

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>