Can't upload images from my javascript app to Storage setup via the CLI

I’ve added Storage via the CLI and given permission to Authenticated (read, write, delete) and Guest users (read only) and then pushed.

I’ve got an app that I have to log into (which is working) and then I’ve then got a form that tries to upload an image to the storage but its failing with 403 forbidden. I’m not sure where to go from here to get it to authenticate or to try to work out what the issue might be.

Any ideas?

To Reproduce

Steps to reproduce the behavior: run amplify add Storage or amplify update storage if already added

Then using this little helper:

import { Storage } from "aws-amplify";

export async function s3Upload(sourceFile, targetFilename) {
  const filename = targetFilename ?? `${Date.now()}-${sourceFile.name}`;

  const stored = await Storage.put(filename, sourceFile, {
    contentType: sourceFile.type,
  });

  console.info("S3 Response", stored);

  return stored.key;
}

Used in my onChange handler for my file input:

const handleFileChange = async (event) => {
  console.info("File changed", event.target.files[0]);
  const file = event.target.files[0];
  const attachment = await s3Upload(file);
  console.info("File uploaded to " + attachment );
}

When using the form I get this error in the console:

Expected behavior

Adding Storage and allowing the permissions I have for Authenticated users I would expect that I could push images up once logged in (Authenticated right?).

Desktop (please complete the following information):

• OS: Win 10
• Browser chrome
• Version 87.0.4280.88

Additional context Not sure if this is related: https://github.com/aws-amplify/amplify-console/issues/1403

This issue was copied from https://github.com/aws-amplify/amplify-console/issues/1427 as I raised it in the wrong repo.

[amhinson]

Hmm I’m still having no luck reproducing this with a federated Google user uploading a file to S3. This does appear to be similar to other issues such as: https://github.com/aws-amplify/amplify-cli/issues/4055 https://github.com/aws-amplify/amplify-js/issues/5729 https://github.com/aws-amplify/amplify-js/issues/1094

I know there are a lot of potential solutions presented in those, but have you looked deeper into the roles/policies/groups as suggested in the other issues?

Another suggestion would be to create a sample app from scratch and document every single step to see if you experience the same behavior, since it looks like the original reproduction steps just start with update storage instead of add storage. If the same thing happens, then providing those complete reproduction steps here would be great for us to debug on our side. If you can’t reproduce it with the new app, then you can compare what might be different in the policies & S3 bucket.

Let me know what you find! 👍

[edwardfoyle]

@PeteDuncanson if you’re able to make other authenticated calls successfully then it seems like you have authenticated properly. Maybe read through the docs here: https://docs.amplify.aws/lib/auth/social/q/platform/js to make sure. Hopefully someone on the JS team can help you debug further