CODEWITHSUNDEEP
javascriptpythonreactjsdjango
PiccolMan
PiccolMan

Reputation: 5366

Django ReactJS: Pass array from JavaScript frontend to Django Python backend

I've made a website with Django and React JS. I'm trying to pass an array pict from my JavaScript frontend to Django, the Python backend.

let pict = [];

pictureEl.addEventListener(`click`, function () {
  console.log(`Take Pic`);
  pict += webcam.snap();
  console.log(pict);
});

pict is an array of images taken by the camera. How would I pass it to the backend?

Upvotes: 1

Views: 1015

Answers (2)

Carlos R.
Carlos R.

Reputation: 250

You can communicate with your backend using an HTTP request library (e.g axios, fetch, ajax requests, etc)

Communication over HTTP is done through several different verbs (i.e GET, POST, PUT, PATCH, DELETE, etc) I'm agnostic of how your endpoint is handling the request so I'll assume your endpoint expects a POST. NOTES:

  • The example below use axios as HTTP request library for JS
  • I'm suggesting a change to your original code to use picts
# urls.py
from django.urls import path

from . import views

url_patterns = [
  path('path/to/my_endpoint', views.my_endpoint),
]

# views.py
from django.http import HttpResponse

def my_endpoint(request):
    pict = request.POST.getlist('pict[]')
    process_pict(pict)
    return HttpResponse('Success')

In this case you can send the request to your server as follows:

// api.js
import axios from 'axios'

export function sendPict(pict) {
  const payload = {'pict[]': pict}
  return axios.post('path/to/my_endpoint', payload)
}

Then you can send your pict anywhere from your app:

import sendPict from './api'
const pict = [];
pictureEl.addEventListener(`click`, function () {
  console.log(`Take Pic`);
  pict.push(webcam.snap());
  console.log(pict);
  console.log('sending pict to server')
  sendPict(pict)
    .then(response => console.log(`The success server response is: ${response}`))
    .catch(error => alert(`Oh noes: ${error}`))
});

Upvotes: 5

Susmita Sil
Susmita Sil

Reputation: 213

    import React from 'react'
    import axios from 'axios'
    
    postPict = (pict) => {

        //data is a json object which will have your pict array set to 'data' keyword
        
        const data= {'data': pict}

        //the next line would return a promise to 'http://localhost:8000' with the data object defined above

        return axios.post('http://localhost:8000', data)
    }
    
    pictureEl.addEventListener(`click`, function () {
        console.log(`Take Pic`);
        pict += webcam.snap();
        console.log(pict);

//here you call the function defined as postPic to access the promise and add the necessary code in the respective blocks of then(will contain success condition codes) and catch(will contain error condition codes)

        postPic(pict)
            .then(res => {
                console.log(res)
                //Do whatever you want
            })
            .catch(err => {
                console.log(err)
                //Do whatever you want
            })
    
    });

You can access this data like you access json data in Django along with 'data' keyword

Upvotes: 0

Related Questions