article

Monday, February 6, 2023

FastAPI Jinja2 Upload multiple images and show images

FastAPI Jinja2 Upload multiple images and show images

Install Fastapi

https://github.com/tiangolo/fastapi

pip install fastapi
C:\fastAPI\multipleupload>pip install fastapi
C:\fastAPI\multipleupload>pip install "uvicorn[standard]"

Install sqlalchemy jinja2
pip install python-multipart sqlalchemy jinja2
C:\fastAPI\multipleupload>pip install python-multipart sqlalchemy jinja2

Create main.py
multipleupload/main.py
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//multipleupload/main.py
from fastapi import FastAPI, Request, UploadFile, File
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
from fastapi.staticfiles import StaticFiles
 
from typing import List
 
IMAGEDIR = "images/"
 
app = FastAPI()
templates = Jinja2Templates(directory="templates")
app.mount("/images", StaticFiles(directory="images"), name="images")
 
@app.get('/', response_class=HTMLResponse)
def home(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})
 
@app.post("/upload-files")
async def create_upload_files(request: Request, files: List[UploadFile] = File(...)):
    for file in files:
        contents = await file.read()
        #save the file
        with open(f"{IMAGEDIR}{file.filename}", "wb") as f:
            f.write(contents)
 
    show = [file.filename for file in files]
 
    #return {"Result": "OK", "filenames": [file.filename for file in files]}
    return templates.TemplateResponse("index.html", {"request": request, "show": show})
make templates inside the templates directory

multipleupload/templates/base.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//multipleupload/templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FastAPI Jinja2 Upload multiple images and show images - Cairocoders</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <h1 class="page-header text-center">FastAPI Jinja2 Upload multiple images and show images</h1>
    {% block content %}
         
    {% endblock content %}
</div>
</body>
</html>
multipleupload/templates/index.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//multipleupload/templates/index.html
{% extends 'base.html' %}
 
{% block content %}
<div class="row">
    <form action="/upload-files/" enctype="multipart/form-data" method="post">
        <div class="mb-3">
            <label>Upload Files</label>
            <input class="form-control form-control-lg" name="files" type="file" multiple accept=".jpg, .png">
        </div>
        <div class="mb-3">
            <input type="submit" class="btn btn-primary btn-lg">
        </div>
    </form>
    <div class="col-12">
    {% for rs in show %}
        <div style="padding:20px;float:left;">
            <img width="500" src="{{ url_for('images', path=rs) }}"> 
        </div>
    {% endfor %} 
    </div>
</div>   
{% endblock content %}
run the FastAPI app

C:\fastAPI\multipleupload>uvicorn main:app --reload
with uvicorn using the file_name:app_instance
open the link on the browser http://127.0.0.1:8000/
http://127.0.0.1:8000/docs
Posted by ednalan at 12:41 AM . Under .

Related Post