Wasp-lang•7mo ago

File Upload (Tutorial Follow Along)

Hi! I'm following along with the tutorial https://docs.opensaas.sh/guides/file-uploading/ and I'm getting a 403 error after adding my IAM and S3 credentials to my .env.server

{
    "message": "Request failed with status code 403",
    "name": "AxiosError",
    "stack": "AxiosError: Request failed with status code 403\n    at settle (http://localhost:3000/node_modules/.vite/deps/axios.js?v=3e43de8b:1203:12)\n    at XMLHttpRequest.onloadend (http://localhost:3000/node_modules/.vite/deps/axios.js?v=3e43de8b:1420:7)\n    at Axios.request (http://localhost:3000/node_modules/.vite/deps/axios.js?v=3e43de8b:1780:41)\n    at async handleUpload (http://localhost:3000/@fs/home/jparker/my_apps/sass_one/advertiser/app/src/client/app/FileUploadPage.tsx:62:19)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "Content-Type": "image/jpeg"
        },
        "method": "put",
        "url": "https://hereqr1.s3.us-east-2.amazonaws.com/2/6b13aab3-114d-4b7f-ab0b-640b2899204f.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=[REDACTED]%2F20240524%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Date=20240524T024414Z&X-Amz-Expires=3600&X-Amz-Signature=77f03e27f916b8e19612cb1d535b69a3c92b6a084de0f283d0ebfa401f34bdcf&X-Amz-SignedHeaders=host&x-id=PutObject",
        "data": {}
    },
    "code": "ERR_BAD_REQUEST",
    "status": 403
}

{
    "message": "Request failed with status code 403",
    "name": "AxiosError",
    "stack": "AxiosError: Request failed with status code 403\n    at settle (http://localhost:3000/node_modules/.vite/deps/axios.js?v=3e43de8b:1203:12)\n    at XMLHttpRequest.onloadend (http://localhost:3000/node_modules/.vite/deps/axios.js?v=3e43de8b:1420:7)\n    at Axios.request (http://localhost:3000/node_modules/.vite/deps/axios.js?v=3e43de8b:1780:41)\n    at async handleUpload (http://localhost:3000/@fs/home/jparker/my_apps/sass_one/advertiser/app/src/client/app/FileUploadPage.tsx:62:19)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "Content-Type": "image/jpeg"
        },
        "method": "put",
        "url": "https://hereqr1.s3.us-east-2.amazonaws.com/2/6b13aab3-114d-4b7f-ab0b-640b2899204f.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=[REDACTED]%2F20240524%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Date=20240524T024414Z&X-Amz-Expires=3600&X-Amz-Signature=77f03e27f916b8e19612cb1d535b69a3c92b6a084de0f283d0ebfa401f34bdcf&X-Amz-SignedHeaders=host&x-id=PutObject",
        "data": {}
    },
    "code": "ERR_BAD_REQUEST",
    "status": 403
}

8 Replies

kapa.ai•7mo ago

Hi @JLegendz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The 403 error you're encountering typically indicates a permissions issue. It seems like the request to upload the file to your S3 bucket is being denied. Here are a few things you can check: 1. IAM and S3 Credentials: Ensure that the IAM user associated with the credentials you've added to your .env.server file has the necessary permissions to upload files to the specified S3 bucket. The IAM user should have s3:PutObject permission for the bucket. 2. Bucket Policy: Check the policy of your S3 bucket. It should allow the IAM user to upload files. 3. Region: Make sure that the AWS_S3_REGION in your .env.server file matches the region of your S3 bucket. 4. Correctness of Credentials: Double-check the values of AWS_S3_IAM_ACCESS_KEY, AWS_S3_IAM_SECRET_KEY, and AWS_S3_FILES_BUCKET in your .env.server file. Make sure they are correct and properly formatted. Here is an example of how your .env.server file should look like:

AWS_S3_IAM_ACCESS_KEY=your-iam-access-key
AWS_S3_IAM_SECRET_KEY=your-iam-secret-key
AWS_S3_FILES_BUCKET=your-s3-bucket-name
AWS_S3_REGION=your-s3-region

AWS_S3_IAM_ACCESS_KEY=your-iam-access-key
AWS_S3_IAM_SECRET_KEY=your-iam-secret-key
AWS_S3_FILES_BUCKET=your-s3-bucket-name
AWS_S3_REGION=your-s3-region

If you've checked all of these and you're still encountering the issue, it might be helpful to provide more information or check with the AWS support. For more details, you can refer to the Github Issue (open): Ability to serve and upload dynamic binary assets (images, pdfs) (https://github.com/wasp-lang/wasp/issues/494) where a similar setup is discussed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @JLegendz, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

JLegendzOP•7mo ago

When I try to add s3:PutObject permission on my IAM user, it says "Failed to add IVSRecordToS3 to user. Cannot attach a Service Role Policy to an IAM user." @kapa.ai When I try to add s3:PutObject permission on my IAM user, it says "Failed to add IVSRecordToS3 to user. Cannot attach a Service Role Policy to an IAM user."

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message you're seeing suggests that you're trying to attach a Service Role Policy to an IAM user, which is not allowed. Service Role Policies are meant to be attached to service roles, not users. Instead, you should create a custom policy that grants s3:PutObject permission and attach that to your IAM user. Here's an example of how such a policy might look:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1409228238000",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject"
            ],
            "Resource": [
                "arn:aws:s3:::your-bucket-name/*"
            ]
        }
    ]
}

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1409228238000",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject"
            ],
            "Resource": [
                "arn:aws:s3:::your-bucket-name/*"
            ]
        }
    ]
}

Replace your-bucket-name with the name of your S3 bucket. This policy allows the IAM user to upload (put) objects to the specified S3 bucket. After creating this policy, you can attach it to your IAM user. If you're not sure how to create or attach policies, you can refer to the AWS IAM User Guide (https://docs.aws.amazon.com/IAM/latest/UserGuide/introduction_access-management.html). Remember, the IAM user needs to have the necessary permissions to interact with your S3 bucket. If you're still having trouble, it might be helpful to check with AWS support. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @JLegendz, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

JLegendzOP•7mo ago

That worked! Just needed to add a custom permission and select se:PutObject for my IAM user. Nice bot!

Filip•7mo ago

Hey @JLegendz, glad this bot's becoming useful 😄 We're here if you need any more help!

martinsos•7mo ago

@JLegendz is there anything we could have done on our side, maybe something in the docs that would help with this upfront, or do you think this was more specific for your situation?

JLegendzOP•7mo ago

Hey! The docs are very helpful, but this situation, which I imagine impacts more than just me, was because of some gaps where things weren’t 1:1 with the documentation. I created a new aws root account. Then an iam account. The problem had to do with permissions. From the root user, you can give an IAM user full S3 permissions, OR full IAM permissions. In order to create a bucket I needed to give it S3 access, and I had to toggle it to IAM access when creating access keys. AWS shows red when trying to access something you lack permissions for, and that’s what clued me in on what specific permission rules I needed to create and add individually. After adjusting permissions for awhile I got it to work, but none of that aligned with how straightforward the docs made it look.

martinsos•7mo ago

Awesome, this helps a lot! I created an issue for this, we will make sure to improve those docs :)! https://github.com/wasp-lang/open-saas/issues/153

GitHub

Potentially improve the docs for file upload · Issue #153 · wasp-la...

We had a user struggle a bit with getting the file-upload to work: https://discord.com/channels/686873244791210014/1243395173006966834/1243395173006966834 . Seems like there is some capacity to imp...

Gaming

Programming

File Upload (Tutorial Follow Along)