How to Redirect the Upload Photo Path Flask

Introduction

Here I am going to bear witness you how to upload multiple images and brandish them i by one once images go uploaded using Python programming linguistic communication. I am using here Flask as a web based framework on summit of Python language.

On the UI (User Interface) there is an input field which is used to select multiple files. To select multiple files subsequently clicking on browse button you need to concord Ctrl cardinal (Windows Os) on the keyboard and click on the images you lot desire to select for upload.

Related Posts:

• Upload and brandish an prototype using Python and Flask

I take added some bones validation on file type, i.e., but image files will exist uploaded. If you lot select non-prototype files then these files will not be uploaded. It will not throw whatever error in case non-image file merely will not be uploaded.

Prerequisites

Python iii.eight.3 – 3.9.i, Flask 1.ane.ii

Project Directory

Create a projection root directory chosenpython-flask-upload-display-multiple-images as per your chosen location.

I may not mention the projection'southward root directory name in the subsequent sections but I will assume that I am creating files with respect to the project's root directory.

Flask Configuration

You need flask instance in order to run web application using Flask framework.

I will too define the file upload location and maximum size of the file a user can upload.

You should not allow user to upload unlimited size of file due to security reasons or to avoid exhausting server space.

The standard directory for storing static resources such equally images, css, JavaScript files into Flask application is to put understatic directory. Here I am putting the uploaded file understatic/uploads directory from where finally information technology will display the image on the spider web page.

Create a file calledapp.py with the below code.

          from flask import Flask  UPLOAD_FOLDER = 'static/uploads/'  app = Flask(__name__) app.secret_key = "secret key" app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024        

Upload Multiple Images

Next I will createmain.py script to configure the endpoint for uploading multiple images. It defines the required URIs for performing file upload operations.

I have allowed certain types of images, such equally png, jpg, jpeg, gif.

I am using http method Post to upload image files. later on uploading and saving the image to deejay I am returning the filename to the jinja2 flask template.

I have some other functiondisplay_image() that is used on the flask template to display the actual images from thestatic/uploads folder.

This beneath line is required when you lot want to serve the file or epitome fromstatic folder only.

          return redirect(url_for('static', filename='uploads/' + filename), code=301)        

I have usedupload.html page for uploading multiple files to the desired directory.

          import os from app import app import urllib.request from flask import Flask, flash, asking, redirect, url_for, render_template from werkzeug.utils import secure_filename  ALLOWED_EXTENSIONS = gear up(['png', 'jpg', 'jpeg', 'gif'])  def allowed_file(filename): 	return '.' in filename and filename.rsplit('.', 1)[i].lower() in ALLOWED_EXTENSIONS 	 @app.road('/') def upload_form(): 	return render_template('upload.html')  @app.route('/', methods=['POST']) def upload_image(): 	if 'files[]' not in asking.files: 		flash('No file role') 		return redirect(request.url) 	files = asking.files.getlist('files[]') 	file_names = [] 	for file in files: 		if file and allowed_file(file.filename): 			filename = secure_filename(file.filename) 			file_names.append(filename) 			file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename)) 		#else: 		#	flash('Allowed paradigm types are -> png, jpg, jpeg, gif') 		#	return redirect(request.url)  	return render_template('upload.html', filenames=file_names)  @app.route('/display/<filename>') def display_image(filename): 	#print('display_image filename: ' + filename) 	return redirect(url_for('static', filename='uploads/' + filename), code=301)  if __name__ == "__main__":     app.run()        

Template View File

The default location in flask based applications of the template or view files is templates binder. This isupload.html page kept under templates directory.

          <!doctype html> <title>Python Flask Upload Multiple Images and Display them</title> <h2>Select multiple images to upload and display</h2> <p> 	{% with messages = get_flashed_messages() %} 	  {% if messages %} 		<ul class=flashes> 		{% for message in messages %} 		  <li>{{ bulletin }}</li> 		{% endfor %} 		</ul> 	  {% endif %} 	{% endwith %} </p>  <form method="post" action="/" enctype="multipart/class-data">     <dl> 		<p> 			<input type="file" name="files[]" multiple="true" autocomplete="off" required> 		</p>     </dl>     <p> 		<input type="submit" value="Submit"> 	</p> </course>  {% if filenames %} 	{% for filename in filenames %} 		<div> 			<img src="{{ url_for('display_image', filename=filename) }}"> 		</div> 	{% endfor %} {% endif %}        

Deploy the Awarding

At present navigate to the projection's root directory using control line tool and execute the commandpython chief.py, your server volition be started on default port5000.

If you want to change the port then yous can alter the lineapp.run() toapp.run(port=5001), where5001 is the new port.

Test the Application

When you lot hitting the URLhttp://localhost:5000 in the browser to get the beneath page to upload the paradigm.

I selected two image files and uploaded for display on the page:

Source Code

Download

makinsonhentive.blogspot.com

Source: https://roytuts.com/upload-and-display-multiple-images-using-python-and-flask/

Share this post