File uploads on a web page - Revision history

SHRED at 12:00, 7 July 2026

2026-07-07T12:00:03Z

← Older revision		Revision as of 14:00, 7 July 2026
Line 137:		Line 137:

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

Manetta: /* main.py */

2026-04-07T13:22:41Z

main.py

← Older revision		Revision as of 15:22, 7 April 2026
Line 76:		Line 76:

	<syntaxhighlight lang=python>		<syntaxhighlight lang=python>
	~~from fileinput import filename~~
	from flask import *		from flask import *

Tommi: Fix and update script

2026-03-04T17:12:27Z

Fix and update script

← Older revision		Revision as of 19:12, 4 March 2026
Line 59:		Line 59:
	myuploadform		myuploadform
	├── main.py		├── main.py
	├── templates		├── templates/
	│ └── ~~upload~~.html		│ ├── upload.html
	└── uploads		│ └── success.html
			└── static/
			└── uploads/

	# initiate a new uv folder: <code>uv init myuploadform</code>		# 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>		# move into this folder: <code>cd myuploadform</code> and create a venv: <code>uv venv</code>
	# install flask: <code>uv add flask</code>		# install flask: <code>uv add flask</code>
	# save the code from below as <code>main.py</code> and <code>upload.html</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: <code>mkdir uploads</code>		# 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>		# run the flask application by running the Python script: <code>uv run main.py</code>
	# see the flask application in your browser: http://localhost:~~9000~~		# see the flask application in your browser: http://localhost:5000

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

	<syntaxhighlight lang="python">		<syntaxhighlight lang=python>
	from ~~flask~~ import ~~Flask, request, render_template~~		from fileinput import filename
	from ~~prefix~~ import ~~PrefixMiddleware~~		from flask import *

	app = Flask(__name__)		app = Flask(__name__)
	~~app.wsgi_app = PrefixMiddleware(app.wsgi_app, '/sergio/flask-upload/')~~
	~~upload_folder = 'uploads/'~~

	@app.route('/'~~, methods=['GET', 'POST']~~)		@app.route('/')
	def ~~home~~():		def main():
	~~if request.method == 'POST':~~		return render_template('index.html')
	~~file = request.files['file']~~
	~~if file.filename != '':~~
	~~file.save(upload_folder + file.filename)~~
	~~return redirect(url_for('home'))~~
	return render_template('~~upload~~.html')

	if __name__ == "__main__":		@app.route('/success', methods = ['POST'])
	app.run(~~port=9000,~~ debug=True)		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>		</syntaxhighlight>

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

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

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

	</body>		</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>		</html>
	</syntaxhighlight>		</syntaxhighlight>
Line 112:		Line 132:
	Next steps:		Next steps:

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

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

	[[Category:Workbooks]]		[[Category:Workbooks]]

Manetta: /* Flask example */

2026-02-24T13:35:20Z

Flask example

← Older revision		Revision as of 15:35, 24 February 2026
Line 110:		Line 110:
	</syntaxhighlight>		</syntaxhighlight>

	~~<syntaxhighlight lang="python">~~		Next steps:
	~~</syntaxhighlight>~~

	~~<syntaxhighlight lang="python">~~		* configure nginx
	~~</syntaxhighlight>~~		* run this flask application in the background to have it continuously running

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

	[[Category:Workbooks]]		[[Category:Workbooks]]

Manetta: /* uploads/ */

2026-02-24T13:34:07Z

uploads/

← Older revision		Revision as of 15:34, 24 February 2026
Line 115:		Line 115:
	<syntaxhighlight lang="python">		<syntaxhighlight lang="python">
	</syntaxhighlight>		</syntaxhighlight>

	~~===uploads/===~~



	[[Category:Workbooks]]		[[Category:Workbooks]]

Manetta: /* Flask example */

2026-02-24T13:33:52Z

Flask example

← Older revision		Revision as of 15:33, 24 February 2026
Line 54:		Line 54:

	==Flask example==		==Flask example==

			This example uses the following files and folder:

			myuploadform
			├── main.py
			├── templates
			│ └── upload.html
			└── 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>
			# make a <code>uploads</code> folder: <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:9000

			===main.py===

			<syntaxhighlight lang="python">
			from flask import Flask, request, render_template
			from prefix import PrefixMiddleware

			app = Flask(__name__)
			app.wsgi_app = PrefixMiddleware(app.wsgi_app, '/sergio/flask-upload/')
			upload_folder = 'uploads/'

			@app.route('/', methods=['GET', 'POST'])
			def home():
			if request.method == 'POST':
			file = request.files['file']
			if file.filename != '':
			file.save(upload_folder + file.filename)
			return redirect(url_for('home'))
			return render_template('upload.html')

			if __name__ == "__main__":
			app.run(port=9000, debug=True)
			</syntaxhighlight>

			===upload.html===

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

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

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

			<syntaxhighlight lang="python">
			</syntaxhighlight>

			<syntaxhighlight lang="python">
			</syntaxhighlight>

			===uploads/===



	[[Category:Workbooks]]		[[Category:Workbooks]]

Manetta at 16:57, 23 February 2026

2026-02-23T16:57:51Z

← Older revision		Revision as of 18:57, 23 February 2026
Line 15:		Line 15:
	* '''CGI''': (i could not find a tutorial, but maybe @michael has some tips if you want to try this route?)		* '''CGI''': (i could not find a tutorial, but maybe @michael has some tips if you want to try this route?)

	==~~Context~~==		==A bit of a background story!==

	'''The beauty (Flask) and the beast (PHP)'''<br>		'''The beauty (Flask) and the beast (PHP)'''<br>
Line 29:		Line 29:

	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.		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!		Anyways!

Manetta at 16:56, 23 February 2026

2026-02-23T16:56:39Z

← Older revision		Revision as of 18:56, 23 February 2026
Line 50:		Line 50:
	* <code>-</code> configuring PHP on sergio in advance hides the difficult layers to students		* <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		* <code>-</code> we as tutors have limited experience with PHP and thus cannot easily adapt and customize the upload script

			==Flask example==



	[[Category:Workbooks]]		[[Category:Workbooks]]

Manetta at 16:36, 23 February 2026

2026-02-23T16:36:10Z

← Older revision		Revision as of 18:36, 23 February 2026
Line 50:		Line 50:
	* <code>-</code> configuring PHP on sergio in advance hides the difficult layers to students		* <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		* <code>-</code> we as tutors have limited experience with PHP and thus cannot easily adapt and customize the upload script

			[[Category:Workbooks]]

Manetta: Created page with "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 sugge..."

2026-02-23T16:29:17Z

Created page with "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 sugge..."

New 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?)

==Context==

'''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.

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