title: Saving a Webcam image in react and send it to the backend Django
body: <p>In this code I take a picture by the laptop camera and it work correctly, but i want to save the picture in the database (I use react as frontend and Django as backend).
  So, how can I send this image to the backend Django ?</p>
  <p>and in Django who can i write it in the model ? (as ImageField() or FileField()</p>
  <p>I really need a help...</p>
  <pre><code>import React, { Component, useState } from 'react';
  import Webcam from &quot;react-webcam&quot;;
  
  
  
  const WebcamComponent = () =&gt; &lt;Webcam /&gt;;
  
  const videoConstraints = {
      width: 220,
      height: 200,
      facingMode: &quot;user&quot;
    };
  
  export const WebcamCapture = () =&gt; {
  
      const [image,setImage]=useState('');
      const webcamRef = React.useRef(null);
  
      
      const capture = React.useCallback(
          () =&gt; {
          const imageSrc = webcamRef.current.getScreenshot();
          setImage(imageSrc)
          });
  
  
      return (
          &lt;div className=&quot;webcam-container&quot;&gt;
              &lt;div className=&quot;webcam-img&quot;&gt;
  
                  {image == '' ? &lt;Webcam
                      audio={false}
                      height={200}
                      ref={webcamRef}
                      screenshotFormat=&quot;image/jpeg&quot;
                      width={220}
                      videoConstraints={videoConstraints}
                  /&gt; : &lt;img src={image} /&gt;}
              &lt;/div&gt;
              &lt;div&gt;
                  {image != '' ?
                      &lt;button onClick={(e) =&gt; {
                          e.preventDefault();
                          setImage('')
                      }}
                          className=&quot;webcam-btn&quot;&gt;
                          Retake Image&lt;/button&gt; :
                      &lt;button onClick={(e) =&gt; {
                          e.preventDefault();
                          capture();
                      }}
                          className=&quot;webcam-btn&quot;&gt;Capture&lt;/button&gt;
                  }
              &lt;/div&gt;
          &lt;/div&gt;
      );
  };
  
  export default WebcamCapture 
  </code></pre>
  <p>thanks for helping</p>