‫Narratore: Nella prima parte di
‫questa sezione impareremo tutto sul caricamento di immagini
‫con il pacchetto Multer e in questo particolare video inizieremo
‫a implementare il caricamento di immagini per le foto degli utenti.
‫Ma prima di iniziare, facciamo un po' di pulizia
‫veloce qui e liberiamoci di questo output costante dei
‫cookie che abbiamo qui.
‫Quindi è da qualche parte quaggiù e quindi è molto meglio.
‫Ora lavoreremo per caricare le foto
‫degli utenti e apriamo qui i percorsi degli utenti, ok.
‫Quindi, Multer è un middleware molto popolare per
‫gestire dati di moduli multiparte, che è un modulo nella codifica
‫utilizzato per caricare file da un modulo.
‫Quindi ricorda come nell'ultima sezione abbiamo
‫utilizzato un modulo codificato URL per aggiornare i dati dell'utente e
‫per questo abbiamo dovuto includere anche un middleware speciale.
‫E quindi Multer è fondamentalmente
‫un middleware per dati di moduli multiparte.
‫E ora ecco cosa faremo.
‫Consentiremo all'utente di caricare una foto sul
‫percorso Aggiornami e quindi, invece di
‫essere in grado di aggiornare e-mail e foto, gli
‫utenti saranno anche in grado di caricare le proprie foto utente.
‫Quindi, ancora una volta, iniziamo installando il
‫pacchetto di cui abbiamo bisogno e in realtà
‫creiamo una nuova finestra di terminale qui e quindi NPM installi Multer.
‫Va bene e qui vediamo che siamo su Multer 1. 4. 1.
‫E così di nuovo in caso di problemi
‫con questo pacchetto, assicurati di installare
‫la stessa versione che sto usando qui.
‫Va bene.
‫Quindi, includiamolo qui.
‫Quindi Multer, richiedi, Multer.
‫Quindi, facile e ora dobbiamo configurare un cosiddetto
‫caricamento Multer e quindi usarlo.
‫E facciamolo qui all'inizio e
‫chiamiamolo Upload e chiamiamo la funzione Multer che abbiamo appena incluso
‫prima e poi passiamo un oggetto
‫per alcune opzioni.
‫E per ora l'unica opzione
‫che specificheremo è
‫la destinazione e la imposterò su Public/image/users, va bene.
‫E quindi questa è esattamente la
‫cartella in cui vogliamo salvare tutte
‫le immagini che vengono caricate.
‫Quindi ecco qui, Pubblico, Immagine e Utenti, come tutte le immagini
‫per tutti gli utenti
‫che abbiamo già nel nostro database.
‫Giusto e ovviamente possiamo configurarlo in un modo
‫molto più complesso e lo faremo nella
‫nostra prossima lezione, ma
‫per ora voglio davvero che tu mi presenti questo
‫pacchetto e, a proposito, avremmo potuto
‫semplicemente chiamare la funzione Multer senza alcuna opzione.
‫Quindi senza questo qui e poi l'immagine caricata sarebbe
‫semplicemente archiviata in memoria e non salvata da
‫nessuna parte sul disco, ma ovviamente a questo punto non è quello
‫che vogliamo e quindi dobbiamo almeno specificare questa opzione di destinazione.
‫E con questo il nostro file viene
‫poi realmente caricato in una directory nel nostro file system.
‫E l'ho già detto prima,
‫ma assicuriamoci di essere sulla stessa linea,
‫che ovviamente le immagini non vengono caricate
‫direttamente nel database, le carichiamo semplicemente nel
‫nostro file system e poi nel database
‫metti un collegamento fondamentalmente a quell'immagine.
‫Quindi in questo caso in ogni
‫documento utente dovremo nominare tutto il file caricato, ok.
‫Ancora una volta, non lo faremo in questo video,
‫ma lo faremo un po' più tardi.
‫Per ora facciamolo funzionare.
‫Ad ogni modo, quello che dobbiamo fare
‫ora è usare questo caricamento qui per creare davvero una
‫funzione middleware che possiamo inserire qui nel percorso Aggiornami.
‫Quindi ecco, e funziona così.
‫Quindi carica, punto singolo, ed è single perché qui vogliamo
‫solo aggiornare una singola immagine e poi qui
‫in single passiamo il nome del campo
‫che conterrà l'immagine da caricare.
‫E così sarà la foto, ok.
‫E con campo intendo il
‫campo nel modulo che caricherà l'immagine.
‫Va bene, ha senso?
‫Quindi, ancora una volta, abbiamo incluso il pacchetto
‫Multer e quindi abbiamo creato un caricamento.
‫E questo caricamento serve solo per definire un paio
‫di impostazioni in cui in questo esempio definiamo solo la destinazione,
‫quindi utilizziamo tale caricamento per creare un nuovo middleware che
‫possiamo quindi aggiungere a questo stack del percorso che
‫vogliamo utilizzare per caricare il file .
‫Quindi per questo diciamo upload dot single
‫perché abbiamo solo un singolo
‫file e poi alla fine specifichiamo il nome
‫del campo che conterrà questo file.
‫Ok, quindi questo middleware si occuperà di
‫prendere il file e sostanzialmente copiarlo nella
‫destinazione che abbiamo specificato.
‫E poi, ovviamente, chiamerà il
‫prossimo middleware nello stack che è Update Me.
‫Inoltre, questo middleware qui metterà il file
‫o almeno alcune informazioni
‫sul file nell'oggetto richiesta e
‫quindi diamo un'occhiata a questo.
‫Quindi andiamo alla funzione Aggiornami.
‫Quindi proprio qui e proprio qui
‫all'inizio diciamo console dot log, reg dot file.
‫Va bene?
‫E voglio anche dare un'occhiata al corpo.
‫Fantastico e quindi con questo ora siamo
‫effettivamente pronti per testarlo e per ora lo testeremo nel
‫postino ma ovviamente in seguito
‫aggiungeremo anche questa funzionalità al modulo, va bene.
‫Quindi andiamo dal postino qui e ad Aggiornami.
‫Quindi fondamentalmente per aggiornare l'utente corrente.
‫E l'utente che voglio aggiornare si chiama Leo,
‫quindi portiamolo qui da Compass, o in realtà penso
‫che non sia nemmeno necessario perché nel
‫nostro login abbiamo già questo tipo di indirizzo email e
‫la sua email è leo@example. com e la
‫password è sempre la stessa.
‫E quindi, ovviamente, prima dobbiamo accedere come utente e
‫quindi ora andiamo avanti e quindi aggiorniamo all'utente.
‫Quindi nel corpo abbiamo il nome e il ruolo.
‫Quindi aggiorniamoci solo, diciamo il nome qui.
‫Quindi il nome attuale è Leo Gillespie o Gillespie, non
‫so come dirlo.
‫Aggiungiamo qualcosa qui nel mezzo, ok.
‫E ora finalmente specifichiamo la proprietà della foto, o in
‫realtà non dovremmo farlo in questo modo, ma invece
‫dovremmo andare qui per formare i dati, ok, perché questo è il modo in
‫cui possiamo inviare dati
‫di moduli in più parti, va bene.
‫Quindi, copiamo solo il nome qui ed è Nome.
‫Va bene, quindi qui la chiave è Nome e
‫poi il valore è questo.
‫Successivamente, infine, specifichiamo il campo della foto e quindi
‫qui possiamo effettivamente specificare ciò che vogliamo.
‫E così invece del testo, che è
‫l'impostazione predefinita, possiamo specificare il file e quindi qui possiamo selezionare il
‫file che vogliamo caricare.
‫Quindi quel file, quell'immagine, è di nuovo qui nei nostri dati def, poi
‫nell'immagine e poi qui l'immagine di Leo.
‫Ed ecco perché mostra questo utente.
‫Ok, quindi fai clic su Apri e ora penso che
‫siamo pronti per inviare la richiesta.
‫Va bene, abbiamo avuto successo e ovviamente, come ho detto prima, la
‫foto ovviamente non si è aggiornata qui nell'output del database
‫perché è per la prossima lezione.
‫Per ora vogliamo solo caricare davvero questa immagine in
‫quella cartella che abbiamo specificato.
‫Bene, ora diamo anche un'occhiata qui al nostro output e quindi
‫qui abbiamo request dot file, che è questo, e quindi otteniamo tutti
‫i tipi di informazioni su di esso.
‫Quindi il nome originale, è la destinazione che abbiamo specificato, il nuovo
‫nome del file qui e anche la dimensione.
‫Ok, questo è request dot file e poi ricorda che
‫abbiamo anche registrato il corpo.
‫E così il corpo ora è solo il nome, d'accordo.
‫Quindi la nostra analisi del corpo non è realmente in grado di
‫gestire i file ed è per questo che
‫il file non viene visualizzato affatto nel
‫corpo e, naturalmente, questo è l'intero motivo per cui abbiamo effettivamente bisogno del pacchetto Multer.
‫Comunque, ora diamo un'occhiata alla nostra cartella e quindi qui
‫abbiamo l'immagine, gli utenti, e poi da qualche parte qui dovrebbe esserci l'immagine
‫che abbiamo appena caricato ma non riesco
‫davvero a vederla qui.
‫Aggiorniamoci, ah ed infatti eccolo qua.
‫Quindi se facciamo clic su di esso ora non
‫possiamo davvero vederlo perché come
‫puoi vedere qui non ha nemmeno un'estensione, ok.
‫Ed è per questo che non possiamo davvero aprirlo a questo punto.
‫Quindi il file è davvero apparso qui nella nostra cartella
‫e quindi abbiamo il caricamento effettivamente funzionante.
‫Beh, almeno un po', ma non
‫siamo davvero dove vogliamo, giusto.
‫Quindi vogliamo dargli un nome di file migliore
‫e vogliamo anche riorganizzare un
‫po' questo codice che abbiamo a questo punto.
‫E quindi facciamolo nel prossimo video.