app, html: implemented flask wtf for forms

requirements.txt

@@ -2,7 +2,7 @@
 # Flask
 # ----------------------
 flask
-
+Flask-WTF
 
 # ----------------------
 # Production Server

routes/site.py

@@ -1,26 +1,40 @@
 import os
 
-from flask import render_template, request, redirect, url_for, abort
+from flask import render_template, redirect, url_for, abort
+from flask_wtf import Form
+from flask_wtf.file import FileField, FileAllowed, FileRequired
 from werkzeug import secure_filename
 
+from wtforms.fields.html5 import EmailField
+from wtforms.validators import email, DataRequired
+
 from app import app
 
-ALLOWED_EXTS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])
 
-def allowed_file(filename):
-    return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTS
+class MyForm(Form):
+    email = EmailField('Email', validators=[ DataRequired(), email() ])
+    mp3 = FileField('MP3', validators=[
+            FileRequired(), FileAllowed(['mp3'], 'Please upload MP3 only!')
+        ])
+    pic = FileField('Picture', validators=[
+            FileRequired(), FileAllowed(['jpg', 'png', 'jpeg'], 'Please upload images only!')
+        ]
+    )
+
 
 @app.route('/',  methods=['GET', 'POST'])
 def home():
     """Render website's home page."""
-    if request.method == 'POST':
-        print request.files
-        mp3File = request.files.get('mp3File', None)
-        if mp3File and allowed_file(mp3File.filename):
-            filename = secure_filename(mp3File.filename)
-            mp3File.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
-            return redirect(url_for('jobs', job_id=1))
-    return render_template('home.html')
+    form = MyForm()
+
+    if form.validate_on_submit():
+        mp3filename = secure_filename(form.mp3.data.filename)
+        form.mp3.data.save(os.path.join(app.config['UPLOAD_FOLDER'] + "/" + mp3filename))
+        picfilename = secure_filename(form.pic.data.filename)
+        form.pic.data.save(os.path.join(app.config['UPLOAD_FOLDER'] + "/" + picfilename))
+        return redirect(url_for('jobs', job_id=1))
+
+    return render_template('home.html', form=form)
 
 @app.route('/jobs/<job_id>')
 def jobs(job_id):

templates/base.html

@@ -11,6 +11,9 @@
     <link href="{{ url_for('static', filename='css/bootstrap-theme.min.css') }}" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/narrow.css') }}" rel="stylesheet">
 
+    <!-- Favicon -->
+    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>

templates/form.html

@@ -0,0 +1,35 @@
+{% macro forminput(field, helpblock='', placeholder='', class='') -%}
+  <div class="form-group {% if field.errors|length > 0 %}has-error{% endif %}">
+    <label for="mp3" class="col-sm-2 control-label">{{ field.label }}</label>
+    <div class="col-sm-10">
+      {% if placeholder %}
+        {{ field(placeholder=placeholder, class=class) }}
+      {% else %}
+        {{ field(class=class) }}
+      {% endif %}
+      {% if field.errors %}
+        {% for error in field.errors %}
+          <span class="help-block">{{ error }}</span><br>
+        {% endfor %}
+      {% endif %}
+      {% if helpblock %}
+      <span class="help-block">{{ helpblock }}</span>
+      {% endif %}
+    </div>
+  </div>
+{%- endmacro %}
+
+<form class="form-horizontal" role="form" enctype="multipart/form-data", method="post", action="{{ url_for('home') }}">
+
+  {{ form.hidden_tag() }}
+  {{ forminput(form.email, helpblock='We will send you download link here, nothing more.', placeholder='Please enter your email', class='form-control') }}
+  {{ forminput(form.mp3) }}
+  {{ forminput(form.pic) }}
+
+  <div class="form-group">
+    <span class="col-sm-2">&nbsp</span>
+    <div class="col-sm-10">
+      <button type="submit" class="btn btn-default">Submit</button>
+    </div>
+  </div>
+</form>

templates/home.html

@@ -16,36 +16,7 @@
 
 <div class="row marketing">
   <div class="col-lg-12">
-    <form class="form-horizontal" role="form" enctype="multipart/form-data", method="post", action="{{ url_for('home') }}">
-      <div class="form-group">
-        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
-        <div class="col-sm-10">
-          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
-          <span class="help-block">We will send you download link here, nothing more.</span>
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="mp3File" class="col-sm-2 control-label">MP3</label>
-        <div class="col-sm-10">
-            <input type="file" id="mp3File" name="mp3File">
-        </div>
-      </div>
-
-      <div class="form-group">
-        <label for="picFile" class="col-sm-2 control-label">Picture</label>
-        <div class="col-sm-10">
-            <input type="file" id="picFile" name="picFile">
-        </div>
-      </div>
-
-      <div class="form-group">
-        <span class="col-sm-2">&nbsp</span>
-        <div class="col-sm-10">
-          <button type="submit" class="btn btn-default">Submit</button>
-        </div>
-      </div>
-    </form>
+    {% include 'form.html' %}
   </div>
 </div>