How to get path of all uploaded files in Flask

Question

I am making a rest API for multipart request API code is working fine but I am unable to get URL of multiple files any body know how to get this done code I done so far:

@app.route('/multiple-files-upload', methods=['POST'])
def upload_file():
    randNum = random.randint(10, 900)
    appendRand = "SWM-"+str(randNum)
    date = str(datetime.date(datetime.now()))
    
    # subject = request.form['subject']
    # details = request.form['details']
    # province = request.form['province']
    # district = request.form['district']
    # tehsil = request.form['tehsil']
    # lat = request.form['lat']
    # lon = request.form['lon']
    # username = request.form['username']
    # status = request.form['status']
    files = request.files.getlist('files')
    
    errors = {}
    data = {}
    success = False

    for file in files:
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            appendDate = str(appendRand)+"-"+date+"-"+filename
            file.save(os.path.join(app.config['UPLOAD_FOLDER'],appendDate))
            success = True
        else:
            errors[file.filename] = 'File type is not allowed'

    # if success and errors:
    #     errors['message'] = 'File(s) successfully uploaded'
    #     resp = jsonify(errors)
    #     resp.status_code = 500
    #     return resp

    if success:
        filename = secure_filename(file.filename)
        url = appendPath +'/'+appendDate
        data = {"URL":url}
        resp = jsonify({"Error":"flase","Code":"00",'Message': 'Files successfully uploaded',"Data":data})
        resp.status_code = 200
        return resp
    else:
        resp = jsonify(errors)
        resp.status_code = 500
        return resp

Response I get:

{
    "Error": "flase",
    "Code": "00",
    "Message": "Files successfully uploaded",
    "Data": {
        "URL": "/uploads/SWM-882-2022-02-17-API.PNG"
    }
}

Desired response:

{
    "Error": "flase",
    "Code": "00",
    "Message": "Files successfully uploaded",
    "Data": {
        "URL": "/uploads/SWM-882-2022-02-17-API.PNG"
         "URL": "/uploads/SWM-882-2022-02-17-API.PNG"
          "URL": "/uploads/SWM-882-2022-02-17-API.PNG"
           "URL": "/uploads/SWM-882-2022-02-17-API.PNG"
    }
}

E.g. when I upload multiple files I get multiple URLs now only get 1 URL

Answer 1

The example below follows your code and shows how to upload multiple files to the server using AJAX. As I am assuming you are trying.
Depending on whether an error occurs or not, a different response from the server is returned.
This contains a message and possible error messages, each of which is assigned to a file name. Furthermore, the resulting urls of the successfully uploaded files are listed.

Flask (app.py)

import os
from flask import Flask
from flask import (
    jsonify,
    render_template,
    request,
    url_for
)
from datetime import date
from random import randint
from werkzeug.utils import secure_filename

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = app.static_folder

@app.route('/')
def index():
    return render_template('index.html')

def allowed_file(filename):
    # Your validation code here!
    return True

@app.route('/upload', methods=['POST'])
def upload():
    errors = {}
    data = []
    prefix = f'SWM-{randint(10,900)}-{date.today()}'
    files = request.files.getlist('files')
    for file in files:
        if file.filename != '' and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            filename = f'{prefix}-{filename}'
            file.save(os.path.join(
                app.config['UPLOAD_FOLDER'],
                filename
            ))
            data.append({ 'url': filename })
        else:
            errors[file.filename] = 'File type is not allowed'

    return jsonify({
        'message': 'An error has occurred.' if errors else 'Files successfully uploaded',
        'errors': errors,
        'data': data
    }), 400 if errors else 200

HTML (templates/index.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Index</title>
  </head>
  <body>
    <form name="my-form" method="post">
      <input type="file" name="files" multiple />
      <input type="submit" />
    </form>

    <script type="text/javascript">
      ((uri) => {
        const formElem = document.querySelector('form[name="my-form"]');
        formElem.addEventListener('submit', evt => {
          evt.preventDefault();
          fetch(uri, {
            method: 'post',
            body: new FormData(evt.target)
          }).then(resp => resp.json())
            .then(data => {
              console.log(data);
            });
          evt.target.reset(),
        });
      })({{ url_for('upload') | tojson }});
    </script>
  </body>
</html>