###---------------------------------------------------------------------------models.py--------------------------
#MainCategory
class MainCategory(models.Model):
maincategoryname = models.CharField(max_length=70, blank=False, default='')
icon = models.ImageField(upload_to='static/')
#Brand
class Brand(models.Model):
maincategories = models.ManyToManyField(MainCategory)
brandname = models.CharField(max_length=70, blank=False, default='')
icon = models.ImageField(upload_to='static/')
###---------------------------------------------------------------------serializer.py------------------------------
class MainCategorySerializer(serializers.ModelSerializer):
class Meta:
model = MainCategory
fields = '__all__' # or ('id','maincategoryname','icon')
#BrandSerializer
class BrandSerializer(serializers.ModelSerializer):
class Meta:
model = Brand
fields = '__all__'
###-------------------------------------------------------------------views.py------------------------------
from django.http.response import JsonResponse
from sevenshadesapp.models import Brand
from sevenshadesapp.serializer import BrandSerializer
from rest_framework.decorators import api_view
# Create your views here.
@api_view(['GET','POST','DELETE'])
def Brand_Submit(request):
try:
if request.method=='POST':
brand_serializer=BrandSerializer(data=data)
print("qqqqqqqqqq",brand_serializer)
if(brand_serializer.is_valid()):
brand_serializer.save()
return JsonResponse({"message":'Brand Submitted Successfully',"status":True},safe=False) # safe=False means safety removed, no restrictions
else:
return JsonResponse({"message":'Fail To Submit',"status":False},safe=False)
except Exception as e:
print("Error submit:",e)
return JsonResponse({"message":'Fail To Submit Brand',"status":False},safe=False)
Maincategory Table
(id, maincategoryname, icon) ====> id=>primary key
(1, MEN, men.png)
(2, WOMEN, women.png)
(3, KIDS, kids.png)
Brand Table
(id, brandname , icon, maincategoryIDs)
(1, Kelvin Clein, ck.png, 1,2)
(2, Nike, nik.png, 1,3)
(3 , Tommy Hilfiger, th.png, 1)
here id=>primary key maincategoryIDs=>foreign key
How to do that so that we can store multiple foreign keys in "maincategoryIDs" field of 'brand' model? Is it possible in Django or not Please let me know?
NOTE : here I am using Django Restf Framework , and data in request is coming from REACT INTERFACE.
# React js Form for Brand model
import * as React from 'react';
import { Grid, TextField, Button, Avatar } from "@mui/material";
import { useState, useEffect } from "react";
import { useStyles } from "./CategoryCss";
import TitleComponent from "../components/admin/TitleComponent";
import { postData } from "../../services/FetchDjangoApiService";
import Swal from "sweetalert2";
import listimage from "../../images/list.png"
import iconimage from "../../images/icon.png"
import { getData } from "../../services/FetchDjangoApiService";
import Checkbox from '@mui/joy/Checkbox';
export default function Brand(props) {
var classes = useStyles()
const [brandName, setBrandName] = useState('')
const [icon, setIcon] = useState({ file: iconimage, bytes: '' }) //bytes is used to save Image
const [formError, setFormError] = useState([{ icon: false }])
const [mainCategoryList, setMainCategoryList] = useState([])
const [mainCategoryCheckedIds, setMainCategoryCheckedIds] = useState([])
const mainCategoryGridLength = 12 / mainCategoryList.length;
const fetchAllMainCategory = async () => {
var result = await getData('maincategory_list')
console.log("r", result.data) //for testing
setMainCategoryList(result.data)
}
useEffect(function () {
fetchAllMainCategory()
}, [])
const handleCheckboxChange = (event) => {
const index = mainCategoryCheckedIds.indexOf(event.target.value)
if (index === -1){
setMainCategoryCheckedIds([...mainCategoryCheckedIds, event.target.value])
}
else {
setMainCategoryCheckedIds(mainCategoryCheckedIds.filter((mainCategoryCheckedId)=>mainCategoryCheckedId !== event.target.value))
}
};
const handleCheckbox=()=>{
return mainCategoryList.map((item, index)=>{
return <Grid item xs={mainCategoryGridLength}>
<Checkbox
checked={mainCategoryCheckedIds.includes(`${item.id}`)} /*--->not necessary*/
onChange={handleCheckboxChange}
value={item.id}
style={{ '& .MuiSvgIcon-root': { fontSize: 50 } }}
label={item.maincategoryname}
/>
</Grid>
})
}
const handleChange = (event) => {
setIcon({ file: URL.createObjectURL(event.target.files[0]), bytes: event.target.files[0] })
handleError(false, "icon")
}
const handleError = (errormessage, label) => { //prev means previous value of error
setFormError((prev) => ({ ...prev, [label]: errormessage }))
}
const handleClick = async () => {
var err = false
if (mainCategoryCheckedIds.length == 0) {
err = true
}
if (brandName.length == 0) {
handleError("Please input brand", "brandname")
err = true
}
if (icon.bytes.length == 0) // icon named image is already exist so we have to work on bytes
{
handleError("Please select some icon", "icon")
err = true
}
if (err == false) {
var formData = new FormData()
formData.append('maincategories', mainCategoryCheckedIds.map(Number).sort((a,b)=>a>b?1:-1))
console.log("Checked Ids",mainCategoryCheckedIds.map(Number).sort((a,b)=>a>b?1:-1))
formData.append('brandname', brandName)
formData.append('icon', icon.bytes)
var result = await postData('brand_submit', formData)
if (result.status) {
Swal.fire({
title: "The Seven Shades",
text: result.message,
icon: "success",
toast: true
});
}
else {
Swal.fire({
title: "The Seven Shades",
text: result.message,
icon: "error",
toast: true
});
}
}
}
return (<div className={classes.root}>
<div className={classes.main_brand_banner_box}>
<Grid container spacing={2}>
<Grid item xs={12}>
<TitleComponent width={100} title={'Brand'} listicon={listimage} link={'/admindashboard/displaybrand'} />
</Grid>
<Grid item xs={12}>
<div style={{ fontSize: 20, fontWeight:'bold', marginLeft:10 }}>Choose Main Category</div>
</Grid>
{handleCheckbox()}
<Grid item xs={12}>
<TextField error={formError.brandname} helperText={formError.brandname} onFocus={() => handleError(false, 'brandname')} onChange={(event) => setBrandName(event.target.value)} fullWidth label="Brand Name" />
</Grid>
<Grid item xs={6} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
<Button variant="contained" component='label'>
Upload Icon
<input type="file" hidden accept="images/*" onChange={handleChange} />
</Button>
{formError.icon ? <div style={{ fontFamily: '"Roboto","Helvetica","Arial",sans-serif', marginTop: 3, color: '#d32f2f', fontSize: '0.75rem', fontWeight: 400 }}>{formError.icon}</div> : <></>}
</Grid>
<Grid item xs={6} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<Avatar //Avatar is used for showing selected image
alt="Icon"
variant="rounded"
src={icon.file}
sx={{ width: 80, height: 80 }} //sx=>means 'style'
/>
</Grid>
<Grid item xs={6}>
<Button onClick={handleClick} variant="contained" fullWidth>Submit</Button>
</Grid>
<Grid item xs={6}>
<Button variant="contained" fullWidth>Reset</Button>
</Grid>
</Grid>
</div>
</div>)
}
please let me know , is it possible or not ? if yes , Then what changes I have to do ?```
