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

170
Vistas
Upload files to Flask server via xhr

I'm trying to create a file upload using flask and forms, but it isn't quite working. I can't quite figure out where the issue is at all. I've tried following multiple tutorials and looked at many stack overflow threads to no avail.

It seems like Flask isn't receiving any form data at all, and I can't figure out why. Here's my python code for the upload endpoint:

@app.route("/upload", methods=["post"])
def upload_endpoint():
    # Just prints ImmutableMultiDict([]) twice
    print(request.form)
    print(request.files)
    return "Success", 200

And here's my js related to the uploading process:

// Creates and returns an input element with all needed tags and event listeners
function createInput() {
    const input = document.createElement("input")
    input.setAttribute("type", "file")
    input.setAttribute("multiple", "true")
    input.setAttribute("name", "file")

    input.addEventListener("change", () => {
        submitInput(input)
    }, false)

    return input
}

// Takes an input tag, puts it in a form, and submits it via xhr
function submitInput(input) {
    const form = document.createElement("form")
    form.appendChild(input)

    const xhr = new XMLHttpRequest()
    xhr.open("POST", "/upload")

    // Calculates and logs upload progress
    xhr.upload.addEventListener("progress", (e) => {
        const percent = e.lengthComputable ? (e.loaded / e.total) * 100 : 0
        console.log(percent.toFixed(2))
    })

    xhr.setRequestHeader("Content-Type", "multipart/form-data")
    xhr.send(new FormData(form))
}

// Handles for when element is clicked. .click() is used to create the popup dialogue for selecting a fike
centerDrop.addEventListener("click", () => {
    const input = createInput()
    input.click()
    return false
}, false)

// Handles for when a file is dropped into the browser
dropArea.addEventListener("drop", (e) => {
    const input = createInput()
    input.files = e.dataTransfer.files
    submitInput(input)
}, false)

I've been testing out the upload feature with a 200kb image, however the requests being created are <1kb in size according to the dev console in the browser. Why does the image seem to not be included in the request?

over 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

Instead of adding the entire input programmatically into the form, try only adding its files:

function submitInput(input) {
    ...
    form.append("file", input.files) // Instead of form.appendChild(input)
    ...
}

And then access it on the BE using:

print("files:", request.files['file'])
over 4 years ago · Santiago Trujillo Denunciar

0

The problem is that I was trying to handle setting the request headers myself. Just removing this line: xhr.setRequestHeader("Content-Type", "multipart/form-data") did the trick for me.

Moral of the story is let XMLHttpRequest handle the headers for you, it knows what it's doing already in the case of submitting form data.

over 4 years ago · Santiago Trujillo Denunciar
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