Ex51 additional apps

Hello,

I am working on making an additional app. The general idea is a webpage where someone can import their name, address, and upload an image. It will do some additional things, but right now I am running into an issue where when I run the app and access via localhost:5000 it doesn’t pull the css styling. When I open the html outside of the app, everything renders correctly. This leads me to believe that this makes it not an issue with the html or css file and more likely something having to do with the .py file, but I am not sure.

 from flask import Flask, flash, request, redirect, url_for, render_template
from pathlib import Path
from werkzeug.utils import secure_filename
import os, sys, datetime

UPLOAD_FOLDER = '/Users/access/lpthw/projects/webapp2/webapp2/uploads'
ALLOWED_EXTENSIONS = set(['jpg', 'jpeg', 'png'])

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

dir_of_interest = '/Users/access/lpthw/projects/webapp2/webapp2/modules'
modules = {}

sys.path.append(dir_of_interest)
for module in os.listdir(dir_of_interest):
    if '.py' in module and '.pyc' not in module:
        current = module.replace('.py', '')
        modules[current] = __import__(current)
    #to access module use - modules["modulename"]."def"

#run the allowed filename that checks against the allowed extensions
def allowed_file(filename):
    return '.' in filename and \
        filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS


@app.route("/collect", methods=['GET', 'POST'])
def cif_verify():
    if request.method == 'POST':
        #if the verification page is not correct then it needs to lead
        #back to the main page
        firstname =  request.form['firstname']
        lastname = request.form['lastname']
        address = request.form['address']
        file = request.files['file']
        if 'file' not in request.files:
            flash('No file part')
            return render_template("verify_page.html")
        if file.filename == '':
            flash('No selected file')
            return render_template("verify_page.html")
        if file and allowed_file(file.filename):

            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            modules['file_writing'].rename_time(app.config['UPLOAD_FOLDER'],
                                                filename, lastname)
            report = modules['file_writing'].file_create(firstname, lastname,
                                                UPLOAD_FOLDER)
            modules['file_writing'].collected_data(firstname, lastname,
                                                   address, report)
            #the verify page will have to point to a different html doc
            return render_template("verify_page.html")

        else:
            return render_template("input_page.html")

    return render_template("input_page.html")

if __name__ == "__main__":
    app.run()

The HTML file looks like the below:

<!DOCTYPE html>
<html>
<head>
<title>CIF Verification</title>
<link rel="stylesheet" type="text/css" href="/Users/access/lpthw/projects/webapp2/webapp2/templates/sheet_1.css">
</head>
<body>

  <header>
    <h1>Personal Information Collection</h1>
    <p>Please complete all fields</p>
  </header>
<form action="/collect" method="POST" enctype="multipart/form-data">
  <container>
    <article style="width: 50%">
        <h3>First Name:</h3>
        <input type="text" name="firstname">
    </article>

    <article style="width: 50%">
        <h3>Last Name:</h3>
        <input type="text" name="lastname">
    </article>
  </container>
  <container>
    <article style="width: 100%">
        <h3>Address:</h3>
        <textarea rows="3" cols="60" required spellcheck="true" name="address">
        </textarea>
    </article>
  </container>
  <container>
    <article style="width:100%">
      <h3>Copy of Identification:</h3>
      <p>Please only include jpg, jpeg, or png file types!</p>
      <input type="file" name="file" accept="image/*">
    </article>
  </container>
  <footer>
    <h3>Click below when completed</h3>
    <input type="submit" value="CONFIRM">
  </footer>
</form>
</body>
</html>

Are you running your local Host on a Windows machine?

No, I am running this on a Mac.

I have done a few different exercises to try and remediate the issue. I brought the css styling back into the .py file and it seems to render correctly with the exception that it does not pull the background image and lease the app with a white back ground.

I also scrubbed the css file for any html references but didn’t see any as I know that could cause an error.

It’s because you have this:

/Users/access/lpthw/projects/webapp2/webapp2/templates/sheet_1.css

For the location of the CSS, but that’s a file on your local computer, not a file on the web server. On the webserver you most likely have to place this in a static files directory and then reference it like this:

/static/sheet_1.css

Read this for more:

https://flask.palletsprojects.com/en/1.1.x/tutorial/static/