Caricare e scaricare file nel browser web è un'attività comune in praticamente qualsiasi applicazione o servizio web. Questo articolo mostra come farlo con pochissima codifica, in meno di 100 righe di codice. Il database utilizzato è PostgreSQL e il server web è Nginx.
Utilizzerai Gliimly come server applicativo e linguaggio di programmazione. Verrà eseguito dietro il server web per prestazioni e sicurezza, nonché per abilitare funzionalità web più ricche. In questo modo l'utente finale non può parlare direttamente con il server applicativo perché tutte queste richieste passano attraverso il server web, mentre la tua applicazione back-end può parlare direttamente con il server applicativo per prestazioni migliori.
Supponendo che l'utente Linux attualmente connesso sia il proprietario dell'applicazione, crea una directory del codice sorgente e crea anche un'applicazione Gliimly denominata "file-manager":
mkdir filemgr cd filemgr gg -k file-manager
Successivamente, crea il database PostgreSQL denominato "db_file_manager", di proprietà dell'utente attualmente connesso (ad esempio, configurazione senza password):
echo "create user $(whoami); create database db_file_manager with owner=$(whoami); grant all on database db_file_manager to $(whoami); \q" | sudo -u postgres psql
Crea un file di configurazione del database utilizzato da Gliimly che descrive il database (è un file "db"):
echo "user=$(whoami) dbname=db_file_manager" > db
Crea una tabella SQL che conterrà i file attualmente archiviati sul server:
echo "create table if not exists files (fileName varchar(100), localPath varchar(300), extension varchar(10), description varchar(200), fileSize int, fileID bigserial primary key);" | psql -d db_file_manager
Infine, crea i file Gliimly sorgente. Per prima cosa crea il file "start.gliim" e copia e incolla:
begin-handler /start public @<h2>File Manager</h2> @To manage the uploaded files, <a href="<<p-path "/list">>">click here.</a><br/> @<br/> @<form action="<<p-path "/upload">>" method="POST" enctype="multipart/form-data"> @ <label for="file_description">File description:</label><br> @ <textarea name="filedesc" rows="3" columns="50"></textarea><br/> @ <br/> @ <label for="filename">File:</label> @ <input type="file" name="file" value=""><br><br> @ <input type="submit" value="Submit"> @</form> end-handler
Crea il file "list.gliim" e copia e incolla:
begin-handler /list public @<h2>List of files</h2> @To add a file, <a href="<<p-path "/start">>">click here</a><br/><br/> @<table border="1"> @<tr> @ <td>File</td><td>Description</td><td>Size</td><td>Show</td><td>Delete</td> @</tr> run-query @db= \ "select fileName, description, fileSize, fileID from files order by fileSize desc" \ output file_name, description noencode, file_size, file_ID @<tr> @ <td><<p-web file_name>></td><td><<p-web description>><td><<p-web file_size>></td> @ <td><a href="<<p-path "/download">>/file_id=<<p-url file_ID>>">Show</a></td> @ <td><a href="<<p-path "/delete">>/action=confirm/file_id=<<p-url file_ID>>">Delete</a></td> @</tr> end-query @</table> end-handler
Crea il file "upload.gliim" e copia e incolla:
begin-handler /upload public get-param filedesc // file description from the upload form get-param file_filename // file name get-param file_location // the path to uploaded file get-param file_size // size in bytes get-param file_ext // the file extension @<h2>Uploading file</h2> run-query @db= \ "insert into files (fileName, localPath, extension, description, fileSize) \ values ('%s', '%s', '%s', '%s', '%s')" \ input file_filename, file_location, file_ext, filedesc, file_size end-query @File <<p-web file_filename>> of size <<p-web file_size>> \ is stored on server at <<p-web file_location>>. \ File description is <<p-web filedesc>>.<hr/> end-handler
Crea il file "download.gliim" e copia e incolla:
begin-handler /download public get-param file_id run-query @db= \ "select localPath,extension from files where fileID='%s'" \ input file_id \ output local_path, ext \ row-count num_files if-true ext equal ".jpg" send-file local_path headers content-type "image/jpg" else-if ext equal ".pdf" send-file local_path headers content-type "application/pdf" else-if send-file local_path headers content-type "application/octet-stream" download end-if end-query if-true num_files not-equal 1 @Cannot find this file!<hr/> exit-handler end-if end-handler
Crea il file "delete.gliim" e copia e incolla:
begin-handler /delete public @<h2>Delete a file</h2> get-param action get-param file_id run-query @db="select fileName, localPath, description from files where fileID='%s'" output file_name, local_path, desc input file_id if-true action equal "confirm" // get file information to confirm what will be deleted @Are you sure you want to delete file <<p-web file_name>> (<<p-web desc>>)? Click <a href="<<p-path "/delete">>?action=delete&file_id=<<p-url file_id>>">Delete</a> or click the browser's Back button to go back.<br/> else-if action equal "delete" // actual delete file, once confirmed begin-transaction @db run-query @db= "delete from files where fileID='%s'" input file_id error err no-loop if-true err not-equal "0" @Could not delete the file (error <<p-web err>>) rollback-transaction @db else-if delete-file local_path status st if-true st equal GG_OKAY commit-transaction @db @File deleted. Go back to <a href="<<p-path "/start">>">start page</a> else-if rollback-transaction @db @File could not be deleted, error <<p-num st>> end-if end-if else-if @Unrecognized action <<p-web action>> end-if end-query end-handler
Effettuare la richiesta:
gg -q --db=postgres:db
Esegui il tuo server applicativo:
mgrg file-manager
Un server web si trova di fronte al server applicativo Gliimly, quindi deve essere configurato. Questo esempio è per Ubuntu, quindi modifica il file di configurazione Nginx lì:
sudo vi /etc/nginx/sites-enabled/default
Aggiungere questo nella sezione "server {}" ("client_max_body_size" consente di caricare immagini di dimensioni tipiche):
location /file-manager/ { include /etc/nginx/fastcgi_params; fastcgi_pass unix:///var/lib/gg/file-manager/sock/sock; } client_max_body_size 100M;
Riavvia Nginx:
sudo systemctl restart nginx
Vai al tuo browser web e digita:
http://127.0.0.1/file-manager/start
Ecco come appare il risultato finale. Ovviamente, abbiamo usato solo HTML essenziale, ma non è questo il punto. Puoi usare qualsiasi tipo di tecnologia front-end, il punto è dimostrare Gliimly come server back-end per applicazioni/servizi web.
Ecco la schermata iniziale, con il modulo per caricare un file e un collegamento al file più grande:
Elenco dei file:
Chiedere di eliminare un file:
Conferma dell'eliminazione: