Upload image file using django rest framework in a single page application

Question

I am trying to upload image using Vuejs and Django, but I can't figure out how to solve it.

This is the django side:

class UserDetail(models.Model):
    user = models.OneToOneField(User)
    profile_picture = models.ImageField(upload_to=create_file_path)

class UserDetailSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserDetail
        fields = '__all__'

class UserDetailViewSet(viewsets.ModelViewSet):
    queryset = UserDetail.objects.all()
    serializer_class = UserDetailSerializer
    permission_classes = [AllowAny]

    @detail_route(permission_classes=[AllowAny], methods=['POST'], parser_classes=[FormParser, MultiPartParser])
    def create_or_update_profile_picture(self, request):
        user = request.user
        #
        # how to create or update user detail profile picture ?
        #

I am posting the data this way from Vuejs:

changeProfilePicture() {
    const file_input = document.getElementById('display_profile_image');
    const img = file_input.files[0];
    let formData = new FormData();
    formData.append("profile_picture", img);
    const url = this.$store.state.website + '/api/accounts/user-detail/none/create_or_update_profile_picture/';
    this.$http.post(url, formData)
        .then(function (response) {
            this.$store.dispatch('getUserDetail');
        })
        .catch(function (response) {
            console.log(response);
        });
}

How can I use the post data to create or update the request.user's profile_picture with Django and django rest framework inside the model viewset class, using default methods (create/update/partial_update) or by creating a new detail route?

if so here is a good answer https://stackoverflow.com/a/28036805/6143656 — Shift 'n Tab, May 31 '17 at 00:36
maybe this will help you https://stackoverflow.com/questions/43319993/how-to-write-django-rest-api-without-model-to-send-a-file-using-requests — user2881430, Jun 03 '17 at 18:26

Michael Rigoni · Answer 1 · 2017-06-08T14:23:59.303

Assuming your JS posts the request using 'multipart/form-data' (check this), you should be able to upload the image file when creating or updating the user. Also, make sure you send CSRF Token.

To be able to set the logo on its own, a detailed_route is a good way using a serializer limited to the logo. In the detailed route, if you want to upload log for logged in user (I saw you put none as an id), you can check that in the detail route before calling get_object which will get the userdetail instance.

class UserLogoSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserDetail
        fields = ['profile_picture']


class UserDetailViewSet(viewsets.ModelViewSet):
    queryset = UserDetail.objects.all()
    serializer_class = UserDetailSerializer
    permission_classes = [AllowAny]

    @detail_route(methods=['post'])
    def set_profile_picture(self, request, pk=None, format=None):
        if pk in ['none', 'self']: # shortcut to update logged in user without looking for the id
            try:
                userdetail = self.get_queryset().get(user=request.user)
            except UserDetail.DoesNotExist:
                userdetail = None
        else:
            userdetail = self.get_object()

        serializer = serializers.UserLogoSerializer(userdetail, data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data)            

        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

If I recall correctly, permission_classes are the one set on the Viewset by default, and the default parsers should do the job.

score 4 · Answer 2 · answered May 30 '17 at 20:53

4

here is example in official documentation:

http://www.django-rest-framework.org/api-guide/parsers/#fileuploadparser

answered May 30 '17 at 20:53

pkisztelinski

522
3
14

How can I use it to post in the model view set? – Robin Jun 01 '17 at 18:44
@Robin Maybe this post will help you? https://stackoverflow.com/a/26766210/5219197 – pkisztelinski Jun 02 '17 at 06:49

Upload image file using django rest framework in a single page application

2 Answers2