title: How to set a size and file type of image upload in React
body: <p>I have a &quot;choose file&quot; image as the picture below. What I want to set the limit size and the file type for image upload, .png or .jpg only</p>
  <p><a href="https://i.stack.imgur.com/0iaPm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0iaPm.png" alt="enter image description here" /></a></p>
  <p>My code is below. It looks like when the user chooses .png or .jpg or any file types, it pops up an alert message, and then the image will be approved. I want .png and .jpg works well, but other files chosen displayed an alert message</p>
  <pre><code>import React, {Component, useState} from 'react';
  import axios from 'axios';
  
  const Modeling = () =&gt; {
    const [file, setFile] = useState(null);
  
    const fileChangedHandler = event =&gt; {
      let file = event.target.files[0];
      let reader = new FileReader();
  
      console.log(file);
      reader.onload = function(e) {
        setFile(e.target.result);
      };
      reader.readAsDataURL(event.target.files[0]);
   
   if (file != &quot;.png&quot; || file !=&quot;.jpg&quot; ) {
        window.alert(&quot;File does not support. You must use .png or .jpg &quot;);
        return false;
     }
     if (file.size &gt; 10e6) {
       window.alert(&quot;Please upload a file smaller than 10 MB&quot;);
       return false;
     }
    };
  
      return (
        &lt;div id=&quot;modeling&quot;&gt;
          &lt;div className=&quot;container&quot;&gt;
            &lt;div className=&quot;row&quot;&gt;
              &lt;div className=&quot;col-xs-12 col-md-8&quot;&gt; 
                &lt;div className=&quot;modeling-text&quot;&gt;
                  &lt;h2&gt;3D MODELING&lt;/h2&gt;
                  &lt;h3&gt;Upload a 2D image to get a 3D model&lt;/h3&gt;        
                  
                  &lt;input className=&quot;btn btn-secondary&quot; 
                        id=&quot;fileInput&quot; 
                        name=&quot;file&quot; type=&quot;file&quot; 
                        inputProps={{ accept: 'image/*' }}
                        onChange={fileChangedHandler} 
                  /&gt;
               
                  &lt;button className=&quot;btn btn-primary&quot; style={{float:&quot;left&quot;, marginLeft: &quot;10px&quot;, marginBottom: &quot;10px&quot;}} 
                          id=&quot;renderButton&quot;&gt;
                    Render 3D Model
                  &lt;/button&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;img src={file} alt={&quot;&quot;} width=&quot;400&quot; height=&quot;400&quot; text-align=&quot;left&quot; style={{display:'block'}} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  
  
  export default Modeling;
  </code></pre>
  <p>Can anyone stop by for help? I am really appreciated for that</p>