save () return Response ( file_serializer. serializers import FileSerializer class FileUploadView ( APIView ): parser_class = ( FileUploadParser ,) def post ( self, request, * args, ** kwargs ): file_serializer = FileSerializer ( data = request.

Open a new terminal, navigate to your working directory and run the following command:įrom rest_framework.parsers import FileUploadParser from rest_framework.response import Response from rest_framework.views import APIView from rest_framework import status from. If you have Python and pip installed on your system, let's get started by creating a new virtual environment for our project's dependencies.

Creating a Virtual Environment & Installing Django 3

Node.js and NPM installed on your system.

Python and pip installed on your system.

Next, in the second part, we'll proceed to create a frontend application with Angular 10 for uploading the image to the REST API server using HttpClient and FormData.įor this tutorial, you will need to have a few prerequisites such as: In the first section, we'll create the Django 3 REST API application and use a REST API client to test the upload endpoint. Our application will expose an /upload REST API endpoint that accepts POST requests which contain the image file posted with a multipart/form-data content type via FormData.įor the frontend, we'll be using Angular 10 to create a simple interface that allows the user to select a file or image and upload it to the server via a POST request using HttpClient and FormData. Throughout this tutorial, we'll see how we can implement file and image upload in Django 3, Django REST Framework and Angular 10 with a step by step example.

Angular file upload npm