PDF OCR via React, Django REST Framework, and Heroku Part 2: Test Our Django Back End with Postman

Now that we have are working web page, let’s test our REST API using Postman to see if our page actually does something. Postman is something you’ll need to install on your own system, but the process is painless and straightforward.

Postman allows us to enter a URL and test to see if it works, even if all that means is that it returns some response other than 404 or another error. Postman is useful in situations like ours where something ought to be submitted but there is no front end to submit from.

Before we get to the point where are ready to test our app with Postman, we need to create new files and code. Our tests with Postman will only result in errors without this fresh code:

Within the ocr directory, create a file called serializers.py . The the following code into the new file;

from rest_framework import serializers
from .models import Post

class FileSerializer(serializers.ModelSerializer):
    class Meta():
        model = Post
        fields = '__all__'

Save this and then open your views.py file within the same ocr directory. Remember when we had to create an empty class within our views.py just to get our urls.py file working? Well, now we have to expand our views.py to actually do something when our API is being sent data and files.

We need to start by import a fair amount from the rest_framework we installed earlier. Underneath the line reading from rest_framework.views import APIView import the following:

from rest_framework.parsers import MultiPartParser, FormParser
from rest_framework.response import Response
from rest_framework import status

We’ll also need to import from both our serializers.py file and our models.py file:

from .serializers import FileSerializer
from .models import Post

Now that the above are imported we can fill out the PostViews class:

class PostViews(APIView):
    parser_classes = (MultiPartParser, FormParser)
    def get(self,request, *args, **kwargs):
        posts = Post.objects.all()
        serializer = FileSerializer(posts, many=True)
        return Response(serializer.data)
    def post(self, request, *args, **kwargs):
        posts_serializer = FileSerializer(data=request.data)
        if posts_serializer.is_valid():
            posts_serializer.save()
            return Response(posts_serializer.data,               status=status.HTTP_201_CREATED)
        else:
            print('error', posts_serializer.errors)
            return Response(posts_serializer.errors,   status=status.HTTP_400_BAD_REQUEST)

There’s a lot going on here, so let’s break down the basics.

1. What are these parser_classes we create at the beginning? Read all about them here. But basically, the MultiPartParser is used in conjunction with the FormParser to give the full capabilities of HTML form data.
2. Then we define a function for our GET request. We’re going to have file posted, right. So, this data is from what is contained in our Post model. Now we use the FileSerializer we created and imported from our serializers.py file to take in the data in our posts, and finally returning that data whenever the user wants to GET it.
3. We then define a function for our POST request. Lacking this is part of why we couldn’t use Postman to post a test image to our back end. So now we create a posts_serializer to store the contents of the request data put through our FileSerializer class. If our new variable contains valid data — such as a file we want uploaded — that data is saved and we get a valid HTTP response. If we send invalid data, we get an error and a HTTP 400 response.

Clearly, serializers are kind of a big deal in the context of our REST API, and you can read more about them here.

Don’t forget to push your work to GitHub!

OK NOW, we can send a test file in Postman to see if our back end is able to receive it.

Here’s what we need to do:

1. First, we need our Django server up and running .
2. Next we go to the Postman app and enter http://localhost:8000/ into the address bar at the top, making sure the option for GET is changed to POST (as we are POSTing content to our backend).

The Postman main screen, with the address bar between the request method (POST, GET, ect.) and the blue Send button

3. Because we specified certain fields within our Django model, we need to fill in those same fields within our Postman request. We do this via the sections listed immediately beneath Postman’s address bar, starting on the far left with the Params section. Going three sections to the right, we’ll work within the Body section, then hitting the radio button marked form-data. We need to specify keys and their values. Our first key is going to be our title, and we’ll give it a value of postman-test1 ; the next key we enter will be our content field, with the value of POSTMAN-TEST1 ; finally we have the key of file, and here is where things might get a bit tricky. We need to specify that we are posting a file rather than text, so we need to select file from the small drop down menu that appears when we hover over the field.

4. I used some generic clip art, but you can upload any reasonably sized file as we are just testing our API.

5. Now that we have our fields filled out and our file set to upload, we can hit the blue Send button on the far right. If all goes well, you’ll see something like the below show up in Postman:

{
"id": 4,
"title": "postman-test1",
"content": "POSTMAN-TEST1",
"file": "/media/post_files/a.pdf"
}

You’ll also see similar data show up on the main page of your Django application:

POST views being accepted in the django back end.

Now that are able to send our back end system images, a new folder has popped up in our project directory:

If you’re confused where this comes from, think back to the file field in our Post class, within models.py. Within that field, we defined that we wanted to be uploaded to a directory called post_images, but as our application wasn’t up and running we didn’t have any images to be posted.

Success! We know our back end system works at receiving a file, so now we can finally move on to the front end of the project. Once done, we can post an image via a web site rather than using Postman. Don’t forget to make a new branch and push your code!