article

Friday, February 28, 2020

Python Flask Multiple Files Upload


Python Flask Multiple Files Upload

#app.py
from flask import Flask, render_template, flash, request, redirect
from werkzeug.utils import secure_filename
import os
#import magic
import urllib.request

app = Flask(__name__)

UPLOAD_FOLDER = 'C:/flaskmyproject/demoapp/static'

app.secret_key = "Cairocoders-Ednalan"
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024

ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])

def allowed_file(filename):
 return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
 
@app.route('/')
def upload_form():
 return render_template('upload.html')

@app.route('/', methods=['POST'])
def upload_file():
 if request.method == 'POST':
        # check if the post request has the files part
  if 'files[]' not in request.files:
   flash('No file part')
   return redirect(request.url)
  files = request.files.getlist('files[]')
  for file in files:
   if file and allowed_file(file.filename):
    filename = secure_filename(file.filename)
    file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
  flash('File(s) successfully uploaded')
  return redirect('/')
  
if __name__ == '__main__':
 app.run(debug=True)
//upload.html
<!DOCTYPE html>
<html>
<head>
 <title>Python Flask Multiple Files Upload</title>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
 <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<div id="wrapper">
            <div id="page-wrapper">
                <div class="row">
                    <div class="container">
                        <div id="identitycard" style="margin-top:50px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <div class="panel-title">Select file(s) to upload</div>
                                </div>
                                <div class="panel-body">
        <p>
         {% with messages = get_flashed_messages() %}
           {% if messages %}
          {% for message in messages %}
            <div class="alert alert-success">
             <strong>{{ message }}</strong>
           </div>
          {% endfor %}
           {% endif %}
         {% endwith %}
        </p>
                                    <div class="row">
                                        <p style="padding: 8px;" class="text-center">File to upload txt, pdf, png, jpg, jpeg, gif</p>
                                    </div>
                                    <div class="row" style="padding: 10px 15px 9px;">
                                        <form method="post" action="/" enctype="multipart/form-data">
                                            <div class="form-group"> 
                                                <div class="row" style="margin-bottom: 20px;">
                                                    <div class="col-md-12 col-sm-12 col-xs-12 col-lg-12 col-md-offset-3 col-sm-offset-3 col-xs-offset-2"> 
                                                        <input type="file" name="files[]" multiple="true" autocomplete="off" required> 
                                                    </div>
                                                </div>
                                                <div class="row text-center" style="padding-left: 20px;padding-right: 20px;">
             <input type="submit" value="Submit" class="btn btn-lg btn-block btn-success" style="border-radius: 50px;background-color:hover: #35832f;">
            </div>                                                 
                                            </div>                                                                                          
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
</div>
</body>
</html>

Related Post