How to upload multiple files with Flask ? | by Nelson Hernández | Medium

How to upload multiple files with Flask ?

In this example we will learn how to upload multiple files using Flask in a very simple way

upload multiple images with Flask || Nelsonher || nelsonher019

1) Creation of virtual environment

In this case I decided to use virtualenv but you can use pipenv if you like.

virtualenv venv
source ./venv/bin/activate

2) Installation of dependencies

pip install Flask

3 ) Flask server creation

from flask import Flask

app = Flask(__name__)

if __name__ == "__main__":

4) Endpoint upload multiple images

from flask import Flask, request
from werkzeug.utils import secure_filename
import os

app = Flask(__name__)

@app.route('/upload/', methods=["POST"])
def upload_image():
if request.method == 'POST':
files = request.files.getlist("files")
for file in files:
filename = secure_filename(file.filename)
working_directory = os.getcwd() + "/files/" + filename)
except FileNotFoundError :
return 'Error, folder does not exist'
return "Success"

if __name__ == "__main__":

5) Frontend with JavaScript

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<input id="myInput" type="file" multiple />
<button type="click" id="btn">CLICK</button>
const input = document.getElementById("myInput");
const btn = document.getElementById("btn");
var filenames = [];
var ficheros = null;

input.addEventListener("change", (e) => {
ficheros =;
for (const iterator of {

btn.addEventListener("click", (e) => {
// create formData object
const formdata = new FormData();
filenames.forEach((filename,index) => {
formdata.append("files", ficheros[index], filename);
var requestOptions = {
method: "POST",
body: formdata,
redirect: "follow",

fetch("http://localhost:5000/test", requestOptions)
.then((response) => response.text())
.then((result) => console.log(result))
.catch((error) => console.log("error", error));