trying to make it client side

[badoubadou]

Hi,
I'm trying to translate it to react. I manage to make the first part with axios.

axios.post('https://api.cesium.com/v1/assets', {
      name: selectedFile.name,
      description: '',
      type: '3DTILES',
      options: {
        position:[ 2.29, 48.85, 0.1],
        sourceType: srcType
      }
    },{
      headers: { Authorization: `Bearer ${accessToken}` }
    })
    .then(response => sendtos3(response))
    .catch(function (error) {
      console.log(error);
    });`

Then my sendtos3 function is like this :

async function sendtos3(response){
    const uploadLocation = response.data.uploadLocation;
    const s3 = new AWS.S3({
      apiVersion: '2006-03-01',
      region: 'us-east-1',
      signatureVersion: 'v4',
      endpoint: uploadLocation.endpoint,
      credentials: new AWS.Credentials(
        uploadLocation.accessKey,
        uploadLocation.secretAccessKey,
        uploadLocation.sessionToken)
    });
    const params = {
      Body: selectedFile,
      Bucket: uploadLocation.bucket,
      Key: selectedFile.name
    };
    await s3.upload({
      Body: selectedFile,
      Bucket: uploadLocation.bucket,
      Key: selectedFile.name
    }).on('httpUploadProgress', function (progress) {
      console.log(`Upload: ${((progress.loaded / progress.total) * 100).toFixed(2)}%`);
    }).promise();
  } `

But I always get a : Failed to load resource: the server responded with a status of 403 (Forbidden).
When I check my credential, every thing seam to be ok.

---

^{Edited by javagl for code formatting}

[shehzan10]

@badoubadou Can you please share the full error and response you are receiving?

[badoubadou]

Hello @shehzan10 , I get :

POST https://s3.amazonaws.com/assets.cesium.com/House%20%281%29.laz?uploads 403 (Forbidden) AccessDenied

and just before that, I check the S3 credential with console.log(s3.config.credentials); and get :

 {
    "expired": false,
    "expireTime": null,
    "refreshCallbacks": [],
    "accessKeyId": "Lorem",
    "sessionToken": "Lorem"
}

Hi have replace accessKeyId, and sessionToken by Lorem, but there are not missing in the console.

---

_{Edited for formatting}

[shehzan10]

@badoubadou And have you compared these responses with the JS version?

I'm not sure if its a typo, but in https://s3.amazonaws.com/assets.cesium.com/House%20%281%29.laz?uploads the uploads after the question mark doesn't look entirely right to me.

[badoubadou]

@shehzan10 You are right, I didn't think about checking the Js credential.
A lot seem to be missing on the client side :)
bucket: 'assets.cesium.com',
endpoint: 'https://s3.amazonaws.com/',
prefix: 'sources/1134551/',
accessKey: 'lorem',
secretAccessKey: 'lorem',
sessionToken: 'lorem'

I will look into it and try again.

[badoubadou]

@shehzan10 ok, I wrote a bit fast my last message.
When I do console.log(s3), I get the same result on client side or on server side, nothing is missing.

[badoubadou]

So I tried with an other lib.
import { Upload } from "@aws-sdk/lib-storage"; import { S3Client, S3 } from "@aws-sdk/client-s3";

async function sendtos3(response){
    console.log('sendtos3');
    const uploadLocation = response.data.uploadLocation;
    console.log(uploadLocation);
    
    const S3ClientCred = {
      accessKeyId : uploadLocation.accessKey,
      secretAccessKey: uploadLocation.secretAccessKey,
      sessionToken: uploadLocation.sessionToken
    }
    
    const params = {
      Bucket: uploadLocation.bucket,
      Key: selectedFile.name,
      Body: selectedFile,
      Prefix: uploadLocation.prefix
    };
    
    try {
      const parallelUploads3 = new Upload({
        client: new S3Client({apiVersion: '2006-03-01', Prefix: uploadLocation.prefix, region: 'us-east-1',signatureVersion: 'v4',endpoint: uploadLocation.endpoint, credentials: S3ClientCred}),
        params: params,
        leavePartsOnError: false, // optional manually handle dropped parts
      });
    
      parallelUploads3.on("httpUploadProgress", (progress) => {
        console.log(progress);
      });
    
      await parallelUploads3.done();
    } catch (e) {
      console.log(e);
    }
    
  } 

I still get this error in console :
fetch-http-handler.js:61 POST https://s3.amazonaws.com/assets.cesium.com/House.laz?uploads=&x-id=CreateMultipartUpload 403 (Forbidden)

Don't see what I'm doing wrong, & the error is really not helping too, the don't say why :(

[badoubadou]

Hello, no one can help on this ?

[javagl]

(Disclaimer: I'm not an expert in the area of React or Credential handling, but just a very high-level comment: )

It can be hard to identify the reason for the problem by just looking at the code and reading the error message. The code may involve libraries that people do not know in detail, and the error can probably have many different reasons.

If it was possible to just 'try this out', people might be able to provide better help quicker. For example, if you could clone this repository and do your changes in a public branch (or just pack your current state into a ZIP), so that people can do an npm install/npm run start to actually see the error message, then somebody might be able to give more useful hints.

[badoubadou]

Hi javagl, ok I will try to do that. Thanks