‫Docente: Quindi ora consentiamo agli utenti
‫di caricare le loro foto direttamente sul nostro sito web.
‫E quindi questo è ciò che vogliamo.
‫Quando facciamo clic qui, in pratica
‫vogliamo aprire una nuova finestra per
‫la quale possiamo selezionare una nuova immagine da caricare e
‫quindi quando facciamo clic
‫su questo pulsante e inviamo un modulo, ovviamente,
‫vogliamo caricare quell'immagine nel nostro backend e aggiornare l'utente , Giusto.
‫E quindi il primo passo
‫per farlo sarà aggiungere un nuovo elemento di input al nostro html.
‫Quindi fondamentalmente al nostro modello di pacchetto che
‫consentirà quindi a quel selettore di file di aprirsi
‫quando si fa clic qui.
‫Quindi, andiamo alle nostre viste
‫e all'account e quindi è questo modulo in cui
‫ora dobbiamo aggiungere quell'input.
‫Quindi in questo momento abbiamo quel link qui che dice nuova foto.
‫Ma ovviamente non è un collegamento che useremo.
‫Quindi questo era davvero solo un segnaposto.
‫E quindi liberiamocene.
‫Quindi quello di cui abbiamo bisogno è un input.
‫Off per digitare il file.
‫Va bene, quindi prima, per il nome avevamo
‫un input con il tipo di testo.
‫Abbiamo anche input con il tipo di
‫email e ce ne sono anche di speciali per la password.
‫Quindi inserisci la password e quindi
‫i file, ovviamente ce n'è uno per i file.
‫Possiamo quindi specificare quale tipo di file accettiamo effettivamente.
‫E possiamo fare qualcosa del genere.
‫Immagine e poi tutti.
‫Quindi fondamentalmente tutti i formati ottengono le loro immagini, quindi
‫quelli che hanno un tipo di mente che inizia
‫con l'immagine sono accettati qui.
‫Ora diamo anche a questo qui un
‫nome di classe in modo che appaia ben formattato sulla nostra pagina.
‫E quindi questo è il nome della classe che ho nel mio css.
‫E ora assegnandogli anche un ID in modo che possiamo
‫selezionarlo in java script.
‫Aggiungilo come foto e infine, proprio come gli
‫altri campi, gli diamo anche un nome.
‫Quindi anche il nome della foto.
‫E ovviamente è foto perché è il nome
‫che abbiamo nel nostro documento utente ed
‫è anche il nome del campo che multer si aspetta.
‫Quindi questo qui è upload e quindi specifichiamo anche un'etichetta
‫per questo.
‫E lo impostiamo su quattro
‫e poi sull'ID dell'elemento di input, va bene.
‫Quindi non sono sicuro che
‫tu abbia familiarità con come funziona in html,
‫ma non è nemmeno molto importante.
‫Quindi il modo in cui accade è
‫che quando facciamo clic su questa etichetta qui, attiverà
‫effettivamente l'elemento di input che ha l'ID
‫che specifichiamo qui nel modulo.
‫E quindi in quel caso quella è la foto, va bene.
‫E in realtà
‫è questa etichetta qui che farà scegliere al testo una nuova foto.
‫E così quando faremo clic
‫sull'etichetta, attiverà questo input
‫che a sua volta aprirà la finestra
‫da cui possiamo selezionare un file.
‫E quindi questo è tutto ciò che dobbiamo fare per l'input qui.
‫Ora, proprio come prima, ci sono due modi possibili
‫per inviare questi dati al server.
‫Quindi, prima, senza l'API come abbiamo fatto in
‫una lezione precedente.
‫Troviamo già l'azione che vogliamo intraprendere
‫e anche il metodo.
‫E con ciò i
‫dati vengono quindi inviati direttamente al server.
‫Ora, se volessimo inviare un
‫file utilizzando questo metodo, dovremmo specificare
‫un'altra opzione qui.
‫E questo è il tipo enc.
‫Quindi il tipo enc dovrebbe essere costituito da dati di moduli in più parti.
‫Quindi dati in più parti del modulo slash, va bene.
‫E così anche qui, abbiamo questo nome in più parti.
‫E quindi, come abbiamo detto
‫prima, il multipart serve sempre per l'invio di file al server.
‫E ancora una volta abbiamo effettivamente bisogno del
‫middleware multer per gestire questi dati di moduli multiparte, d'accordo.
‫E in realtà il nome multer deriva da multi-part.
‫Quindi mult, multer, ok.
‫Comunque, ancora una volta, se volessimo inviare i dati
‫senza un'API, dovremmo sempre specificare questo
‫tipo di enc.
‫Altrimenti il modulo ignorerebbe semplicemente il file
‫e non lo invierebbe, ok.
‫Ma come già sappiamo, in
‫realtà lo stiamo usando con l'API, giusto.
‫E quindi non abbiamo bisogno di specificare
‫questo tipo enc ma dovremo farlo a livello di codice.
‫E quindi facciamolo davvero.
‫Quindi ora inviamo i nostri dati, inclusa
‫ovviamente la foto eseguendo una
‫chiamata API come abbiamo fatto nell'ultima sezione.
‫E quindi ora dobbiamo aprire nella nostra cartella pubblica e
‫dal loro js, apriamo index. js.
‫E quindi proprio qui è dove
‫effettivamente inviamo i dati da aggiornare sul server.
‫Beh, in realtà non li
‫stiamo inviando qui, ma li selezioniamo dal modulo
‫e poi li passiamo alle impostazioni di aggiornamento.
‫Va bene, ma ora ricordi come ho detto
‫che avevamo bisogno di ricreare a
‫livello di codice i dati di un modulo multiparte?
‫E quindi dobbiamo farlo in questo modo.
‫Chiamiamolo modulo e quindi nuovi dati del modulo.
‫Va bene, e ora su quel
‫modulo dobbiamo continuare ad aggiungere nuovi dati.
‫E fondamentalmente un'aggiunta per ciascuno dei dati
‫che vogliamo inviare.
‫Quindi forma. append e il primo è il nome.
‫Quindi specifichiamo qui il nome e poi il valore del nome.
‫E quindi questo è ovviamente questo.
‫Quindi prendiamolo, incolliamolo qui e duplichiamolo.
‫E il prossimo è l'e-mail, ok.
‫Quindi sbarazziamoci di questo entra nelle impostazioni di aggiornamento.
‫Quindi passiamo il modulo, ok.
‫E o una chiamata di testo
‫che utilizza axios riconoscerà
‫effettivamente questa forma qui come
‫un oggetto e funzionerà esattamente come prima, ok.
‫Quindi qui nelle impostazioni di aggiornamento
‫in cui passiamo i
‫dati, che vengono poi passati qui nella
‫richiesta axios, non è necessario modificare nulla.
‫Va bene, quindi questo è equivalente a quello che
‫avevamo prima con nome ed e-mail, ma ora
‫ovviamente aggiungiamo anche la foto che è l'intera
‫ragione per cui ora dobbiamo farlo
‫in questo modo.
‫Quindi forma. aggiungi di nuovo poi il nome che
‫vogliamo dargli è ovviamente di nuovo, foto e
‫poi documento. getelementbyid che
‫è anche foto ma ora non lo è . valore ma invece .
‫file, va bene.
‫E questi file
‫sono in realtà nell'array e quindi poiché
‫ce n'è solo uno, dobbiamo selezionare
‫quel primo elemento nell'array e quindi questo è zero.
‫Va bene, e in
‫realtà registriamo questo modulo sulla console finché non diamo una rapida occhiata a
‫cosa sia effettivamente questo modulo.
‫Ma in poche parole, come ho detto prima, fondamentalmente
‫ricreiamo questi dati del modulo in più parti.
‫E quindi questo è il motivo per cui si chiama dati del
‫modulo perché, beh, quei dati del modulo
‫sono anche qui in questo tipo enc multiparte, ok.
‫Quindi, immagino che sia abbastanza per
‫noi ora provarlo.
‫Quindi, come ho detto, nelle impostazioni di
‫aggiornamento, non c'è nulla che dobbiamo
‫cambiare e anche l'endpoint aggiornami
‫in cui stiamo inviando questo strumento di
‫richiesta, quindi anche questo è già funzionante e pronto ad
‫accettare immagini e persino a ridimensionarle, giusto.
‫E quindi ora andiamo avanti e proviamo questo.
‫E quindi ricarichiamolo ancora una volta.
‫E quindi vediamo, e in effetti
‫ora otteniamo il nostro selettore di file fondamentalmente.
‫Quindi questa finestra in cui ora possiamo
‫selezionare il file e quello che
‫farò è fondamentalmente rimettere
‫a posto l'immagine originale che avevamo su questo utente.
‫Quindi questo è su
‫desktop, natours, public, image users, ed era l'utente 11, quindi questo.
‫E quindi ora è stato caricato.
‫Quindi apri, salva nelle impostazioni e l'aggiornamento dei dati è andato a buon fine.
‫Ora non si riflette qui immediatamente.
‫Né qui né quassù, ma
‫dovrebbe essere così una volta caricata questa pagina.
‫E potremmo davvero farlo anche con
‫lo script java, ma in realtà è un sacco di lavoro.
‫Avevo provato a farlo e l'ho
‫fatto, ma poi ho pensato che fosse
‫troppo lavoro e che non valesse la pena implementarlo qui.
‫Ma comunque, solo per testare se ha funzionato
‫davvero, dobbiamo ora ricaricare la pagina.
‫E lo ha fatto.
‫Ecco ora la nuova immagine che abbiamo appena caricato.
‫Quindi, fantastico.
‫Diamo un'occhiata alla cartella stessa.
‫Se è effettivamente lì, anche, e
‫se è stato trasformato correttamente.
‫Quindi questa è un'immagine.
‫Ricarichiamolo qui.
‫E quindi ora non sono sicuro di quale sia.
‫Ah, esattamente.
‫Quindi 500 per 500
‫e ora che è completamente sfocato perché l'immagine originale era molto più piccola.
‫Ma non importa, non importa affatto.
‫Ciò che conta è che
‫ora possiamo effettivamente caricare le foto direttamente da questo modulo.
‫Voglio che sia tutto per dare
‫un'occhiata alla nostra console qui a quei
‫dati del modulo che pensavo avessimo registrato e che non sono apparsi qui perché
‫abbiamo già ricaricato la pagina.
‫Ma comunque, volevo rimettere qui l'altra immagine.
‫Quindi quello che abbiamo effettivamente caricato prima che è
‫in dev-data, image e aarav.
‫Va bene, i dati sono stati aggiornati con successo.
‫Diamo subito un'occhiata ai dati del nostro telefono qui.
‫Ah, ma immagino che non possiamo davvero vedere cosa abbiamo qui.
‫Vediamo.
‫Nah, non possiamo davvero vedere quello che abbiamo.
‫Ok, quindi non ho mai dato un'occhiata a questo.
‫E ho pensato che forse avremmo potuto vedere le informazioni,
‫ma non importa.
‫L'importante è che abbia funzionato davvero.
‫Quindi, se ricarichiamo ora, ovviamente questa vecchia immagine
‫è tornata di nuovo.
‫Fantastico, quindi ancora una volta, questa applicazione sta davvero iniziando
‫a sembrare sempre più un vero lavoro.