<\/a>Pre-requisites<\/h1>\n\n\n\nPython<\/strong>, Flask,<\/strong> and Jinja<\/strong> have been used in this article, so you should have a basic knowledge of all of them because Python has been used to write the code and Jinja has also been used in some other parts.<\/p>\n\n\n\nDon’t worry if you don’t understand Flask<\/strong> and Jinja templating<\/strong> because anyway, I will explain all the methods in detail.<\/p>\n\n\n\nLet’s begin with the first segment.<\/p>\n\n\n\n
<\/a>Displaying local images<\/h1>\n\n\n\nAs mentioned earlier, it is easy to render local images in Flask because all the images are served from the static<\/strong> folder of the project directory.<\/p>\n\n\n\n<\/a>Using url_for method<\/h2>\n\n\n\nFirst, you will create a directory, and then inside it create the folder structure shown below.<\/p>\n\n\n\n
flask_directory\n\u251c\u2500\u2500 app.py\n\u251c\u2500\u2500 static\n\u2502 \u2514\u2500\u2500 Image\n\u2502 \u2514\u2500\u2500 sample.png\n\u2514\u2500\u2500 templates\n \u2514\u2500\u2500 img_render.html<\/pre><\/div>\n\n\n\nAfter the complete folder structure is created, the code to start the flask server and render the HTML template needs to be written in the app.py<\/code> file. Please copy the code written below and paste it into your app.py<\/code> file.<\/p>\n\n\n\nfrom flask import Flask, render_template\n\napp = Flask(__name__)\n\n@app.route('\/')\ndef home():\n return render_template('image_render.html')\n\nif __name__ == '__main__':\n app.run(debug=True, port=9000)<\/pre><\/div>\n\n\n\nIn this code, we first imported Flask<\/code> and render_template<\/code> then instantiated the app then after that created a route that will render our HTML template and finally, there is the driver code that will run the app.<\/p>\n\n\n\nNow we have to add HTML to our img_render.html<\/code> file and also write the logic to render the image. With the help of Jinja templating<\/strong> and url_for()<\/code>, images present in the static<\/code> folder can be rendered.<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Rendering Local Images Using Flask<\/title>\n<\/head>\n<body>\n<img src= \"{{url_for('static', filename='\/Image\/GP.png')}}\" >\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\nBasic HTML code is written in the above HTML file and \"{{ url_for('static', filename='\/Image\/GP.png')}}\"<\/code> is used in the src<\/code> attribute inside the img<\/code> tag. This will find and render our images in the static<\/strong> folder. And this code is surrounded by {{ }}<\/code> which is a convention for writing Jinja<\/strong>.<\/p>\n\n\n\nIf you run your app now, you will see your image displayed.<\/p>\n\n\n\n![\"Image](\"https:\/\/geekpython.in\/wp-content\/uploads\/2023\/08\/1-5.png\")
<\/figure>\n\n\n\n<\/a>Using variable<\/h2>\n\n\n\nApart from the method shown above, you can also use another method. In this method, by storing the image in the variable<\/strong>, you can display the image by inserting that variable in the img<\/code> tag in the HTML file.<\/p>\n\n\n\nAgain, you create the same folder structure, and this time, you will see a different approach.<\/p>\n\n\n\n
This time copy the code given below in your app.py<\/code> file.<\/p>\n\n\n\nfrom flask import Flask, render_template\nimport os\n\napp = Flask(__name__)\n\nimg = os.path.join('static', 'Image')\n\n@app.route('\/')\ndef home():\n file = os.path.join(img, 'GP.png')\n return render_template('image_render.html', image=file)\n\nif __name__ == '__main__':\n app.run(debug=True)<\/pre><\/div>\n\n\n\nIn the above code we have done all the same as before but this time, we first define the path of the image folder and then joined the image folder path and image inside the home<\/code> function and stored it in the file<\/code> variable and then passed it to the render_template<\/code> along with the HTML template.<\/p>\n\n\n\nAnd to display the image, the image<\/code> variable has to be sent to the HTML template.<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Rendering Local Images Using Flask<\/title>\n<\/head>\n<body>\n<img src= \"{{image}}\" >\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\nIf you run the app.py<\/code> file, you will see the image displayed on the client side.<\/p>\n\n\n\n![\"Image](\"https:\/\/geekpython.in\/wp-content\/uploads\/2023\/08\/2-6.png\")
<\/figure>\n\n\n\nNow let’s move on to the next segment of the article, where you will learn to upload and display the dynamic images.<\/p>\n\n\n\n
<\/a>Upload and display dynamic images<\/h1>\n\n\n\nGetting dynamic images displayed is a bit difficult. First, the photos have to be uploaded to the local folder and then that image has to be served from the uploaded folder. And in this process, more code has to be written.<\/p>\n\n\n\n
<\/a>A basic approach<\/h2>\n\n\n\nIn this method, you will see the most basic approach which is preferred by most developers.<\/p>\n\n\n\n
As you saw in the first segment, we used the variable<\/em><\/strong> method to render the local image. Keeping this in mind, we will use the variable<\/strong> in this method too, but the process will be slightly different.<\/p>\n\n\n\nAgain create the same folder structure as before and then copy the code given below in the app.py<\/code> file.<\/p>\n\n\n\nfrom flask import Flask, render_template, request\nfrom werkzeug.utils import secure_filename\nimport os\n\napp = Flask(__name__)\n\nupload_folder = os.path.join('static', 'uploads')\n\napp.config['UPLOAD'] = upload_folder\n\n@app.route('\/', methods=['GET', 'POST'])\ndef upload_file():\n if request.method == 'POST':\n file = request.files['img']\n filename = secure_filename(file.filename)\n file.save(os.path.join(app.config['UPLOAD'], filename))\n img = os.path.join(app.config['UPLOAD'], filename)\n return render_template('image_render.html', img=img)\n return render_template('image_render.html')\n\n\nif __name__ == '__main__':\n app.run(debug=True, port=8001)<\/pre><\/div>\n\n\n\nFirst, we imported the required libraries and defined and configured the path to store the uploaded images.<\/p>\n\n\n\n
Then we defined a route that would handle the post request and defined a upload_file<\/code> function to save and display the image.<\/p>\n\n\n\nIn the upload_file<\/code> function, we took user input and then saved it in our upload<\/strong> folder path and then stored that uploaded input in the img<\/code> variable and sent it to our HTML template, and finally rendered the HTML template.<\/p>\n\n\n\nNow you must be wondering why we used secure_filename<\/code> here. This ensures that what the user is inputting is secure and should always be used to secure the filename.<\/p>\n\n\n\nAfter this, now you have to copy the code given below in the image_render.html<\/code> file in the templates<\/strong> folder.<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Rendering Dynamic Images Using Flask<\/title>\n<\/head>\n<body>\n<form action=\"{{ url_for('upload_file') }}\" enctype=\"multipart\/form-data\" method=\"POST\">\n <input name=\"img\" type=\"file\"\/>\n <input type=\"submit\"\/>\n<\/form>\n\n{% if img %}\n<h1>Rendered Image<\/h1>\n<img src=\"{{img}}\">\n{% else %}\n<h1>Image will be render here...<\/h1>\n{% endif %}\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\nNow in this code, we have inserted a simple form tag that handles the POST<\/strong> request which comes from the upload_file<\/code> function and then inside it we have inserted two input tags one helps to choose the file and the other handles the submission.<\/p>\n\n\n\nAnd further, in this code, we have rendered the image.<\/p>\n\n\n\n![\"App](\"https:\/\/geekpython.in\/wp-content\/uploads\/2023\/08\/3-3.png\")
<\/figure>\n\n\n\nThe above image shown is before rendering the dynamic image from the user.<\/em><\/strong><\/p>\n\n\n\n![\"After](\"https:\/\/geekpython.in\/wp-content\/uploads\/2023\/08\/4-3.png\")
<\/figure>\n\n\n\nThe above image shown is after uploading the dynamic image from the user.<\/em><\/strong><\/p>\n\n\n\n<\/a>Using different method<\/h2>\n\n\n\nIn the earlier approach, you saw that we were storing the image in the variable and sending it to the HTML template, and then displaying the image from there.<\/p>\n\n\n\n
Now in this method, instead of using the variable method, we will use the send_from_directory<\/code> method of Flask.<\/p>\n\n\n\nCreate the same folder structure and copy the below code in app.py<\/code> file.<\/p>\n\n\n\nfrom flask import Flask, request, render_template, send_from_directory\nfrom werkzeug.utils import secure_filename\nimport os\n\napp = Flask(__name__)\n\nupload = 'D:\/SACHIN\/Pycharm\/Image rendering\/Dynamic Img Render\/uploads'\n\napp.config['UPLOAD'] = upload\n\n@app.route('\/', methods=['GET', 'POST'])\ndef file_upload():\n if request.method == 'POST':\n f = request.files['file']\n filename = secure_filename(f.filename)\n f.save(os.path.join(app.config['UPLOAD'], filename))\n return send_from_directory(app.config['UPLOAD'], filename)\n return render_template('render.html')\n\n\nif __name__ == '__main__':\n app.run(debug=True, port=4339)<\/pre><\/div>\n\n\n\nWe have written almost the same code which was written earlier in the method, the only difference is that this time instead of storing the image in a variable, we are rendering it directly from our upload folder with the help of send_from_directory<\/code> method of Flask.<\/p>\n\n\n\nThis time our HTML template will have only one form with two input tags. Create a render.html<\/code> file inside the templates folder and copy the code below.<\/p>\n\n\n\n<html>\n<head>\n <title>Uploading a dynamic image<\/title>\n<\/head>\n<body>\n <form action = \"\/\" method = \"post\" enctype=\"multipart\/form-data\">\n <input type=\"file\" name=\"file\" \/>\n <input type = \"submit\" value=\"Upload\">\n <\/form>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\nIf you run the app, the selected image will be uploaded to the upload folder and then displayed on the client side with the help of send_from_directory<\/code>.<\/p>\n\n\n\n![\"uploading](\"https:\/\/geekpython.in\/wp-content\/uploads\/2023\/08\/5-3.png\")
<\/figure>\n\n\n\nThe above image shown is before uploading and displaying the specified image.<\/em><\/strong><\/p>\n\n\n\n![\"image](\"https:\/\/geekpython.in\/wp-content\/uploads\/2023\/08\/6-2-1024x451.png\")
<\/figure>\n\n\n\nThe above image shown is after uploading and displaying the specified image.<\/em><\/strong><\/p>\n\n\n\nYou can perform this method with a different approach. In this approach, you can create a separate route to display the image. Here’s how you can do it.<\/p>\n\n\n\n
The process will be the same as in the previous approach, but in this first, you will save the image and store it in a variable, then by defining a specific URL you will display the image with the help of the send_from_directory<\/code> function.<\/p>\n\n\n\nimport os\nfrom flask import Flask, render_template, request, redirect, url_for, send_from_directory\nfrom werkzeug.utils import secure_filename\n\nUPLOAD_FOLDER = 'D:\/SACHIN\/Pycharm\/Image rendering\/Image_Rendering'\n\napp = Flask(__name__)\napp.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER\n\n@app.route('\/', methods=['GET', 'POST'])\ndef upload_file():\n if request.method == 'POST':\n file = request.files['file']\n filename = secure_filename(file.filename)\n file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))\n return redirect(url_for('download_file', name=filename))\n return render_template('upload.html')\n\n@app.route('\/uploads\/<name>')\ndef display_file(name):\n return send_from_directory(app.config[\"UPLOAD_FOLDER\"], name)\n\n\nif __name__ == '__main__':\n app.run(debug=True, port=6001)<\/pre><\/div>\n\n\n\nHere we are doing the same but this time we have created a new route that will normally be used to display the image and in our upload_file<\/code> function we have used the redirect<\/code> function which will redirect to the specified route.<\/p>\n\n\n\nCreate a file named upload.html<\/code> inside the templates<\/strong> folder just like you’ve done every time and then copy the below code.<\/p>\n\n\n\n<!doctype html>\n<html>\n<title>Upload new File<\/title>\n<body>\n<h1>Upload new File<\/h1>\n<form enctype=\"multipart\/form-data\" method=\"post\">\n <input name=file type=file>\n <input type=submit value=Upload>\n<\/form>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\nIf you will run the app and try to upload the image then the uploaded image will be displayed on a different route.<\/p>\n\n\n\n![\"uploading](\"https:\/\/geekpython.in\/wp-content\/uploads\/2023\/08\/7-1.png\")
<\/figure>\n\n\n\n![\"Displaying](\"https:\/\/geekpython.in\/wp-content\/uploads\/2023\/08\/8-2-1024x437.png\")
<\/figure>\n\n\n\n<\/a>Conclusion<\/h1>\n\n\n\nUploading an image and then displaying it is a bit tricky and in this article, you saw how to upload and display an image in Flask.<\/p>\n\n\n\n
In this article, you saw how to render static images and how to upload and display dynamic images.<\/p>\n\n\n\n
You saw two methods for rendering static files and two methods for uploading and displaying dynamic files.<\/p>\n\n\n\n
With the help of this article, you must have got an idea of how to handle static and dynamic files with Flask and also cleared some concepts of Flask. Some of these methods you may already know but some methods you may not know.<\/p>\n\n\n\n
\n\n\n\n\ud83c\udfc6Other articles you might like if you like this article<\/strong><\/p>\n\n\n\n\u2705An intuitive guide on data augmentation along with the techniques<\/a>.<\/p>\n\n\n\n\u2705Implement a custom deep learning model into the Flask app for image recognition<\/a>.<\/p>\n\n\n\n\u2705Build your first command line interface using Python<\/a>.<\/p>\n\n\n\n\u2705Learn how to execute the dynamically generated code using Python<\/a>.<\/p>\n\n\n\n\u2705Make attractive web pages using Python by integrating TailwindCSS into the Flask<\/a>.<\/p>\n\n\n\n\u2705Python virtual environments: best practices and hands-on guide<\/a>.<\/p>\n\n\n\n
Don’t worry if you don’t understand Flask<\/strong> and Jinja templating<\/strong> because anyway, I will explain all the methods in detail.<\/p>\n\n\n\n Let’s begin with the first segment.<\/p>\n\n\n\n As mentioned earlier, it is easy to render local images in Flask because all the images are served from the static<\/strong> folder of the project directory.<\/p>\n\n\n\n First, you will create a directory, and then inside it create the folder structure shown below.<\/p>\n\n\n\n After the complete folder structure is created, the code to start the flask server and render the HTML template needs to be written in the In this code, we first imported Now we have to add HTML to our Basic HTML code is written in the above HTML file and If you run your app now, you will see your image displayed.<\/p>\n\n\n\n Apart from the method shown above, you can also use another method. In this method, by storing the image in the variable<\/strong>, you can display the image by inserting that variable in the Again, you create the same folder structure, and this time, you will see a different approach.<\/p>\n\n\n\n This time copy the code given below in your In the above code we have done all the same as before but this time, we first define the path of the image folder and then joined the image folder path and image inside the And to display the image, the If you run the Now let’s move on to the next segment of the article, where you will learn to upload and display the dynamic images.<\/p>\n\n\n\n Getting dynamic images displayed is a bit difficult. First, the photos have to be uploaded to the local folder and then that image has to be served from the uploaded folder. And in this process, more code has to be written.<\/p>\n\n\n\n In this method, you will see the most basic approach which is preferred by most developers.<\/p>\n\n\n\n As you saw in the first segment, we used the variable<\/em><\/strong> method to render the local image. Keeping this in mind, we will use the variable<\/strong> in this method too, but the process will be slightly different.<\/p>\n\n\n\n Again create the same folder structure as before and then copy the code given below in the First, we imported the required libraries and defined and configured the path to store the uploaded images.<\/p>\n\n\n\n Then we defined a route that would handle the post request and defined a In the Now you must be wondering why we used After this, now you have to copy the code given below in the Now in this code, we have inserted a simple form tag that handles the POST<\/strong> request which comes from the And further, in this code, we have rendered the image.<\/p>\n\n\n\n The above image shown is before rendering the dynamic image from the user.<\/em><\/strong><\/p>\n\n\n\n The above image shown is after uploading the dynamic image from the user.<\/em><\/strong><\/p>\n\n\n\n In the earlier approach, you saw that we were storing the image in the variable and sending it to the HTML template, and then displaying the image from there.<\/p>\n\n\n\n Now in this method, instead of using the variable method, we will use the Create the same folder structure and copy the below code in We have written almost the same code which was written earlier in the method, the only difference is that this time instead of storing the image in a variable, we are rendering it directly from our upload folder with the help of This time our HTML template will have only one form with two input tags. Create a If you run the app, the selected image will be uploaded to the upload folder and then displayed on the client side with the help of The above image shown is before uploading and displaying the specified image.<\/em><\/strong><\/p>\n\n\n\n The above image shown is after uploading and displaying the specified image.<\/em><\/strong><\/p>\n\n\n\n You can perform this method with a different approach. In this approach, you can create a separate route to display the image. Here’s how you can do it.<\/p>\n\n\n\n The process will be the same as in the previous approach, but in this first, you will save the image and store it in a variable, then by defining a specific URL you will display the image with the help of the Here we are doing the same but this time we have created a new route that will normally be used to display the image and in our Create a file named If you will run the app and try to upload the image then the uploaded image will be displayed on a different route.<\/p>\n\n\n\n Uploading an image and then displaying it is a bit tricky and in this article, you saw how to upload and display an image in Flask.<\/p>\n\n\n\n In this article, you saw how to render static images and how to upload and display dynamic images.<\/p>\n\n\n\n You saw two methods for rendering static files and two methods for uploading and displaying dynamic files.<\/p>\n\n\n\n With the help of this article, you must have got an idea of how to handle static and dynamic files with Flask and also cleared some concepts of Flask. Some of these methods you may already know but some methods you may not know.<\/p>\n\n\n\n \ud83c\udfc6Other articles you might like if you like this article<\/strong><\/p>\n\n\n\n \u2705An intuitive guide on data augmentation along with the techniques<\/a>.<\/p>\n\n\n\n \u2705Implement a custom deep learning model into the Flask app for image recognition<\/a>.<\/p>\n\n\n\n \u2705Build your first command line interface using Python<\/a>.<\/p>\n\n\n\n \u2705Learn how to execute the dynamically generated code using Python<\/a>.<\/p>\n\n\n\n \u2705Make attractive web pages using Python by integrating TailwindCSS into the Flask<\/a>.<\/p>\n\n\n\n \u2705Python virtual environments: best practices and hands-on guide<\/a>.<\/p>\n\n\n\n<\/a>Displaying local images<\/h1>\n\n\n\n
<\/a>Using url_for method<\/h2>\n\n\n\n
flask_directory\n\u251c\u2500\u2500 app.py\n\u251c\u2500\u2500 static\n\u2502 \u2514\u2500\u2500 Image\n\u2502 \u2514\u2500\u2500 sample.png\n\u2514\u2500\u2500 templates\n \u2514\u2500\u2500 img_render.html<\/pre><\/div>\n\n\n\n
app.py<\/code> file. Please copy the code written below and paste it into your app.py<\/code> file.<\/p>\n\n\n\nfrom flask import Flask, render_template\n\napp = Flask(__name__)\n\n@app.route('\/')\ndef home():\n return render_template('image_render.html')\n\nif __name__ == '__main__':\n app.run(debug=True, port=9000)<\/pre><\/div>\n\n\n\nFlask<\/code> and render_template<\/code> then instantiated the app then after that created a route that will render our HTML template and finally, there is the driver code that will run the app.<\/p>\n\n\n\nimg_render.html<\/code> file and also write the logic to render the image. With the help of Jinja templating<\/strong> and url_for()<\/code>, images present in the static<\/code> folder can be rendered.<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Rendering Local Images Using Flask<\/title>\n<\/head>\n<body>\n<img src= \"{{url_for('static', filename='\/Image\/GP.png')}}\" >\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n\"{{ url_for('static', filename='\/Image\/GP.png')}}\"<\/code> is used in the src<\/code> attribute inside the img<\/code> tag. This will find and render our images in the static<\/strong> folder. And this code is surrounded by {{ }}<\/code> which is a convention for writing Jinja<\/strong>.<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/a>Using variable<\/h2>\n\n\n\n
img<\/code> tag in the HTML file.<\/p>\n\n\n\napp.py<\/code> file.<\/p>\n\n\n\nfrom flask import Flask, render_template\nimport os\n\napp = Flask(__name__)\n\nimg = os.path.join('static', 'Image')\n\n@app.route('\/')\ndef home():\n file = os.path.join(img, 'GP.png')\n return render_template('image_render.html', image=file)\n\nif __name__ == '__main__':\n app.run(debug=True)<\/pre><\/div>\n\n\n\nhome<\/code> function and stored it in the file<\/code> variable and then passed it to the render_template<\/code> along with the HTML template.<\/p>\n\n\n\nimage<\/code> variable has to be sent to the HTML template.<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Rendering Local Images Using Flask<\/title>\n<\/head>\n<body>\n<img src= \"{{image}}\" >\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\napp.py<\/code> file, you will see the image displayed on the client side.<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/a>Upload and display dynamic images<\/h1>\n\n\n\n
<\/a>A basic approach<\/h2>\n\n\n\n
app.py<\/code> file.<\/p>\n\n\n\nfrom flask import Flask, render_template, request\nfrom werkzeug.utils import secure_filename\nimport os\n\napp = Flask(__name__)\n\nupload_folder = os.path.join('static', 'uploads')\n\napp.config['UPLOAD'] = upload_folder\n\n@app.route('\/', methods=['GET', 'POST'])\ndef upload_file():\n if request.method == 'POST':\n file = request.files['img']\n filename = secure_filename(file.filename)\n file.save(os.path.join(app.config['UPLOAD'], filename))\n img = os.path.join(app.config['UPLOAD'], filename)\n return render_template('image_render.html', img=img)\n return render_template('image_render.html')\n\n\nif __name__ == '__main__':\n app.run(debug=True, port=8001)<\/pre><\/div>\n\n\n\nupload_file<\/code> function to save and display the image.<\/p>\n\n\n\nupload_file<\/code> function, we took user input and then saved it in our upload<\/strong> folder path and then stored that uploaded input in the img<\/code> variable and sent it to our HTML template, and finally rendered the HTML template.<\/p>\n\n\n\nsecure_filename<\/code> here. This ensures that what the user is inputting is secure and should always be used to secure the filename.<\/p>\n\n\n\nimage_render.html<\/code> file in the templates<\/strong> folder.<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Rendering Dynamic Images Using Flask<\/title>\n<\/head>\n<body>\n<form action=\"{{ url_for('upload_file') }}\" enctype=\"multipart\/form-data\" method=\"POST\">\n <input name=\"img\" type=\"file\"\/>\n <input type=\"submit\"\/>\n<\/form>\n\n{% if img %}\n<h1>Rendered Image<\/h1>\n<img src=\"{{img}}\">\n{% else %}\n<h1>Image will be render here...<\/h1>\n{% endif %}\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\nupload_file<\/code> function and then inside it we have inserted two input tags one helps to choose the file and the other handles the submission.<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/a>Using different method<\/h2>\n\n\n\n
send_from_directory<\/code> method of Flask.<\/p>\n\n\n\napp.py<\/code> file.<\/p>\n\n\n\nfrom flask import Flask, request, render_template, send_from_directory\nfrom werkzeug.utils import secure_filename\nimport os\n\napp = Flask(__name__)\n\nupload = 'D:\/SACHIN\/Pycharm\/Image rendering\/Dynamic Img Render\/uploads'\n\napp.config['UPLOAD'] = upload\n\n@app.route('\/', methods=['GET', 'POST'])\ndef file_upload():\n if request.method == 'POST':\n f = request.files['file']\n filename = secure_filename(f.filename)\n f.save(os.path.join(app.config['UPLOAD'], filename))\n return send_from_directory(app.config['UPLOAD'], filename)\n return render_template('render.html')\n\n\nif __name__ == '__main__':\n app.run(debug=True, port=4339)<\/pre><\/div>\n\n\n\nsend_from_directory<\/code> method of Flask.<\/p>\n\n\n\nrender.html<\/code> file inside the templates folder and copy the code below.<\/p>\n\n\n\n<html>\n<head>\n <title>Uploading a dynamic image<\/title>\n<\/head>\n<body>\n <form action = \"\/\" method = \"post\" enctype=\"multipart\/form-data\">\n <input type=\"file\" name=\"file\" \/>\n <input type = \"submit\" value=\"Upload\">\n <\/form>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
send_from_directory<\/code>.<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\nsend_from_directory<\/code> function.<\/p>\n\n\n\nimport os\nfrom flask import Flask, render_template, request, redirect, url_for, send_from_directory\nfrom werkzeug.utils import secure_filename\n\nUPLOAD_FOLDER = 'D:\/SACHIN\/Pycharm\/Image rendering\/Image_Rendering'\n\napp = Flask(__name__)\napp.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER\n\n@app.route('\/', methods=['GET', 'POST'])\ndef upload_file():\n if request.method == 'POST':\n file = request.files['file']\n filename = secure_filename(file.filename)\n file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))\n return redirect(url_for('download_file', name=filename))\n return render_template('upload.html')\n\n@app.route('\/uploads\/<name>')\ndef display_file(name):\n return send_from_directory(app.config[\"UPLOAD_FOLDER\"], name)\n\n\nif __name__ == '__main__':\n app.run(debug=True, port=6001)<\/pre><\/div>\n\n\n\nupload_file<\/code> function we have used the redirect<\/code> function which will redirect to the specified route.<\/p>\n\n\n\nupload.html<\/code> inside the templates<\/strong> folder just like you’ve done every time and then copy the below code.<\/p>\n\n\n\n<!doctype html>\n<html>\n<title>Upload new File<\/title>\n<body>\n<h1>Upload new File<\/h1>\n<form enctype=\"multipart\/form-data\" method=\"post\">\n <input name=file type=file>\n <input type=submit value=Upload>\n<\/form>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/a>Conclusion<\/h1>\n\n\n\n
\n\n\n\n