title: How to upload file from react js with Node JS
body: <p>I have an react js application.I am going to upload file from react js with Node Js.I have tried below code but its showing an error message  as <strong><em>"No default engine was specified and no extension was provided."</em></strong></p>
  
  <p>Please check below code for react with node js and advise how to solve this issue.</p>
  
  <p>Setting initial state for file :-</p>
  
  <pre><code>this.state = {
    selectedFile: null
  }
  
  this.formData = {
    file : ''
  }
  </code></pre>
  
  <p>Upload File :-</p>
  
  <pre><code>UploadHandler = () =&gt; {
   this.formData.file = this.state.selectedFile;
  
   console.log(this.formData.file);
    axios.post('localhost:5000/ap/v1/Users/',this.formData,{headers: {'Content-Type': 'multipart/form-data'}})
  
    .then(res =&gt; {
  
        //this.props.history.push('/UserList')
  
    })  
  
  
  }
  
  }
  </code></pre>
  
  <p>setting File in State when we select file from browse:-</p>
  
  <pre><code>fileHandler = (evt) =&gt; {
  
    console.log(evt.target.files[0]);
    const f = evt.target.files[0];
    this.setState({
      selectedFile: evt.target.files[0],
      loaded: 0,
    })         
  
    if (f) {
        const reader = new FileReader();
        reader.onload = ({ target: { result } }) =&gt; {
  
            this.setState({preview:result});
        };
  
        reader.readAsDataURL(f); // you can read image file as DataURL like this.
    } else {
      this.setState({preview:null});
    }
  };
  </code></pre>
  
  <p>render :-</p>
  
  <pre><code> render() {
    return (
  &lt;div className="col-sm-2"&gt;
          {/* &lt;img className='img-fluid' src={ users } alt='Alt text'/&gt; */}
  
          &lt;div&gt;
          &lt;img className='img-fluid' src={this.state.preview} /&gt;
          &lt;br&gt;&lt;/br&gt;  
              &lt;input 
                 type="file"
                 accept="image/*"
                 width="90px"
                 color="transparent"
                 onChange={this.fileHandler}
  
              /&gt;
  
          &lt;/div&gt;
  
        &lt;/div&gt;
  
  
      &lt;/div&gt;
  
  );
  }
  </code></pre>
  
  <p>Node JS Code :-</p>
  
  <pre><code>var multer = require('multer')
  
  // Set The Storage Engine
  const storage = multer.diskStorage({
    destination: './public/uploads/',
    filename: function(req, file, cb){
      cb(null,file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
  });
  
  // Init Upload
  const upload = multer({
    storage: storage,
    limits:{fileSize: 1000000},  //Size in bytes
    fileFilter: function(req, file, cb){
      checkFileType(file, cb);
    }
  }).single('file');
  
  // Check File Type
  function checkFileType(file, cb){
    // Allowed ext
    const filetypes = /jpeg|jpg|png|gif/;
    // Check ext
    const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
    // Check mime
    const mimetype = filetypes.test(file.mimetype);
  
    if(mimetype &amp;&amp; extname){
      return cb(null,true);
    } else {
      cb('Error: Images Only!');
    }
  }
  
  exports.createUsers = async (req, res, next) =&gt; {               // this is an upload controller
  
     try {
  
      upload(req, res, (err) =&gt; {
        console.log('upload in');
        if(err){
          res.render('index', {
            msg: err
          });
        } else {
          if(req.file == undefined){
            res.status(400).json({
              msg: 'Error: No File Selected!'
            });
          } else {
            res.status(200).json({ success: true, msg: 'File Uploaded!', file: `uploads/${req.file.filename }`});
                } 
      }
      })
    } catch (error) {
      console.log(error);
      res.status(400).json({ error: error });
    } 
  } 
  </code></pre>
  
  <p>screenshot for console :-</p>
  
  <p><a href="https://i.stack.imgur.com/8Vhg3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8Vhg3.png" alt="enter image description here"></a></p>