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.

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.

• javascript
• html
• reactjs
• react-native
• input

• 2 I think this can help stackoverflow./questions/18299806/… – Sudhanshu Kumar 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 Commented Dec 24, 2020 at 13:52
• is there an answer that uses hooks in react – Raphael Inyang Commented Dec 24, 2020 at 13:53
• That's something of a new concept you've introduced, You should let javascript run the way it runs – Sudhanshu Kumar 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 pletely unncessary. – Sudhanshu Kumar Commented Dec 24, 2020 at 13:55

1 Answer 1

First, React Javascript works the exact way Javascript works everywhere, For accessing the image type refer to the below code, I have added the ments 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);

  }