‫Jonas: Ora configuriamo effettivamente Multer in base alle nostre esigenze.
‫In primo luogo, assegnando alle immagini un nome file migliore,
‫in secondo luogo consentendo solo il caricamento dei
‫file immagine sul nostro server.
‫E per iniziare, spostiamo effettivamente
‫tutte le cose relative
‫a Multer da questo router al controller.
‫Quindi tagliamo questo
‫qui, e lo metterò proprio qui alla
‫fine, o in realtà in cima, va bene?
‫Quindi tutto ciò che riguarda
‫Multer, lo metteremo proprio qui in alto.
‫Quindi, ovviamente, abbiamo anche bisogno di importare questo pacchetto Multer.
‫E ora abbiamo anche bisogno di creare un middleware con questo.
‫Quindi esportazioni. uploadUserPhoto sarà
‫uguale a questo.
‫Va bene, quindi abbiamo ancora una funzione
‫middleware, ma ora ha il suo nome più facile da usare, va bene?
‫E così qui, userController. carica foto, va bene?
‫Quindi sembra molto più carino,
‫e ovviamente ha
‫senso che questo codice sia nel controller.
‫E così ora questo è
‫bello e pulito, e possiamo davvero chiuderlo ora.
‫Ottimo, quindi ora andiamo avanti e configuriamo
‫il nostro caricamento Multer in base alle nostre esigenze.
‫E quindi per questo creeremo uno storage Multer
‫e un filtro Multer, ok?
‫E poi useremo quella memoria e il
‫filtro per creare il caricamento da lì, va bene?
‫Quindi facciamolo qui.
‫Quindi un multerStorage, usiamo multer. diskStorage.
‫Va bene, e potremmo anche
‫scegliere di archiviare il file in memoria come buffer,
‫in modo da poterlo utilizzare in seguito da altri processi.
‫E in realtà lo faremo un
‫po' più tardi, ma per ora ovviamente vogliamo
‫memorizzare il file così com'è nel nostro file system, ok?
‫Quindi per l'archiviazione su disco prenderemo un paio di opzioni e
‫la prima è la destinazione.
‫Ma ora non possiamo semplicemente impostarlo su questo percorso come
‫abbiamo fatto prima.
‫No, questo è un po' più complesso, va bene?
‫E quindi davvero questa destinazione qui è una funzione di
‫callback che funziona così.
‫Quindi questa funzione di callback ha accesso alla richiesta corrente, al
‫file attualmente caricato e anche a
‫una funzione di callback.
‫E questa funzione di callback
‫è un po' come la prossima funzione in Express.
‫Ma qui lo chiamo cb, che sta per callback,
‫quindi è un nome diverso
‫da next, perché in realtà non viene da Express, ok?
‫Ma è simile in quanto possiamo passare errori qui e
‫altre cose, come vedrai tra un secondo.
‫Quindi, per definire ora
‫la destinazione, dobbiamo effettivamente chiamare quel callback.
‫Quindi callback, e quindi il primo argomento è un errore se
‫ce n'è uno.
‫E se no, allora solo null.
‫E il secondo argomento è quindi la destinazione effettiva.
‫Quindi copiamolo
‫da qui e incolliamo qui.
‫Va bene, e di nuovo tutto questo sembra un po' strano e complesso,
‫e diamo un'occhiata
‫alla documentazione di Multer su GitHub.
‫Ok, quindi se hai bisogno
‫di saperne di più, puoi dare un'occhiata a questa documentazione qui.
‫E come vedi, con
‫6.000 stelle, è in realtà un pacchetto piuttosto popolare.
‫Quindi qui puoi imparare come usarlo.
‫Ma in effetti quello che troverai
‫qui è un po'
‫quello che faremo nelle prossime due lezioni, ok?
‫Quindi questo sembra molto più confuso di
‫quello che faremo, va bene?
‫Ma vedi che
‫questo è in realtà ciò che stiamo facendo attualmente, quindi stiamo impostando
‫la destinazione e successivamente imposteremo anche il nome del file.
‫Quindi facciamolo, e di nuovo, se vuoi saperne di
‫più, dai un'occhiata a quella documentazione.
‫Ma per ora voglio impostare la proprietà del nome del file.
‫Quindi non quello, semplicemente nome file.
‫E ancora, questa è una funzione di
‫callback molto simile con una firma, richiesta, file e callback simili.
‫E ora vogliamo dare ai nostri file dei nomi di file univoci.
‫E il
‫modo in cui lo farò è chiamarli user-userid, il timestamp corrente.
‫Quindi qualcosa del genere: so user-,
‫e poi l'ID che è strano, qualcosa del genere.
‫Giusto, e poi il timestamp
‫attuale, che sarà un numero enorme, qualcosa
‫del genere, e poi ovviamente l'estensione del file, ok?
‫E con questo possiamo sostanzialmente garantire
‫che non ci saranno due immagini con lo stesso nome file.
‫Se usassimo solo l'ID
‫utente, ovviamente più caricamenti da parte
‫dello stesso utente sovrascriverebbero l'immagine precedente.
‫E se usassimo solo l'utente con il timestamp, beh,
‫se due utenti caricassero un'immagine contemporaneamente, otterrebbero lo
‫stesso identico nome file, il che
‫non ha senso.
‫Bene, quindi prima di tutto,
‫estraiamo effettivamente il nome del file dal file caricato.
‫E come lo otteniamo?
‫Bene, diamo un'occhiata all'output della nostra console qui, dove
‫abbiamo avuto la richiesta. file molto tempo fa.
‫Quindi eccolo qui, quindi ricorda che questo oggetto qui
‫era una richiesta. file, e quindi
‫questo è esattamente quello che è questo file qui, ok?
‫E quindi qui abbiamo il tipo
‫MIME, e quindi il JPEG è memorizzato proprio qui, ok?
‫E quindi è qui che otterremo
‫l'estensione del file.
‫Quindi l'estensione è uguale al file. mimetype, quindi dividiamo
‫quella stringa con la barra e prendiamo
‫il secondo elemento dell'array risultante.
‫E quindi quella sarà solo questa parte, quindi solo questa.
‫Va bene, quindi questa è l'estensione.
‫E quindi ora,
‫proprio come prima, dobbiamo chiamare la funzione di callback senza errori e quindi
‫il nome del file che vogliamo specificare.
‫Quindi, quello sarà l'utente, quindi l'ID utente, ricordi?
‫E quindi dal momento che abbiamo accesso alla richiesta qui,
‫è molto semplice, richiesta. utente. ID.
‫E quindi, come sai,
‫questo è l'ID dell'utente attualmente connesso.
‫Quindi il timestamp, quindi Data. ora, ok, e
‫poi punta l'estensione che abbiamo appena creato, ok?
‫Quindi liberiamoci di questo commento, e quindi
‫questo è in realtà il nostro spazio di archiviazione.
‫E quindi sostanzialmente una definizione completa di come
‫vogliamo archiviare i nostri file, con
‫la destinazione e il nome del file.
‫Successivamente, creiamo un filtro Multer.
‫Quindi chiamiamolo esattamente così.
‫E il filtro in Multer è semplicemente, ancora
‫una volta, una funzione di callback, simile a quelle che avevamo
‫prima, che accede alla richiesta, al file e a una funzione di callback.
‫E in questa funzione, l'obiettivo
‫è fondamentalmente verificare se il file caricato è un'immagine.
‫E se è così, allora passiamo true alla
‫funzione di callback, e se
‫non lo è, passiamo false alla funzione di callback, insieme
‫a un errore.
‫Perché, ancora una volta, non vogliamo consentire il
‫caricamento di file che non siano immagini.
‫Ed è proprio a questo che serve questo filtro.
‫Ora, se nella
‫tua applicazione vuoi caricare qualcos'altro, diciamo file CSV, quando
‫poi ovviamente puoi testare quello invece delle immagini.
‫Quindi tutte le cose che stiamo facendo
‫qui funzionano non solo per
‫le immagini, ma davvero per tutti i
‫tipi di file che vuoi caricare, va bene?
‫Ora di nuovo, in questo caso stiamo davvero parlando di immagini,
‫quindi testiamo se il file caricato è un'immagine.
‫E per questo useremo ancora una volta il tipo MIME,
‫perché qualunque sia il tipo
‫di immagine caricato, quindi non importa se è un JPEG, o un PNG,
‫o una bitmap, o un TIFF, o
‫qualsiasi cosa, il tipo MIME inizierà sempre con image.
‫E così ora possiamo testarlo.
‫Quindi se file . tipo mimetico. startWith, image e
‫quindi non sono sicuro che l'abbiamo usato prima, ma è
‫un metodo stringa abbastanza nuovo e molto utile disponibile
‫in JavaScript, quindi in tutti
‫i JavaScript in generale.
‫Quindi, nel caso in cui abbiamo effettivamente un'immagine, beh, allora
‫di nuovo non c'è errore e passiamo al vero,
‫come ho detto all'inizio.
‫Ma in caso contrario, passeremo effettivamente un errore e
‫quindi falso.
‫Quindi mettiamo solo una x qui e false.
‫Quindi per questa x qui, ora creeremo un AppError,
‫proprio come abbiamo sempre fatto.
‫E in realtà lo abbiamo già qui.
‫Quindi diciamo un
‫nuovo AppError, non un'immagine, per
‫favore carica solo immagini, va bene?
‫E poi un 400 per una brutta richiesta.
‫Ottimo, quindi abbiamo il nostro spazio di archiviazione, abbiamo il nostro
‫filtro, ora è il
‫momento di usarli effettivamente per creare il caricamento.
‫Va bene, quindi il caricamento ora non sarà simile
‫a questo, ma passeremo invece queste variabili.
‫Quindi in Multer possiamo specificare lo storage, e
‫questo è il nostro multerStorage.
‫E poi il
‫fileFilter, che è la variabile che abbiamo chiamato multerFilter.
‫Ok, e basta.
‫E ovviamente avremmo potuto mettere
‫tutto questo qui direttamente in questo oggetto opzioni qui.
‫Ma di solito preferisco farlo all'esterno
‫e poi passare semplicemente le variabili in un oggetto options.
‫Quindi sembra un po' più pulito.
‫Quindi questi sono molti passaggi che
‫dobbiamo compiere per creare davvero il nostro middleware Multer.
‫Ma alla fine poi ovviamente,
‫proprio come abbiamo fatto
‫nell'ultimo video, usiamo questo upload, e su quello chiamiamo
‫single, con il nome del campo.
‫Quindi foto, e poi da lì creiamo un'esportazione, o
‫middleware, che in realtà abbiamo già incluso
‫nel nostro router.
‫Quindi ora eliminiamo questo vecchio tipo di immagine
‫che avevamo qui prima.
‫No, non ha funzionato.
‫E ora testiamolo di nuovo qui.
‫Quindi, a Postman, abbiamo ancora il nostro nome
‫e l'immagine del Leone, quindi andiamo.
‫E non abbiamo avuto errori, il che è positivo.
‫E vediamo di nuovo il nostro output qui.
‫Quindi tutto qui all'inizio è lo stesso,
‫ma poi vedi che il nostro nome file ora è effettivamente corretto.
‫E se dai un'occhiata qui alla nostra cartella,
‫allora in effetti c'è la nostra immagine.
‫E quindi è esattamente quello che abbiamo caricato.
‫Quindi è nei dati di sviluppo, nelle immagini, Leo.
‫E infatti, è esattamente lo stesso.
‫Fantastico, è fantastico.
‫Ora solo per testare questo filtro
‫anche qui, proviamo a caricare qualche altro file che non sia un'immagine.
‫Quindi selezioniamo qualcos'altro qui dai nostri dati di sviluppo
‫e diciamo semplicemente alcuni dati JSON.
‫E quindi aspettiamo se riceviamo un errore qui.
‫E infatti ne otteniamo uno.
‫Quindi non un'immagine, carica solo immagini.
‫E quindi significa che funziona anche quello.
‫Così perfetto, tutta la nostra configurazione Multer ora
‫funziona davvero bene, ma ovviamente
‫manca ancora un passaggio.
‫E questo è effettivamente
‫collegare l'utente all'immagine appena aggiornata, giusto?
‫Perché in questo momento nel database,
‫ovviamente, abbiamo ancora il
‫percorso, o in realtà il nome della
‫vecchia immagine, perché da nessuna parte nel nostro
‫codice abbiamo specificato che volevamo aggiornare il documento dell'utente stesso, giusto?
‫E quindi risolviamolo nel prossimo video.