How to Pass an Image File to a API Endpoint

Question

I have a web services with DRF, I have POSTMAN passing the right all fields right with success including the image file ['avatar'] []1

Now how do i pass the image file from a Django Form, but i keep getting Error 400, Bad request. Please how do i encode the image file to be passed into the API endpoint .

html

<form method="post" action="#" enctype="multipart/form-data">
                          {% csrf_token %}
                              <label for="phone">Enter Phone</label>
                              {{ form.phone }} <br />
                              <label for="bvn">Enter BVN</label>
                              {{ form.bvn }} <br />
                              <label for="avatar">Upload Avatar</label>
                              {{ form.avatar }} <br />
                              <button type="submit" class="btn btn-primary" >Submit</button>

                          </form>

views.py

def form_valid(self, form):
    token = self.request.session['session_token']
    headers = {"Content-Type": 'application/json', "Authorization": "Token " + token}

    parameters = {
        'bvn': form.cleaned_data['bvn'],
        'phone': form.cleaned_data['phone'],
        'avatar': self.request.FILES['avatar']
    }
    response = requests.put(str(settings.API_END_POINT + '/customer_profile_api/'), data=parameters,
                             headers=headers)
    if response.status_code in settings.SUCCESS_CODES:
        messages.success(self.request, 'Successfully updated profile')
    else:
        messages.error(self.request, 'API Error %s' % response.status_code)

    return super(CustomerDashboard, self).form_valid(form)

form.py

class ProfileUpdateForm(forms.Form):
    """customer profile update form"""
    phone = forms.CharField(required=False, widget=NumberInput(attrs={'class': 'form-control',
                                                                      'type': 'number', 'id': 'phone',
                                                                      'placeholder': 'Enter Phone Number'}))
    bvn = forms.CharField(required=False, widget=NumberInput(attrs={'class': 'form-control',
                                                                      'type': 'number', 'id': 'bvn',
                                                                      'placeholder': 'Enter BVN'}))
    avatar = forms.ImageField(required=False, widget=ClearableFileInput(attrs={'class': 'form-control',
                                                                      'type': 'file', 'id': 'avatar',
                                                                      'placeholder': 'Upload Avatar'}))

Answer 1

Should someone else run into the same issue, The only way i was able to solve it is to have separate views to handle image and other text fields. What i did so far that worked. If you noticed, the content-type header for the view that handles the image wasnt inserted, Just remove it and let it your API handle it by itself, several times i set it as multipart/form-data, i will hit response code 200/201, but file never get saved.

my API views.py

class CustomerApiView(generics.UpdateAPIView, generics.ListAPIView):
    """Customer Api View to update customer profile"""
    http_method_names = ['put', 'get']
    renderer_classes = [renderers.JSONRenderer]
    authentication_classes = [authentication.TokenAuthentication]
    serializer_class = CustomerSerializer
    queryset = Profile.objects.all()
    permission_classes = [IsAuthenticated]

    def get_queryset(self):
        user = self.request.user
        return self.queryset.filter(user=user)

    def get_object(self):
        queryset = self.filter_queryset(self.get_queryset())
        # make sure to catch 404's below
        obj = queryset.get(user_id=self.request.user.id)
        self.check_object_permissions(self.request, obj)
        return obj

class CustomerAvatarApiView(generics.UpdateAPIView):
    """Customer Avatar/DP API View"""
    serializer_class = CustomerAvatarSerializer
    queryset = Profile.objects.all()
    authentication_classes = [authentication.TokenAuthentication]
    permission_classes = [IsAuthenticated]
    renderer_classes = [renderers.JSONRenderer]
    http_method_names = ['put', 'get']

    def get_object(self):
        queryset = self.filter_queryset(self.get_queryset())
        # make sure to catch 404's below
        obj = queryset.get(user_id=self.request.user.id)
        self.check_object_permissions(self.request, obj)
        return obj

serializer.py

class CustomerSerializer(serializers.ModelSerializer):
    """Customer Profile Serializer"""

    class Meta:
        """Class Meta"""
        model = Profile
        fields = ('pk', 'phone', 'bvn', 'avatar')
        extra_kwargs = {'pk': {'read_only': True}, }


class CustomerAvatarSerializer(serializers.ModelSerializer):
    """Separate Serializer to handle upload of file"""

    class Meta:
        """Class Meta"""
        model = Profile
        fields = ('avatar', )

my view.py

class CustomerDashboard(LoginRequiredMixin, generic.FormView):
    """customer dashboard view"""
    template_name = 'customer/dashboard.html'
    form_class = ProfileUpdateForm
    raise_exception = False
    success_url = reverse_lazy('customer_dashboard')

    def get_profile_api(self):
        """get profile api call to fetch profile; passing in the token from session"""
        token = self.request.session['session_token']
        headers = {"Content-Type": 'application/json', "Authorization": "Token " + token}
        response = requests.get(str(settings.API_END_POINT + '/customer_profile_api/'), headers=headers)
        json_response = response.json()
        return json_response

    def get_initial(self):
        initial = ''
        try:
            initial = super(CustomerDashboard, self).get_initial()
            initial['phone'] = self.get_profile_api()[0]['phone']
            initial['bvn'] = self.get_profile_api()[0]['bvn']
        except:
            pass

        return initial

    def get_context_data(self, **kwargs):
        """overriding get_context_data to pass data to template"""
        context = super(CustomerDashboard, self).get_context_data()
        if self.get_profile_api()[0]['bvn'] != '':  # if BVN has been filled before pass True or False to template
            context['bvn_initial'] = True  # Todo Validate BVN from API Before calling save method on it
        else:
            context['bvn_initial'] = False

        return context

    def form_valid(self, form):
        token = self.request.session['session_token']

        if 'updateAvatar' in self.request.POST:

            headers = {"Authorization": "Token " + token}
            avatar = form.cleaned_data['avatar']

            file = {'avatar': (str(avatar), avatar)}

            response = requests.put(str(settings.API_END_POINT + '/customer_profile_avi_api/'), files=file,
                                    headers=headers)
            message = 'Avatar changes successfully'

            if response.status_code in settings.SUCCESS_CODES:
                messages.success(self.request, message)
            else:
                messages.error(self.request, 'API Error %s' % response)

        elif 'updateProfile' in self.request.POST:

            headers = {"Content-Type": "application/json", "Authorization": "Token " + token}
            parameters = {
                'bvn': form.cleaned_data['bvn'],
                'phone': form.cleaned_data['phone'],
            }

            response = requests.put(str(settings.API_END_POINT + '/customer_profile_api/'), json=parameters,
                                    headers=headers)
            message = 'Profile changes successfully'

            if response.status_code in settings.SUCCESS_CODES:
                messages.success(self.request, message)
            else:
                messages.error(self.request, 'API Error %s' % response)

        return super(CustomerDashboard, self).form_valid(form)

Answer 2

Yours headers is wrong.

headers = {"Content-Type": 'application/json', "Authorization": "Token " + token}

change to:

headers = {"Content-Type": 'multipart/form-data', "Authorization": "Token " + token}

When you upload some file you should use multipart/form-data instead of application/json (If you certainly do not send the file as base64)