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 stackoverflow.com/questions/18299806/… — Sudhanshu Rai
– Sudhanshu Rai, Commented Dec 24, 2020 at 13:50
Javascript used in react is not the same with the one used for normal html, css and js — Raphael Inyang
– Raphael Inyang, Commented Dec 24, 2020 at 13:52
That's something of a new concept you've introduced, You should let javascript run the way it runs — Sudhanshu Rai
– Sudhanshu Rai, Commented Dec 24, 2020 at 13:53
There's no reason to add hooks in the code to find the type of image, it is completely unncessary. — Sudhanshu Rai
– Sudhanshu Rai, Commented Dec 24, 2020 at 13:55

Sudhanshu Rai · Accepted Answer · 2020-12-24 14:17:02Z

3

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);

  }

answered Dec 24, 2020 at 14:17

Sudhanshu Rai

2,0691 gold badge11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get File type in react js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related