How to upload a file using DRF + VueJS?

Question

Django

JS

new Vue({
    delimiters: ["{>", "<}"],
    el: '#import_tokens',
    data() {
        return {
            file: null,
        }
    },
    methods: {
        sendFile: function () {
            var self = this
            console.log(this.file)
            axios.defaults.xsrfCookieName = 'csrftoken'
            axios.defaults.xsrfHeaderName = 'X-CSRFToken'
            axios.put(
                'http://' + window.location.host + '/api/tokens_VMP_excel/',
                self.file,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
            ).then(function (response) {
            }).catch(function (error) {
                console.log(error);
            });
        }
    },
    created: function () {

    }
})

PY

class TokensVMPExcelViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows users to be viewed or edited.
    """
    queryset = TokenVMPExcel.objects.all()
    serializer_class = TokensVMPExcelSerializer
    parser_classes = (MultiPartParser,)

    def put(self, request):
        print (request.FILES)
        return Response(status=204)

The print is empty.

Answer 1

What's a handy, beautiful file uploader for vue?