Now that our note loads into our form, let’s work on saving the changes we make to that note.

Replace the handleSubmit method in src/containers/Notes.js with the following.

saveNote(note) {
  return invokeApig({
    path: `/notes/${}`,
    method: 'PUT',
    body: note,
  }, this.props.userToken);

handleSubmit = async (event) => {
  let uploadedFilename;


  if (this.file && this.file.size > config.MAX_ATTACHMENT_SIZE) {
    alert('Please pick a file smaller than 5MB');

  this.setState({ isLoading: true });

  try {

    if (this.file) {
      uploadedFilename = (await s3Upload(this.file, this.props.userToken)).Location;

    await this.saveNote({
      content: this.state.content,
      attachment: uploadedFilename || this.state.note.attachment,
  catch(e) {
    this.setState({ isLoading: false });

And include our s3Upload helper method in the header:

import { invokeApig, s3Upload } from '../libs/awsLib';

The code above is doing a couple of things that should be very similar to what we did in the NewNote container.

  1. If there is a file to upload we call s3Upload to upload it and save the URL.

  2. We save the note by making PUT request with the note object to /notes/note_id where we get the note_id from

  3. And on success we redirect the user to the homepage.

Let’s switch over to our browser and give it a try by saving some changes.

Notes page saving screenshot

You might have noticed that we are not deleting the old attachment when we upload a new one. To keep things simple, we are leaving that bit of detail up to you. It should be pretty straightforward. Check the AWS JS SDK Docs on how to a delete file from S3.

Next up, let’s allow users to delete their note.