Get File type in react js

Question

In react

const allInputs = { imgUrl: '' };
const [imageAsFile, setImageAsFile] = useState('');
const [imageAsUrl, setImageAsUrl] = useState(allInputs);
const [media, setMedia] = useState(null);

const handleImageAsFile = (e) => {
    const image = e.target.files[0]
    setImageAsFile(imageFile => (image));
    console.log(imageAsFile);

}

Here is the input code, when I click this button, all types of files show, but I want to be able to store the type of file it is in a variable

<input type="text"
    id="phone"
    onChange={(e) => setPhone(e.target.value)}
/>

For example, if I select an image, how can know the type of image I have selected? If it is png or jpg or whatever before uploading it to the database.

I think this can help https://stackoverflow.com/questions/18299806/how-to-check-file-mime-type-with-javascript-before-upload — Sudhanshu Kumar, Dec 24 '20 at 13:50
Javascript used in react is not the same with the one used for normal html, css and js — Raphael Inyang, Dec 24 '20 at 13:52
That's something of a new concept you've introduced, You should let javascript run the way it runs — Sudhanshu Kumar, Dec 24 '20 at 13:53
There's no reason to add hooks in the code to find the type of image, it is completely unncessary. — Sudhanshu Kumar, Dec 24 '20 at 13:55
React doesn't use scripts tag, and what works in the script tag doesnt work the same way in react, — Raphael Inyang, Dec 24 '20 at 13:58
use the type property on your image variable i.e image.type, will work, If you want I can write an answer for this — Sudhanshu Kumar, Dec 24 '20 at 14:03

score 3 · Accepted Answer · answered Dec 24 '20 at 14:17

First, React Javascript works the exact way Javascript works everywhere, For accessing the image type refer to the below code, I have added the comments for better understanding.

const [imageAsFile, setImageAsFile] = useState('');
    const [imageAsUrl, setImageAsUrl] = useState(allInputs);
    const [media, setMedia] = useState(null);

 const handleImageAsFile = (e) => {
     //image var holds the file object which has a type property 
      const image = e.target.files[0];          
      console.log(image.type); // this will output the mime, i.e "image/png" or "image/jpg"
      setImageAsFile(imageFile => (image));
     console.log(imageAsFile);

  }

Get File type in react js

1 Answers1