Uploading and Reading a CSV File in Flask
Last Updated :
10 Feb, 2023
Flask is a flexible, lightweight web-development framework built using python. A Flask application is a Python script that runs on a web server, which listens to HTTP requests and returns responses. It is designed for simple and faster development. In this article, let’s upload a CSV (Comma-Separated Values) file and read the contents of the file on a web page of the browser.
Required Module
Install Flask by running the pip command in your terminal. Additionally, you may want to install some popular libraries such as Pandas.
pip install Flask
pip install Pandas
Implementation to Upload and Read the CSV File in Flask Application
Here in this Flask application, we are creating a folder named ‘staticFiles’ to store our uploaded CSV files.
Application File Directory
index.html
Let’s create a user interface (web page) – index.html for uploading the CSV file.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Uploading & Reading CSV file</ title >
</ head >
< body >
< form method = "POST" enctype = "multipart/form-data" action = "/" >
< input type = "file" name = "file" accept = ".csv" >
< input type = "submit" value = "Upload" >
</ form >
< p style = "color:blue;" >Choose csv file to upload</ p >
< form action = "/show_data" target = "_blank" >
< input type = "submit" value = "Show CSV" />
</ form >
</ body >
</ html >
|
Output:
index2.html
To let the user know that the file uploaded successfully we are creating another HTML file – index2.html.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Uploading & Reading CSV file</ title >
</ head >
< body >
< form method = "POST" enctype = "multipart/form-data" action = "/" >
< input type = "file" name = "file" accept = ".csv" >
< input type = "submit" value = "Upload" >
</ form >
< p style = "color:green;" > File uploaded successfully!! </ p >
< form action = "/show_data" target = "_blank" >
< input type = "submit" value = "Show CSV" />
</ form >
</ body >
</ html >
|
Output:
show_csv_data.html
We are also creating another HTML file – show_csv_data.html for displaying the data after clicking the Show CSV button.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
</ head >
< body >
< br >
{{ data_var|safe }}
</ body >
</ html >
|
Output:
Reading CSV file data in Table Format on a web page
app.py
Launch app.py from the code editor first, then open the deployment server URL in a web browser at http://127.0.0.1:5000. A web page with three buttons—Choose a file, Upload, and Show CSV—then appears. Click the Upload button to upload the CSV file. Then a prompt indicating that the file successfully uploaded displays. To read the file data on the website, select the “Show CSV” button. When you select “Show CSV,” a new tab opens up with your file’s data shown in tabular format.
Python3
from distutils.log import debug
from fileinput import filename
import pandas as pd
from flask import *
import os
from werkzeug.utils import secure_filename
UPLOAD_FOLDER = os.path.join( 'staticFiles' , 'uploads' )
ALLOWED_EXTENSIONS = { 'csv' }
app = Flask(__name__)
app.config[ 'UPLOAD_FOLDER' ] = UPLOAD_FOLDER
app.secret_key = 'This is your secret key to utilize session in Flask'
@app .route( '/' , methods = [ 'GET' , 'POST' ])
def uploadFile():
if request.method = = 'POST' :
f = request.files.get( 'file' )
data_filename = secure_filename(f.filename)
f.save(os.path.join(app.config[ 'UPLOAD_FOLDER' ],
data_filename))
session[ 'uploaded_data_file_path' ] =
os.path.join(app.config[ 'UPLOAD_FOLDER' ],
data_filename)
return render_template( 'index2.html' )
return render_template( "index.html" )
@app .route( '/show_data' )
def showData():
data_file_path = session.get( 'uploaded_data_file_path' , None )
uploaded_df = pd.read_csv(data_file_path,
encoding = 'unicode_escape' )
uploaded_df_html = uploaded_df.to_html()
return render_template( 'show_csv_data.html' ,
data_var = uploaded_df_html)
if __name__ = = '__main__' :
app.run(debug = True )
|
Output:
We can see the CSV file uploaded has been stored in ‘staticFiles’ folder with ‘uploads’ as a sub-folder.
Share your thoughts in the comments
Please Login to comment...