Implementazione

• Creare il servizio di storage

  Per aggiungere una funzionalità di storage di immagini, utilizzeremo la categoria di storage Amplify:
  

  amplify add storage
  
  ? Please select from one of the below mentioned services: Content
  ? Please provide a friendly name for your resource that will be used to label this category in the project: imagestorage
  ? Please provide bucket name: <your-unique-bucket-name>
  ? Who should have access: Auth users only
  ? What kind of access do you want for Authenticated users? create, read, update, delete
  ? Do you want to add a Lambda Trigger for your S3 Bucket? N

• Aggiornare lo schema GraphQL

  Poi, apri amplify/backend/api/notesapp/schema.graphql e aggiornalo con il seguente schema:

  type Note @model {
    id: ID!
    name: String!
    description: String
    image: String
  }
  

  Ricorda di salvare il file.
  

• Distribuzione del servizio di storage e degli aggiornamenti dell'API

  Ora che il servizio di storage è stato configurato localmente e che abbiamo aggiornato lo schema GraphQL, possiamo distribuire gli aggiornamenti eseguendo il comando push Amplify:
  

  amplify push --y

• Aggiornare l'app React

  Ora che il back-end è stato aggiornato, dobbiamo aggiornare l'app React per aggiungere la funzionalità per caricare e visualizzare le immagini per una nota. Apri src/App.js e fai le seguenti modifiche.

  a. Prima aggiungi la classe di Storage alle tue importazioni di Amplify:

  import { API, Storage } from 'aws-amplify';

  b. Nella funzione principale dell'app, crea una nuova funzione onChange per gestire il caricamento dell'immagine:
  

  async function onChange(e) {
    if (!e.target.files[0]) return
    const file = e.target.files[0];
    setFormData({ ...formData, image: file.name });
    await Storage.put(file.name, file);
    fetchNotes();
  }
  

  c. Aggiorna la funzione fetchNotes per recuperare un'immagine quando è associata a una nota:
  

  async function fetchNotes() {
    const apiData = await API.graphql({ query: listNotes });
    const notesFromAPI = apiData.data.listNotes.items;
    await Promise.all(notesFromAPI.map(async note => {
      if (note.image) {
        const image = await Storage.get(note.image);
        note.image = image;
      }
      return note;
    }))
    setNotes(apiData.data.listNotes.items);
  }
  

  d. Aggiorna la funzione createNote per aggiungere l'immagine al vettore locale dell'immagine se è associata a una nota:

  async function createNote() {
    if (!formData.name || !formData.description) return;
    await API.graphql({ query: createNoteMutation, variables: { input: formData } });
    if (formData.image) {
      const image = await Storage.get(formData.image);
      formData.image = image;
    }
    setNotes([ ...notes, formData ]);
    setFormData(initialFormState);
  }
  

  e. Aggiungi un input aggiuntivo al modulo nel blocco di ritorno:
  

  <input
    type="file"
    onChange={onChange}
  />
  

  f. Durante la mappatura del vettore delle note, effettua il rendering dell'immagine, se esiste:
  

  {
    notes.map(note => (
      <div key={note.id || note.name}>
        <h2>{note.name}</h2>
        <p>{note.description}</p>
        <button onClick={() => deleteNote(note)}>Delete note</button>
        {
          note.image && <img src={note.image} style={{width: 400}} />
        }
      </div>
    ))
  }
  

• Eseguire l'app

  Per testare l'app, esegui il comando di avvio:
  

  npm start

  Adesso dovresti essere in rado di caricare in modo facoltativo un'immagine per ogni nota.
  

• Eliminazione delle risorse

  Rimozione dei servizi individuali

  Per rimuovere i servizi individuali, puoi utilizzare i comandi di rimozione Amplify.

  amplify remove auth
  
  ? Choose the resource you would want to remove: <your-service-name>

  Poi, premi il comando push di Amplify:
  

  amplify push

  Eliminare l'intero progetto

  Per eliminare il progetto e le risorse associate, puoi eseguire i comandi di eliminazione Amplify:

  amplify delete