I'm trying to upload a file to AWS using amplify with React js but I'm getting a 07:55.748 AWSS3Provider - error uploading Error: Region is missing.

This is the code that I'm using. I even trying hard coding the region but it still isn't working.

import { v4 as uuid } from 'uuid';
import { withAuthenticator } from '@aws-amplify/ui-react';
import { createDrawing as CreateDrawing } from '../graphql/mutations';
import { listDrawings as ListDrawings } from '../graphql/queries';
import config from '../aws-exports';
const { aws_user_files_s3_bucket: bucket } = config;

export const listDrawings = async () => {
    const images = await API.graphql(graphqlOperation(ListDrawings));

    console.log(images.data.listDrawings.items);
    return images;
};

export const createDrawing = async (file) => {
    const region = 'eu-west-1';
    const extension = file.name.split('.')[1];
    const imgName = file.name.split('.')[0];
    if (file) {
        const { type: mimeType } = file;
        const key = `images/${uuid()}${imgName}.${extension}`;
        const url = `https://${bucket}.s3.${region}.amazonaws/public/${key}`;
        const inputData = { name: imgName, image: url };

        try {
            await Storage.put(key, file, {
                contentType: mimeType
            });
            await API.graphql(
                graphqlOperation(CreateDrawing, { input: inputData })
            );
        } catch (err) {
            console.log('error: ', err);
        }
    }
};

I also tried updating aws-amplify but it didn't solve my problem once again.

I'm trying to upload a file to AWS using amplify with React js but I'm getting a 07:55.748 AWSS3Provider - error uploading Error: Region is missing.

This is the code that I'm using. I even trying hard coding the region but it still isn't working.

import { v4 as uuid } from 'uuid';
import { withAuthenticator } from '@aws-amplify/ui-react';
import { createDrawing as CreateDrawing } from '../graphql/mutations';
import { listDrawings as ListDrawings } from '../graphql/queries';
import config from '../aws-exports';
const { aws_user_files_s3_bucket: bucket } = config;

export const listDrawings = async () => {
    const images = await API.graphql(graphqlOperation(ListDrawings));

    console.log(images.data.listDrawings.items);
    return images;
};

export const createDrawing = async (file) => {
    const region = 'eu-west-1';
    const extension = file.name.split('.')[1];
    const imgName = file.name.split('.')[0];
    if (file) {
        const { type: mimeType } = file;
        const key = `images/${uuid()}${imgName}.${extension}`;
        const url = `https://${bucket}.s3.${region}.amazonaws./public/${key}`;
        const inputData = { name: imgName, image: url };

        try {
            await Storage.put(key, file, {
                contentType: mimeType
            });
            await API.graphql(
                graphqlOperation(CreateDrawing, { input: inputData })
            );
        } catch (err) {
            console.log('error: ', err);
        }
    }
};

I also tried updating aws-amplify but it didn't solve my problem once again.

• javascript
• reactjs
• amazon-web-services
• amazon-s3
• aws-amplify

• set the environment variable AWS_REGION=eu-west-1 before starting your service – jordanm Commented May 3, 2021 at 16:20
• Sorry for asking, but where do I set that variable? – Guilhermeffable Commented May 3, 2021 at 16:28

2 Answers 2

In repository from where you are exporting your files, there is a file with name aws-exports.js

It should have a structure like:

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "region",
    "aws_cognito_identity_pool_id": "xxxxxxxxxxxxxxxx",
    "aws_cognito_region": "region",
    "aws_user_pools_id": "xxxxxxxxxxxxxxxx",
    "aws_user_pools_web_client_id": "xxxxxxxxxxxxxxx",
    "oauth": {xxxxxxxx}
};


export default awsmobile;

In the region, edit the region you want to add like eu-west-1.

You can also try to manually add configuration in the file like this instead of importing from aws-exports.js:

import Amplify, { Auth, Storage } from 'aws-amplify';

Amplify.configure({
Auth: {
    identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', //REQUIRED - Amazon Cognito Identity Pool ID
    region: 'XX-XXXX-X', // REQUIRED - Amazon Cognito Region
    userPoolId: 'XX-XXXX-X_abcd1234', //OPTIONAL - Amazon Cognito User Pool ID
    userPoolWebClientId: 'XX-XXXX-X_abcd1234', //OPTIONAL - Amazon Cognito Web Client ID
},
Storage: {
    AWSS3: {
        bucket: '', //REQUIRED -  Amazon S3 bucket name
        region: 'XX-XXXX-X', //OPTIONAL -  Amazon service region
    }
}
});

Above solution didnt work for me. So I tried this in index.js:

import { Storage } from "aws-amplify";
import config from "./aws-exports";
Storage.configure({
    region: config.aws_user_files_s3_bucket_region,
    bucket: config.aws_user_files_s3_bucket,
    identityPoolId: config.aws_user_pools_id,
    level: "protected",
});