Saving a Webcam image in react and send it to the backend Django

Question

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 ?

and in Django who can i write it in the model ? (as ImageField() or FileField()

I really need a help...

import React, { Component, useState } from 'react';
import Webcam from "react-webcam";



const WebcamComponent = () => <Webcam />;

const videoConstraints = {
    width: 220,
    height: 200,
    facingMode: "user"
  };

export const WebcamCapture = () => {

    const [image,setImage]=useState('');
    const webcamRef = React.useRef(null);

    
    const capture = React.useCallback(
        () => {
        const imageSrc = webcamRef.current.getScreenshot();
        setImage(imageSrc)
        });


    return (
        <div className="webcam-container">
            <div className="webcam-img">

                {image == '' ? <Webcam
                    audio={false}
                    height={200}
                    ref={webcamRef}
                    screenshotFormat="image/jpeg"
                    width={220}
                    videoConstraints={videoConstraints}
                /> : <img src={image} />}
            </div>
            <div>
                {image != '' ?
                    <button onClick={(e) => {
                        e.preventDefault();
                        setImage('')
                    }}
                        className="webcam-btn">
                        Retake Image</button> :
                    <button onClick={(e) => {
                        e.preventDefault();
                        capture();
                    }}
                        className="webcam-btn">Capture</button>
                }
            </div>
        </div>
    );
};

export default WebcamCapture 

thanks for helping

Answer 1

The best solution is to use cloudinary service.

you can send webcam url to uploader and it will be on cloud.

cld_response = cloudinary.uploader.upload("Webcam URL")

you can use free plan, Here is Documentation: https://cloudinary.com/documentation/django_integration