title: I'm trying to convert a base64 encoded string to a image on my react file
body: <pre><code>import React, { useRef, useCallback, useState } from 'react'
  import Webcam from "react-webcam"
  import Modal from 'react-bootstrap/Modal'
  import Button from 'react-bootstrap/Button'
  import 'bootstrap/dist/css/bootstrap.min.css'
  import axios from 'axios'
  // import base64Img from 'base64-img'
  const fs = require('fs')
  
  
  function App() {
    const [show, setShow] = useState(false)
  
    const handleClose = () =&gt; {
      setShow(false)
    }
  
    const videoConstraints = {
      width: 1280,
      height: 720,
      facingMode: "user"
    }
  
    const webcamRef = useRef(null);
  
    const capture = useCallback(
      () =&gt; {
        const imageSrc = webcamRef.current.getScreenshot();
        // const capture = document.createElement('img')
        // capture.src = imageSrc
        // base64Img.img(imageSrc, '../images', '1', function(err, filepath) {
        //   if(err) console.error(err)
        // });
        fs.writeFile('../images/1.jpg', imageSrc, {
          encoding: 'base64'
        }, function(err){
          if(err) console.error(err)
        })
        console.log(imageSrc)
  
        const formData = new FormData();
  
        formData.append('images', imageSrc)
  
        axios.post('http://localhost:5000/login', formData,{
            headers: {
                'content-type': 'multipart/form-data'
            },
            mode: 'no-cors'
          })
  
      },
      [webcamRef]
    )
     const logIn = () =&gt; {
      setShow(true)
    }
    return (
      &lt;div&gt;
          &lt;button style={{
            position: 'relative',
            left: '500px',
            top: '300px'}}
            onClick={logIn}&gt;Log in&lt;/button&gt;
  
            &lt;Modal size="lg" show={show} onHide={handleClose}&gt;
              &lt;Modal.Header closeButton&gt;
                &lt;Modal.Title&gt;Please take a photo&lt;/Modal.Title&gt;
              &lt;/Modal.Header&gt;
  
              &lt;Modal.Body&gt;
              &lt;Webcam
          audio={false}
          height={550}
          ref={webcamRef}
          screenshotFormat="image/jpeg"
          width={750}
          videoConstraints={videoConstraints}
        /&gt;
              &lt;/Modal.Body&gt;
  
              &lt;Modal.Footer&gt;
                &lt;Button onClick={ handleClose } variant="secondary"&gt;Close&lt;/Button&gt;
                &lt;Button onClick={capture} variant="primary"&gt;Take a snap&lt;/Button&gt;
              &lt;/Modal.Footer&gt;
            &lt;/Modal&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>This raised an issue:</p>
  
  <pre><code>TypeError: fs.writeFile is not a function
  (anonymous function)
    31 | // base64Img.img(imageSrc, '../images', '1', function(err, filepath) {
    32 | //   if(err) console.error(err)
    33 | // });
  &gt; 34 | fs.writeFile('../images/1.jpg', imageSrc, {
       | ^  35 |   encoding: 'base64'
    36 | }, function(err){
    37 |   if(err) console.error(err)
  </code></pre>
  
  <p>the error occurs because I'm interchanging react syntatic code with nodejs syntax. I have tried to use:
  <strong>base64Img</strong> which gives me this error:</p>
  
  <pre><code>TypeError: fs.existsSync is not a function
  getExists
  node_modules/file-system/file-system.js:30
    27 | }
    28 | 
    29 | function getExists(filepath) {
  &gt; 30 |   var exists = fs.existsSync(filepath);
    31 | 
    32 |   if (exists) {
    33 |     return filepath;
  View compiled
  push../node_modules/file-system/file-system.js.exports.mkdir
  node_modules/file-system/file-system.js:60
    57 |  * ```
    58 |  */
    59 | exports.mkdir = function(filepath, mode, callback) {
  &gt; 60 |   var root = getExists(filepath);
    61 |   var children  = path.relative(root, filepath);
    62 | 
    63 |   if (util.isFunction(mode)) {
  View compiled
  push../node_modules/file-system/file-system.js.exports.writeFile
  node_modules/file-system/file-system.js:131
    128 |   callback = result.callback;
    129 | 
    130 |   // Create dir first
  &gt; 131 |   exports.mkdir(dirname, function() {
    132 |     fs.writeFile(filename, data, options, callback);
    133 |   });
    134 | };
  View compiled
  push../node_modules/base64-img/base64-img.js.exports.img
  node_modules/base64-img/base64-img.js:98
     95 |   var result = img(data);
     96 |   var filepath = path.join(destpath, name + result.extname);
     97 | 
  &gt;  98 |   fs.writeFile(filepath, result.base64, { encoding: 'base64' }, function(err) {
     99 |     callback(err, filepath);
    100 |   });
    101 | };
  View compiled
  (anonymous function)
  /src/App.js:31
    28 | const imageSrc = webcamRef.current.getScreenshot();
    29 | // const capture = document.createElement('img')
    30 | // capture.src = imageSrc
  &gt; 31 | base64Img.img(imageSrc, '../images', '1', function(err, filepath) {
       | ^  32 |   if(err) console.error(err)
    33 | });
    34 | // fs.writeFile('../images/1.jpg', imageSrc, {
  </code></pre>
  
  <p>I've tested couple of ideas and i've looked up videos and information on youtube and google but i have not found any solution for this.</p>
  
  <p>I'm confused as to what is happening. Please help me with suggestions and solutions. I would appreciate it</p>