How to upload an image to django from an html input file
I am developing a web service on django with frontend on react. I ran into a problem that I can't upload an image to django. Below is my component code where I'm trying to download it:
export function ProviderRegistration(){
const[logoField, setLogoField] = useState()
const token = useSelector((state) => state.user.token)
const [cookie, setCookie] = useCookies(['auth'])
const confirm = () => {
axios.post(`/providers/?username=${cookie.auth.login}`,
{
photo : logoField
},
{ "headers" : { "Authorization" : "token " + token }})
.then(res => console.log(res))
.catch(err => console.log(err))
}
return(
<div className="registration-provider-container">
<div className="registration-title">Provider registration</div>
<input type="file" className="registration-logo-add" onChange={(e) => setLogoField(e.target.value)}/>
<button className="registration-confirm" onClick={() => confirm()}>Confirm</button>
</div>
)}
And the endpoint processing this request
class Providers(viewsets.ModelViewSet):
filterset_class = ProvidersFilter
queryset = Provider.objects.all()
permission_classes = [IsAuthenticatedOrReadOnly, IsProviderPermission, IsOneToOneProviderPermission]
def get_serializer_class(self):
if self.action == 'list':
return GetProviderSerializer
else:
return PutProviderSerializer
def create(self, request):
username = request.GET.get('username', '')
user = User.objects.get(username=username).pk
request.data.update({'user' : user})
print(request.data)
return super().create(request)
When I try to upload an image, django returns the following error:
"The submitted data was not a file. Check the encoding type on the form."
And I haven't found a way to correctly upload an image to django using Ajax. I also output what my browser sends to the server:
{photo : 'C:\\fakepath\\magnit.jpg'}