Uploading file using axios - django

Question

Hi I'm trying to upload a file to server and I'm having difficulty sending the file. I'm using Django at the backend and I've already set up a put endpoint allowing users to send files and I confirmed it works as intended using postman. However, I'm having trouble uploading on the frontend. So this is how my code looks on the frontend end.
selectFileManually.addEventListener('change', function(event){
event.stopPropagation();
event.preventDefault();
axios.put('http://127.0.0.1:8000/api/v1/fileupload/', {
file: this.files[0]
}).then(resp => console.log(resp.data)).catch(err => console.log(err.response.data))
}
}
})
Here selectFileManually is an input[type='file']. However, when I send this request the server comes back with the following error: "Missing filename. Request should include a Content-Disposition header with a filename parameter and when I look at the payload it's complete empty: `{file: {}}' even though you can clearly see I provided a file to send. This is how my code looks at the backend
# views.py
from django.shortcuts import render
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework.parsers import FileUploadParser, MultiPartParser
import os
# Create your views here.
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
class FileUploadView(APIView):
parser_classes = (MultiPartParser, FileUploadParser, )
def put(self, request, format=None):
print(request.data)
with open(os.path.join(BASE_DIR, 'api/media', request.data['file'].name), 'wb') as f:
for chunk in request.data['file'].chunks():
f.write(chunk)
return Response(status=204)
#urls.py
from django.urls import path
from . import views
urlpatterns = [
path('fileupload/', views.FileUploadView.as_view()),
]
Could somebody please help me. I know that this.files[0] is not empty since the console logged the files and it showed me that it was indeed the right content

Answer 1

According to the docs, you need to specify a filename parameter for the view to handle the request. This can be done in two ways:
1. The view can be called using the filename URL keyword argument, then that argument is set as the filename.To achieve this you need to change your url pattern to
urlpatterns = [
path('fileupload/(?P<filename>[^/]+)$', views.FileUploadView.as_view()),
]
2. If the view is called without the filename URL keyword argument, then the client must set it in the Content-Disposition HTTP header. It is then handled by FileUploadParser in the views.
For eg Content-Disposition: attachment; filename=image.jpg.
Either way, you need to access filename while making a request.
In your case, since your url pattern does not contain a filename argument you need to set headers to include Content-Disposition.
Assuming this.files[0] is a fileObject, you can get filename by simply doing this.files[0].name. Now setting headers on the axios request, so your front end code should look like this.
selectFileManually.addEventListener('change', function(event){
event.stopPropagation();
event.preventDefault();
axios.put('http://127.0.0.1:8000/api/v1/fileupload/', {
file: this.files[0]
},{headers:{
'Content-Disposition': 'attachment; filename=this.files[0].name'
}
},
).then(resp => console.log(resp.data)).catch(err => console.log(err.response.data))
}
}
})
Hope this helps !