Dropzone js is very popular for ajax image uploading.Here we going to see , how to upload image using dropzone js.

Just follow the below steps:

1. Create form with file as input.


<form action="upload" class="dropzone"></form>

2. Download and include dropzone js and css using the link

www.dropzonejs.com

https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js

???????https://github.com/enyo/dropzone/tree/master/dist

 

3. Create server script to catch file and save them.


@app.route('/upload', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        file = request.files['file']
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            return ''
    return "ooooooppppppssss"

 

Full code:


import os
from flask import Flask, request, redirect, url_for,send_from_directory,render_template
from werkzeug import secure_filename

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

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS
@app.route('/', methods=['GET', 'POST'])
def index():
    return render_template('index.html')

@app.route('/upload', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        file = request.files['file']
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            return ''
    return "ooooooppppppssss"

if __name__ == '__main__':
    app.run(debug=True)

 

Download