3

I'm trying to upload a file to localhost using Dropzone JS and a Flask backend. I installed the flask-dropzone module via pip, and initialized dropzone successfully. This means the front-end is all good and I'm able to see the dropzone area, the file being uploaded and the animations.

However, when I drag and drop any file, I get a Server error: 0 message. Therefore, my file is not being saved into my uploads folder. Can someone look at my code I have and give me some suggestions?

Here's my folder structure:

newApp
    -templates
        -home.html
    -static
    -uploads
    -app.py

Here's my app.py:

import os
from flask import Flask, render_template, request, redirect, url_for
from werkzeug.utils import secure_filename
import MySQLdb
from flask_dropzone import Dropzone

app = Flask(__name__)

dropzone = Dropzone(app)

db = MySQLdb.connect(host="localhost",
                     user="root",
                     passwd="myPassword",
                     db="myDbName")

@app.route('/', methods=['GET', 'POST'])

def home():
    cur = db.cursor()

    cur.execute('SELECT * FROM users')

    users = cur.fetchall()

    for row in users:
        return render_template('home.html', users=users)

    db.close()

def index():
    return render_template('layout.html')

def upload():
    if request.method == 'POST':
        f = request.files.get('file')
        f.save(os.path.join('/uploads', f.filename))

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

And my home.html template:

<h4>Users</h4>

{{ dropzone.load() }}

{{ dropzone.create(action_view='home') }}

{{ dropzone.style('border: 2px dashed #0087F7; margin: 10%; min-height: 400px;') }}

{% for user in users %}

    <p>{{user[2]}}</p>

{% endfor %}
escplat12
  • 2,191
  • 4
  • 22
  • 34

1 Answers1

0

Okay, I found a solution and it works perfectly. The issue was with the badly assigned paths.

Here is a modified version of the app.py:

import os
from flask import Flask, render_template, request, redirect, url_for
from werkzeug.utils import secure_filename
import MySQLdb
from flask_dropzone import Dropzone

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

app = Flask(__name__)

dropzone = Dropzone(app)

# Declared more specific upload path here
app.config['UPLOADED_PATH'] = os.getcwd() + '/uploads'

db = MySQLdb.connect(host="localhost",
                     user="root",
                     passwd="myPass",
                     db="myDb")

@app.route('/', methods=['GET', 'POST'])

# Removed home() and index() functions below

***def home():
    cur = db.cursor()
    cur.execute('SELECT * FROM users')
    users = cur.fetchall()
    for row in users:
       return render_template('home.html', users=users)
    db.close()
def index():
    return render_template('layout.html')***

#Adjusted this function with the correct template and path
def upload_file():
    if request.method == 'POST':
        for f in request.files.getlist('file'):
            f.save(os.path.join(app.config['UPLOADED_PATH'], f.filename))
    return render_template('layout.html')

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

And a minor, but important change in the home.html. Change the value of action_view to the function declared in app.py:

{{ dropzone.create(action_view='upload_file') }}
escplat12
  • 2,191
  • 4
  • 22
  • 34
  • 1
    It would be good for future searchers if you highlight changes that you've made and describe your solution. But anyway good job!:) – vishes_shell Feb 25 '18 at 12:38
  • 1
    Yes, will do it. Basically most of the issues concerning this are happening because of badly assigned paths. But that's just a generalization. – escplat12 Feb 25 '18 at 12:42