Strumenti Utente

Strumenti Sito


Barra laterale

programmazione:python:blottle:file_upload

File upload in Bottle (Python web framwork)

Autore: Fabio Di Matteo
Ultima revisione: 24/03/2021 - 17:50

Lato server

#!/usr/bin/env python3
import  os,urllib3
from bottle import Bottle,route, run, template, static_file, request,redirect, response,get, post
 
 
app=Bottle()
 
SAVEPATH="/home/fabio/Desktop/"
PORT=3498
 
def start_server():
	run(app , host='0.0.0.0', port=PORT)
	#import bjoern
	#bjoern.run(app, "0.0.0.0", PORT)
 
@app.route('/js/<filename>')
def send_js(filename):
	return static_file(filename, root=os.path.dirname(os.path.realpath(__file__))+'/tpl/js/')
 
@app.route('/css/<filename>')
def send_css(filename):
    return static_file(filename, root=os.path.dirname(os.path.realpath(__file__))+'/tpl/css/')
 
@app.route('/img/<filename>')
def send_img(filename):
	return static_file(filename, root=os.path.dirname(os.path.realpath(__file__))+'/tpl/img/')
 
@app.route ("/")
def home():
	homepage=open(os.path.dirname(os.path.realpath(__file__))+"/tpl/uploadForm.html").read()
	yield template(homepage)
 
 
def getPublicIpRaw():
	url = "https://www.freemedialab.org/myip/rawip.php"
	http = urllib3.PoolManager()
	r = http.request('GET', url)
	return r.data
 
 
 
@app.error(404)  
def error404(error):
    return '''
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Invia a Fabio Di Matteo</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta charset="utf-8">
			<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<script src="js/jquery.min.js"></script>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<script src="js/bootstrap.bundle.min.js"></script>
		</head>
	<body>
	<div class="container" class="mt-3">
		<div class="jumbotron">
		  <h1 class="display-4">La pagina che stai cercando non esiste!</h1>
		  <p class="lead">Smettila di andare in giro per il server.</p>
		  <hr class="my-4">
		  <p>Questo è un server temporaneo. Fra poco Fabio lo spegne.</p>
		  <p class="lead">
			<a class="btn btn-primary btn-lg btn-success" href="/" role="button">Ritorna alla home</a>
		  </p>
		</div>
	</div> 
	</body>
	</html>
    '''
 
 
 
@app.route('/error')
def error():
	c='<div class="alert alert-danger" role="alert">Qualcosa è andato storto nell\' invio del file.</div>'
	yield(c)
 
@app.route('/success')
def success():
	c='<div class="alert alert-success" role="alert">I file sono stati inviati correttamente.</div>'
	yield(c)
 
 
 
@app.route('/upload',method='POST')
def upload():
	myfiles = request.files.getall('myfile')
	for myfile in myfiles:
		save_path = os.path.join(SAVEPATH, myfile.filename)
		myfile.save(save_path, overwrite=True)
 
	redirect("/success")
 
if __name__=='__main__': 
	ip=getPublicIpRaw().decode('utf-8')
	print("\nIl Tuo ip: http://%s:%s\n\n" % (ip,PORT))
 
	start_server()

Il template html

Includere nella struttura delle cartelle del progetto sia bootstrap che jquery. Seguendo lo schema delle rotte generate dallo script python.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
	<title>Invia a Fabio Di Matteo</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
 
	<script src="js/jquery.min.js"></script>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="js/bootstrap.bundle.min.js"></script>
	<script type="text/javascript">
 
         $(document).ready(function(){
            $("#myform").submit(function(e){ 
				e.preventDefault();	
 
				var formData = new FormData($(this)[0]); //per i form "multipart/form-data"
 
				$.ajax({
					url: '/upload',
					type: 'POST',
					data: formData,
					timeout:60000,
					async: true,
					cache: false,
					contentType: false,
					enctype: 'multipart/form-data',
					processData: false, //per i form "multipart/form-data"
					beforeSend: function () {
							  c='<div class="alert alert-warning" role="alert">Invio in corso...</div>'
							  $('#outputServer').html(c);
							  $('#mysubmit').attr("disabled", "disabled");
							  $('#fileprogress').show();
							},
					success: function (data) {
							  console.log('Richiesta inviata con successo.');
							  //c='<div class="alert alert-success" role="alert">File inviato correttamente.</div>';
							  $('#outputServer').html(data);
							},
					error: function(jqxhr, status, errorMessage){
								console.log('Problemi invio dati: '+ errorMessage);
								c='<div class="alert alert-danger" role="alert">Errore: '+errorMessage+'</div>';
								$('#outputServer').html(c);
 
							},
					complete: function(){
								$('#mysubmit').removeAttr("disabled");
 
							},
					xhr: function(){
							var xhr = $.ajaxSettings.xhr() ;
 
							xhr.upload.onprogress = function(evt){ 
								$('#fileprogress').html(Math.round(evt.loaded/evt.total*100)+'%'); 
								$('#fileprogress').attr('aria-valuenow', Math.round(evt.loaded/evt.total*100));
								$('#fileprogress').css('width', Math.round(evt.loaded/evt.total*100)+'%');
								} ;
 
 
 
							xhr.upload.onload = function(){ 
									$('#fileprogress').html('100% - caricamento completato.');
									$('#fileprogress').attr('aria-valuenow', '100');
									$('#fileprogress').css('width', '100%');
									//c='<div class="alert alert-success" role="alert">Operazione conclusa con successo.</div>';
									//$('#outputServer').html(c);
								 };
							return xhr ;  
							}
 
 
 
				});
 
				return false;					  
			}) ;
 
 
 
       });
 
 
</script>
 
</head>
 
<body>
 
 
<div class="container" class="mt-3">
	<div class="jumbotron" style="margin-top: 30px">
		<h1 class="display-4">Inviami un file</h1>
		<form id="myform" method='post' action='/upload' enctype='multipart/form-data' >
		  <div class="form-group">
			<label for="exampleFormControlFile1">Scegli il file da inviare a Fabio Di Matteo</label>
			<input type="file" class="form-control-file btn btn-outline-success" id="myfile" name="myfile" multiple >
		  </div>
		  <div style="text-align: right"><input id="mysubmit" type="submit"  class="btn btn-success" value="Invia file"></div>
		</form>
		<div style="margin-top: 10px;margin-bottom: 10px " id="outputServer"></div>
 
 
		<div class="progress" style="margin-top: 25px; height: 25px">
			<div id="fileprogress" class="progress-bar  progress-bar-striped bg-success" style="Display: None ;width:0%;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
		</div>
 
	</div>
 
</div> 
</body>
 
</html>

programmazione/python/blottle/file_upload.txt · Ultima modifica: 24/03/2021 - 18:03 da Fabio Di Matteo