Research new Technique

To work with 2-server configuration it will be necessary to rework this blog to support POSTing images to Flask.

Uploading content using Flask (not JavaScript)

A common feature in web applications is to let users upload files to the server. The HTTP protocol documents the mechanism for a client to upload a file, and the Flask framework fully supports it.

Suggestion is to READ the CODE, lots of comments and start implementing.
See app_content.py and the hacks in the file. Note the import secure_filename from werkzeug.utils.

A Basic File Upload Form

See content.html.
From a high-level perspective, a client uploading a file is treated the same as any other form data submission. In other words, you have to define an HTML form with a file field in it. The HTML <input type="file"> defines a file-select field and a "Browse" button for file uploads.

An HTTP multipart request is an HTTP request that HTTP clients construct to send files and data over to an HTTP Server. It is commonly used by browsers and HTTP clients to upload files to the server. This is server side implementation and needs to be adapted for JavaScript.

<form id="upload" enctype="multipart/form-data" action = "url_for('content.upload')" method = "POST">

The enctype attribute defines how the browser should format the data before it is submitted to the server.
multipart/form-data: This format is required when at least one of the fields in the form is a file field.

Refer to the files in upload.py folder and start implementing uploads in your sponsor project. 

app_upload = Blueprint('upload', __name__,
                       url_prefix='/upload',
                       template_folder='templates/uploady/',
                       static_folder='static',
                       static_url_path='static')

''' 
Objective of the ideas started with this page is to manage uploading content to a Web Site
Code provided allows user to upload Image into static/uploads folder 
'''
# ... An Image is often called a picture, it works with <image ...> tage in HTML
# ... Supported types jpeg, gif, png, apng, svg, bmp, bmp ico, png ico.

'''
Hack #1 add additional content
'''
# Additional Content
# ... Video, Comma Seperated Values (CSV), Code File (py,java)
# ... One or more uploading capabilities can be provided to support needs of your project

'''
Hack #2 add additional description and capabilities
'''
# Establish a database record that keeps track of content and establishes meta data
# ... user who uploaded
# ... description
# Combine Note and Image upload into single activie
# ... description of Note is Markdown text
# ... try using uploaded image in notes
# ... think about easier markdown UI for user of Note and Images

'''
Hack #3 establish a strategy to manage data being stored through Amazon S3 bucket
'''
# AWS S3 Object Container is a system used to manage content
# ... S3 Bucket Concept: https://www.youtube.com/watch?v=-VVC7uTNJX8


# A global variable is used to provide feedback for session to users, but is considered short term solution
files_uploaded = []


def upload_save(file_object):
    # set path to location defined in __init__.py
    path = app.config['UPLOAD_FOLDER']
    if not os.path.exists(path):
        # Create a new directory because it does not exist
        os.makedirs(path)

    # secure_filename checks for integrity of filename, avoids hacking
    filename = secure_filename(file_object.filename)
    # os.path.join adds path for uploads
    upload_location = os.path.join(path, filename)
    # save file object to upload location
    file_object.save(upload_location)
    return filename


# Page to upload content page
@app_upload.route('/')
@login_required
def upload():
    # grab user object (uo) based on current login
    uo = user_by_id(current_user.userID)
    user = uo.read()  # extract user record (Dictionary)
    # load content page
    return render_template('upload.html', user=user, files=files_uploaded)


# Notes create/add
@app_upload.route('/upload/', methods=["POST"])
@login_required
def uploader():
    try:
        # grab file object (fo) from user input The fo variable holds the submitted file object. This is an instance
        # of class FileStorage, which Flask imports from Werkzeug.
        fo = request.files['filename']
        filename = upload_save(fo)

        # inserts location of object to feedback list
        files_uploaded.insert(0, url_for('uploads_endpoint', name=filename))
    except:
        # errors handled, but specific errors are not messaged to user
        pass
    # reload content page
    return redirect(url_for('upload.upload'))

Hacks - Mostly Research oriented

1 add additional content

Additional Content

  • Video, Comma Separated Values (CSV), Code File (py,java)
  • Add additional capabilities to support needs of your project. Think about how to use uploads for different parts of System
    • About Page with user specific uploads
    • Thumb nail for User Login
    • etc

2 add additional description and capabilities

  • Establish a database record that keeps track of content and establishes meta data versus current list implementation
    • Combine Note and Image upload into single blueprint and MVC. Most pictures have notes and vice-versa,
    • Consider adding user, you may want to filter Uploads/Notes to the logged in user, this can be done within same model.
    • Add description to Upload, or add Image to Note. Description should be Markdown.
  • Think about easier UI for user of Note and Images uploads

3 establish a strategy to manage data being stored through Amazon S3 bucket

  • AWS S3 Object Container is a system used to manage content
  • AWS would replace putting Upload on local file system, but all the database features from Hack #2 would remain.
  • S3 Bucket Concept:https://www.youtube.com/watch?v=-VVC7uTNJX8