Implementação

• Criar o serviço de armazenamento

  Para adicionar a funcionalidade de armazenamento de imagens, usaremos a categoria de armazenamento 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

• Atualização do esquema GraphQL

  Em seguida, abra o amplify/backend/api/notesapp/schema.graphql e atualize-o com o seguinte esquema:

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

  Certifique-se de salvar o arquivo.
  

• Implantar serviço de armazenamento e atualizações de API

  Agora que o serviço de armazenamento foi configurado localmente e que atualizamos o esquema GraphQL, podemos implantar as atualizações executando o comando push Amplify:
  

  amplify push --y

• Atualização do aplicativo React

  Agora que o back-end foi atualizado, vamos atualizar o aplicativo React para adicionar o recurso de fazer upload das imagens e visualizá-las em uma nota. Abra src/App.js e faça as mudanças a seguir.

  a. Primeiro, adicione a classe Storage (Armazenamento) às suas importações do Amplify:

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

  b. Na função principal do aplicativo, crie uma nova função onChange para processar o upload da imagem:
  

  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. Atualize a função fetchNotes para obter uma imagem se houver uma imagem associada à 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. Atualize a função createNote para adicionar a imagem à matriz de imagens locais se houver uma imagem associada à 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. Adicione outra entrada ao formulário no bloco de retorno:
  

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

  f. Ao mapear a matriz de notas, renderize uma imagem se ela existir:
  

  {
    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>
    ))
  }
  

• Execução do aplicativo

  Para testar o aplicativo, execute o comando Iniciar:
  

  npm start

  Agora você deve ser capaz de fazer o upload opcional de uma imagem para cada nota.
  

• Exclusão de recursos

  Remoção de serviços individuais

  Para remover serviços individuais, é possível usar o comando de remoção do Amplify:

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

  Em seguida, execute o comando de push do Amplify:
  

  amplify push

  Exclusão do projeto inteiro

  Para excluir o projeto e os recursos associados, é possível executar o comando de exclusão do Amplify:

  amplify delete