How to set number of files that can be uploaded in flask - html

Question

I want to limit number of images per post request in flask so how can i do that
My Code
from flask import Flask, redirect, url_for, render_template, request
from werkzeug.utils import secure_filename
from flask_uploads import UploadSet , IMAGES, configure_uploads
app = Flask(__name__)
UPLOAD_FOLDER = 'static/img/'
photos = UploadSet('photos', IMAGES)
app.config['MAX_CONTENT_LENGTH'] = 4 * 1024 * 1024
app.config['UPLOADED_PHOTOS_DEST'] = UPLOAD_FOLDER
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
configure_uploads(app, photos)
#app.route('/upload/', methods=["POST","GET"])
def upload():
if request.method == "POST" and 'photo' in request.files:
photo = request.files['photo']
photos.save(photo)
return 'saved'
else:
return render_template("upload.html)
if __name__ == "__main__":
app.run(debug=True,host="0.0.0.0", port="5000")
I want to be able to upload multiple files but limit only 2 at back-end
also is there a way to limit file upload in html?
HTML Code
<form action="#" method="POST" enctype="multipart/form-data">
<div class="custom-file">
<label for="customFile">Choose Cover Photo --Optional--</label>
<br>
<input type="file" name="photo" id="customFile">
</div>
</form>

Answer 1

Below is the code to handle the file limit from backend:
#app.route('/upload', methods=["POST","GET"])
def upload():
if request.method == "POST" and 'photo' in request.files:
uploaded_photos = request.files.getlist('photo')
if len(uploaded_photos) > 2:
error = "You are only allowed to upload a maximum of 2 files"
return render_template("upload.html", error=error)
else:
for photo in uploaded_photos:
photos.save(photo)
return 'saved'
else:
return render_template("upload.html")
Need to specify multiple attribute in the input field of the file to allow multiple images to be uploaded at a time
{% if error %}
<p class=error><strong>Error:</strong> {{ error }}</p>
{% endif %}
<form action="upload" method="POST" enctype="multipart/form-data">
<div class="custom-file">
<label for="customFile">Choose Cover Photo --Optional--</label>
<br>
<input type="file" name="photo" id="customFile" multiple>
<input type = "submit" value = "submit">
</div>
</form>
You can handle it in frontend using jquery. Below is the code.
$(function(){
$("input[type = 'submit']").click(function(){
var $fileUpload = $("input[type='file']");
if (parseInt($fileUpload.get(0).files.length) > 2){
alert("You are only allowed to upload a maximum of 2 files");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="POST" enctype="multipart/form-data">
<div class="custom-file">
<label for="customFile">Choose Cover Photo --Optional--</label>
<br>
<input type="file" name="photo" id="customFile" multiple>
<input type = "submit" value = "submit">
</div>
</form>