Save Changes to a Note

Chapter Comments
21

From @jayair on Fri Sep 29 2017 18:06:02 GMT+0000 (UTC)

@samxi Hmm it sounds like you missed the start of this chapter? https://serverless-stack.com/chapters/upload-a-file-to-s3.html. We add the s3Upload method there. I have a feeling you might have missed some steps here.

22

From @franchb on Wed Dec 27 2017 07:57:01 GMT+0000 (UTC)

@toddmcneill

After I tried to implement s3Delete function got NotAuthorized Exception:

NotAuthorizedException: Access to Identity 'us-east-1:0288c67e-707d-4189-87e5-10e93f179817' is forbidden.

I’m new to JS and can’t understand why should I call getAwsCredentials() without catching its result.

23

From @jayair on Wed Dec 27 2017 22:48:58 GMT+0000 (UTC)

@franchb Make sure to change the CORS setting to allow access to delete as well (as per @toddmcneill’s comment).

24

From @teejK on Thu Feb 01 2018 15:28:14 GMT+0000 (UTC)

Just a question about this bit

   await this.saveNote({
      ...this.state.note,
      content: this.state.content,
      attachment: uploadedFilename || this.state.note.attachment

what’s ...this.state.note doing? isn’t it redundant?

25

From @shawnnolanjr on Sun Feb 04 2018 08:16:11 GMT+0000 (UTC)

@toddmcneill You could just use the “authUser” method inside “s3Delete” instead of passing the token to the function, since you’re already logged in at this point. I think by not displaying how you saved the “this.props.userToken” you’re passing to the s3 delete function, it could be confusing for some. But nonetheless, good snippet.

Also, there should probably be a check if the attachment exists as well.

26

From @jayair on Mon Feb 05 2018 18:03:06 GMT+0000 (UTC)

@teejK Yeah it is redundant. In our case we only have content and attachment inside a note object. The reason I left it in there is because we want to update the current note with the newly edited values.

27

From @hutcho66 on Sat Apr 14 2018 02:26:22 GMT+0000 (UTC)

@jayair hoping you can provide some assistance. Getting some interesting behaviour where if a new file is added, it correctly uploads (appears in the right S3 folder) but it doesn’t replace the existing attachment reference in the DynamoDB table, so when I re-open the note, the original file is still the attached file.

I’m assuming it’s an issue with my update API not replacing the attachment reference properly (although it is correctly updating the note itself), because the client is definitely sending the right attachment reference to the saveNote function. But I can’t find any differences between my update.js file and yours.

28

From @jayair on Mon Apr 16 2018 17:50:34 GMT+0000 (UTC)

@hutcho66 That is really weird. If you think it’s the API, you can try the test we used back in this chapter - https://serverless-stack.com/chapters/add-an-update-note-api.html.

$ serverless invoke local --function update --path mocks/update-event.json

And use a console.log(result) before we invoke the callback function.

29

From @francisngo on Wed Apr 25 2018 18:15:24 GMT+0000 (UTC)

@toddmcneill 'getAwsCredentials' is not defined. Where is this function being imported from. I couldn’t find it in aws-amplify.

30

From @jayair on Mon Apr 30 2018 18:17:34 GMT+0000 (UTC)

@francisngo Where are you seeing this error?

31

From @devsteff on Wed May 09 2018 17:27:45 GMT+0000 (UTC)

I also try to solve the not deleted attachment problem.
Unfortunately I receive the following Network error:

Failed to load https://notes-app-uploads-stf.s3.eu-central-1.amazonaws.com/private/eu-central-1%3A7ba61059-782c-4ad2-9dff-ac5b05f36711/1525885247833-pizza.jpg: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 403.
I just change the CORS for the bucket as mentioned above to:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

My s3Delete function in awsLib.js looks like:

export async function s3Delete(s3Key) {
  console.log("about to delete old attachment "+s3Key);  
  const removed = await Storage.vault.remove(s3Key);
  console.log("after delete old attachment "+s3Key);  
  return removed;
}

Any ideas?
Thanks in advance.

32

From @jayair on Wed May 09 2018 17:44:05 GMT+0000 (UTC)

@devsteff So you are able to upload but not delete?

33

From @devsteff on Wed May 09 2018 17:53:36 GMT+0000 (UTC)

That’s right. Also the API calls to dynamoDb are working.
By the way the given URL is exact the same as i the S3 interface when I look into the item properties. When I click the given link from inside S3 the result is the following XML:

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>4F8C8A42C321347A</RequestId>
<HostId>
4yuVDLa/5P6gb63NF/XMM74kxIfrda0NoiEAmiW8kzFFc+XbwSxOdPyLGV8kN9/yrx1SorTIrr4=
</HostId>
</Error>
34

From @jayair on Wed May 09 2018 18:31:33 GMT+0000 (UTC)

@devsteff This seems related to the S3 CORS settings. Here is the one we use in the tutorial.

<CORSConfiguration>
	<CORSRule>
		<AllowedOrigin>*</AllowedOrigin>
		<AllowedMethod>GET</AllowedMethod>
		<AllowedMethod>PUT</AllowedMethod>
		<AllowedMethod>POST</AllowedMethod>
		<AllowedMethod>HEAD</AllowedMethod>
		<MaxAgeSeconds>3000</MaxAgeSeconds>
		<AllowedHeader>*</AllowedHeader>
	</CORSRule>
</CORSConfiguration>

Have you tried it with this?

35

I give your CORS config a try, but unfortunately it’s the same result. Still a 403 (Forbidden),
Network error as described above in the response.
But when I add the line for the allowed DELETE method, everything is fine. This CORS works for me.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
36

I see. I wonder if something has changed on the AWS SDK side. Can you check your package.json and tell me which version of aws-amplify you are using?

37

These are my current dependencies (“aws-amplify”: “^0.3.3”)

{
  "name": "notes-app-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "aws-amplify": "^0.3.3",
    "react": "^16.3.2",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.3.2",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.4"
  },
  :
1 Like
38

Thanks. I’ll test it with the new Amplify and check to see the issue.

39

Ah I see what is going on. We never added that part to the CORS config because we don’t really handle deleting the attachment in this chapter. I’ll update the CORS config anyway to avoid confusion.

Thanks for letting me know.

40

Does your CORS configuration include the following rule?

*