"Troubleshooting Image Upload Failure: React-admin to Django REST Framework Backend"

Question

the main problem is in Multi-part form data it not using in react-admin : details: I have a Django REST Framework backend API with a ProductViewSet that handles product creation. When creating a new product, I'm expecting to receive an image file along with other product data from a React-admin frontend. Here's the relevant part of my backend API:

class ProductViewSet(ModelViewSet):
    queryset = Product.objects.all()
    serializer_class = ProductSerializer
    filter_backends = [DjangoFilterBackend, SearchFilter]
    search_fields = ['name', 'description']
    ordering_fields = ['price', 'name']

    def create(self, request, *args, **kwargs):
        try:
            data = request.data

            with transaction.atomic():
                # Extract product_type, company, unit_of_measure from request data
                
                # Extract image path from request data
                image_path = None
                if "image" in data:
                    raw_file = data["image"].get("rawFile")
                    if raw_file and "path" in raw_file:
                        image_path = raw_file["path"]

                # Create Product instance with extracted data
                product = Product(
                    name=data.get("name"),
                    image=image_path,
                    # Other product fields...
                )

                product.save()

                # Add many-to-many relationships

                # Serialize and return the created product
                serializer = ProductSerializer(product, many=False)
                return Response(serializer.data, status=status.HTTP_201_CREATED)

        except Exception as e:
            print("Error:", e)
            return Response({"error": str(e)}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)

On the frontend side, I'm using React-admin for the product creation form. Here's the relevant part of my frontend code:

import * as React from 'react';
import {
    Create,
    TextInput,
    ImageInput,
} from 'react-admin';

const ProductCreate = () => {
    return (
        <Create>
            <TextInput source="name" label="Product Name" fullWidth />
            <ImageInput
                source="image"
                label="Thumbnail"
                accept="image/*"
            />         
        </Create>
    );
};

export default ProductCreate;

The issue I'm facing is that when I save a new product with an image file, the image file is not being uploaded to the media folder on the server. Instead, only the image file name (media/some.png) is being saved to the database. How can I ensure that the image file is correctly uploaded to the media folder?

the image save to database as image:"media/some.png" is correct but the image file not move to default medai postion in /media/

# settings.py

# ...

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

# urls.py

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # ... Your existing URL patterns ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)