Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

157
Vistas
Django-React Upload Image Issue

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
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda