AWS Amplify Hands on Doc Module 5 is incorrect

[adrian-santos]

Describe the bug The S3 put inonChange in Update the React app is incorrect. Page can be seen here

To Reproduce Steps to reproduce the behavior:

1. Do modules 1 - 4
2. Install S3 on Amplify
3. Do the steps from Create Storage service --> Update React App
4. Upload an image - this will upload the file to S3 without firing the submit button

Expected behavior Upload the file on submit, not on upload, this will trigger unnecessary puts leading possible increased S3 costs

Desktop (please complete the following information):

• OS: Macbook Pro v12.13.1 - Monterey
• Browser: Chrome
• Version: 102.0.5005.61

Additional context Solution

1. Add a imageFile state

   const [imageFile, setImageFile] = useState(null); // this will contain the image the user uploads
   

2. Change onChange function

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

3. Change createNote function

     async function createNote() {
       if (!formData.name || !formData.description) return;
   
       await Storage.put(formData.image, imageFile); // puts the file on S3 on submit
   
       await API.graphql({
         query: createNoteMutation,
         variables: { input: formData }
       });
   
       fetchNotes(); // fetch the notes
   
        // Reset the states
       setFormData(initialFormState);
       setImageFile(null);
     }
   

[siegerts]

Hi @adrian-santos, thanks for raising! That content doesn't live in this repo but we'll get it directed to the right place. Thanks!

[josefaidt]

Hey @adrian-santos this is now resolved and the walkthrough has been updated 🙂 closing issue