View source for File uploads on a web page

There are different ways how you can do file uploads actually. It's something you totally can have a personal preference for ;) 

At XPUB i have seen:

* '''Michael''' using a CGI folder + a python script, which he has experience with to set up on a server
* '''Manetta''' using PHP and struggle with nginx configurations
* '''Kamo''' making dozens of DIWO Flask applications with upload functionalities

As we will work with Flask during prototyping at some point, our suggestion would be to look into the Flask option, so we can continue with it in class. But it's up to you of course :--)

Documentation for the file upload forms:

* '''Flask''': https://flask.palletsprojects.com/en/stable/patterns/fileuploads/
* '''PHP''': https://www.w3schools.com/php/php_file_upload.asp
* '''CGI''': (i could not find a tutorial, but maybe @michael has some tips if you want to try this route?)

==A bit of a background story!==

'''The beauty (Flask) and the beast (PHP)'''<br>
'''aka "Uploading Files is my Passion <3"'''

When it comes to writing (small) web applications, kamo and i both enjoy working with Flask. We explicitly phrase it in this way, because it feels important to phrase it as a personal preference, an opinion that we grew into over time, and might change over time again!

Flask is part of the modern world of "server-side web application frameworks", is written in Python, and exist as a project since 2010. Flask is developed by the Pallets organization, which is a team of 4 people apparently + community around it, and is funded by the Python Software Foundation. Bigger current applications that run on Flask include Pinterest and LinkedIn (yep). 

Flask is one of the many other frameworks that are out there, such as Django (written in Python, used by Instagram) and Rails (written in Ruby, used by AirBnB/Archives of Our Own/Twitch/Github).

You use these server-side frameworks to create dynamics environments on the web that control dynamic interaction between a web page and a server.

When the web emerged in the early 1990s, only static pages could visited. But then, in 1993, the "Common Gateway Interface (CGI)" was added as a new feature that allowed (so-called) "dynamic interactions" such as file uploads and database queries. Quickly after, in 1995, the (so-called) "fully integrated server/language development environment" PHP was introduced. It triggered the making of cute guestbooks, small photo gallery software projects, but also account based environments that more and more would ask for your (so-called) user input that grew into social media platforms, web shops, online work environments, etc etc etc.

==Flask vs PHP==

Anyways! 

While preparing this file uploads example, we ended up in a heated debate about what to prepare for you between Flask and PHP (and for a tiny tiny moment also CGI). Let's do Flask, no let's do PHP, no Flask, nooo PHP. And we ended up with Flask.

Because we think that navigating these options yourself if the ultimate goal of prototyping, here a summary of the pro's and con's:

'''Flask'''

* <code>+</code> web application framework we want to introduce in XPUB1 prototyping anyway
* <code>+</code> comes with a lot of possibilities
* <code>-</code> each flask application requires configuration on multiple layers: a flask application + nginx configuration + background process, which makes it a layered steap learning process
* <code>-</code> using Flask require access to a full operating system, and thus requires students to have their own server if they want to experiment with it outside of sergio

'''PHP'''

* <code>+</code> PHP is widely supported by web hosting providers and thus does not require access to a full operating system (like Flask does)
* <code>+</code> duplicating the upload example is super easy, you just copy paste the PHP script and HTML example prepared by us (or found online)
* <code>+</code> PHP is integrated within HTML files, it runs in the same environment
* <code>-</code> configuring PHP on sergio in advance hides the difficult layers to students
* <code>-</code> we as tutors have limited experience with PHP and thus cannot easily adapt and customize the upload script

==Flask example==

This example uses the following files and folder:

 myuploadform
 ├── main.py
 ├── templates/
 │   ├── upload.html
 │   └── success.html
 └── static/
     └── uploads/

# initiate a new uv folder: <code>uv init myuploadform</code>
# move into this folder: <code>cd myuploadform</code> and create a venv: <code>uv venv</code>
# install flask: <code>uv add flask</code>
# save the code from below as <code>main.py</code> and <code>upload.html</code>, additionally, it’s nice to have a <code>success.html</code> page that signals that the upload was successful, showing the image that was uploaded (assuming it was an image, it will not work if it is not).
# make a <code>uploads</code> folder, inside a <code>static</code> folder, ''if'' what was uploaded before can be accessed from the outside: <code>mkdir uploads</code>
# run the flask application by running the Python script: <code>uv run main.py</code>
# see the flask application in your browser: http://localhost:5000

===<code>main.py</code>===

<syntaxhighlight lang=python>
from flask import *

app = Flask(__name__)

@app.route('/')
def main():
	return render_template('index.html')

@app.route('/success', methods = ['POST'])
def success():
	if request.method == 'POST':
		f = request.files['file']
		f.save('static/uploads/' + f.filename)
		return render_template('success.html', name = f.filename)

if __name__ == '__main__':
	app.run(debug=True)
</syntaxhighlight>

===<code>upload.html</code>===

<syntaxhighlight lang=html>
<!DOCTYPE html>
<html>
<body>

<form method=post action=/success enctype=multipart/form-data>
	<input type=file name=file>
	<input type=submit value=Upload>
</form>

</body>
</html>
</syntaxhighlight>

===<code>success.html</code>===

<syntaxhighlight lang=html>
<!DOCTYPE html>
<html>
	<head>
		<title>Success! Image uploaded.</title>
	</head>
	<body>
		<p>File uploaded successfully</p>
		<p>File Name: {{name}}</p>
		<figure>
			<img src='{{ url_for('static', filename=name) }}' alt='Displaying the image that was just uploaded'>
		</figure>
	</body>
</html>
</syntaxhighlight>

Next steps:

* configure Nginx
* run this Flask application in the background to have it continuously running

For documentation how to do these steps, see: [[Flask]]

[[Category:Workbooks]]
[[Category:Raspberry Pi]]
[[Category:flask]]