Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

164
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda