I'm trying to upload image from react to database [django] I got errors GET http://localhost:3000/images/Koala.jpg 404 (Not Found) and images not shown on the page. but it is uploaded in my backend static files.
This my view:
@api_view(['POST'])
def uploadImage(request):
data = request.data
product_id = data['product_id']
product = Product.objects.get(id=product_id)
product.imageSrc = request.FILES.get('imageSrc')
product.save()
return Response('Image was uploaded')
NOTE: I got that response "Image was uploaded" this is my url of the view:
path('upload/', views.uploadImage, name="image-upload"),
and this is my react function to handle image upload:
const uploadFileHandler = async (e) => {
const file = e.target.files[0]
const formData = new FormData()
formData.append('imageSrc', file)
formData.append('product_id', productId)
setUploading(true)
try {
const config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
const { data } = await axios.post('/api/products/upload/', formData, config)
setImageSrc(data)
setUploading(false)
} catch (error) {
setUploading(false)
}
}
and this my HTML Code
<div id='imageSrc'>
<h6>upload picture</h6>
<input
value={imageSrc}
onChange={(e) => setImageSrc(e.target.value)}
>
</input>
<input
id='image-file'
type='file'
custom= 'true'
label='Choose File'
onChange={uploadFileHandler}
>
</input>
{uploading && <Loader />}
</div>
I don't know what is the problem but mostly it is when rendering the image from the backend after uploading it cuz it shows on the console
Not Found: /images/Image was uploaded
[31/Oct/2021 17:12:09] "GET /images/Image%20was%20uploaded HTTP/1.1" 404 2828