Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Storage.put() throwing - AWSS3Provider - error uploading TypeError: Cannot read property 'byteLength' of undefined #8855

Closed
3 tasks done
rakeshkumar331 opened this issue Sep 7, 2021 · 3 comments
Assignees
Labels
Storage Related to Storage components/category Vue Related to Vue Framework issues

Comments

@rakeshkumar331
Copy link

rakeshkumar331 commented Sep 7, 2021

Before opening, please confirm:

JavaScript Framework

Vue

Amplify APIs

Storage

Amplify Categories

storage

Environment information

# Put output below this line
System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
    Memory: 1.39 GB / 15.52 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 15.10.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /snap/bin/yarn
    npm: 7.5.6 - ~/node_modules/.bin/npm
  Browsers:
    Brave Browser: 92.1.27.108
    Chrome: 92.0.4515.107
    Firefox: 90.0
  npmPackages:
    @adamdehaven/vue-custom-tooltip: ^1.3.1 => 1.4.4 
    @alfsnd/vue-bootstrap-select: ^0.4.4 => 0.4.4 
    @bootstrap-vue/alert:  1.0.0 
    @bootstrap-vue/aspect:  1.0.0 
    @bootstrap-vue/avatar:  1.0.0 
    @bootstrap-vue/badge:  1.0.0 
    @bootstrap-vue/breadcrumb:  1.0.0 
    @bootstrap-vue/button:  1.0.0 
    @bootstrap-vue/button-group:  1.0.0 
    @bootstrap-vue/button-toolbar:  1.0.0 
    @bootstrap-vue/calendar:  1.0.0 
    @bootstrap-vue/card:  1.0.0 
    @bootstrap-vue/carousel:  1.0.0 
    @bootstrap-vue/collapse:  1.0.0 
    @bootstrap-vue/dropdown:  1.0.0 
    @bootstrap-vue/embed:  1.0.0 
    @bootstrap-vue/form:  1.0.0 
    @bootstrap-vue/form-btn-label-control:  1.0.0 
    @bootstrap-vue/form-checkbox:  1.0.0 
    @bootstrap-vue/form-datepicker:  1.0.0 
    @bootstrap-vue/form-file:  1.0.0 
    @bootstrap-vue/form-group:  1.0.0 
    @bootstrap-vue/form-input:  1.1.0 
    @bootstrap-vue/form-radio:  1.0.0 
    @bootstrap-vue/form-rating:  1.0.0 
    @bootstrap-vue/form-select:  1.0.0 
    @bootstrap-vue/form-spinbutton:  1.0.0 
    @bootstrap-vue/form-tags:  1.0.0 
    @bootstrap-vue/form-textarea:  1.0.0 
    @bootstrap-vue/form-timepicker:  1.0.0 
    @bootstrap-vue/icons:  1.0.0 
    @bootstrap-vue/image:  1.0.0 
    @bootstrap-vue/input-group:  1.0.0 
    @bootstrap-vue/jumbotron:  1.0.0 
    @bootstrap-vue/layout:  1.0.0 
    @bootstrap-vue/link:  1.0.0 
    @bootstrap-vue/list-group:  1.0.0 
    @bootstrap-vue/media:  1.0.0 
    @bootstrap-vue/modal:  1.0.0 
    @bootstrap-vue/nav:  1.0.0 
    @bootstrap-vue/navbar:  1.0.0 
    @bootstrap-vue/overlay:  1.0.0 
    @bootstrap-vue/pagination:  1.0.0 
    @bootstrap-vue/pagination-nav:  1.0.0 
    @bootstrap-vue/popover:  0.0.0 (1.0.0)
    @bootstrap-vue/progress:  1.0.0 
    @bootstrap-vue/scrollspy:  0.0.0 
    @bootstrap-vue/sidebar:  1.0.0 
    @bootstrap-vue/skeleton:  1.0.0 
    @bootstrap-vue/spinner:  1.0.0 
    @bootstrap-vue/table:  1.0.0 
    @bootstrap-vue/tabs:  1.0.0 
    @bootstrap-vue/time:  1.0.0 
    @bootstrap-vue/toast:  1.0.0 
    @bootstrap-vue/tooltip:  0.0.0 (1.0.0)
    @bootstrap-vue/transition:  1.0.0 
    @bootstrap-vue/transporter:  1.0.0 
    @bootstrap-vue/v-b-hover:  1.0.0 
    @bootstrap-vue/v-b-toggle:  1.0.0 
    @bootstrap-vue/v-b-visible:  0.0.0 
    @fortawesome/fontawesome-svg-core: ^1.2.35 => 1.2.36 
    @fortawesome/free-solid-svg-icons: ^5.15.3 => 5.15.4 
    @fortawesome/vue-fontawesome: ^3.0.0-4 => 3.0.0-4 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.13 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.13 
    @vue/cli-plugin-router: ~4.5.0 => 4.5.13 
    @vue/cli-service: ~4.5.0 => 4.5.13 
    algoliasearch: ^4.8.6 => 4.10.3 
    aws-amplify: ^4.2.7 => 4.2.7 
    aws-amplify-vue: ^2.1.5 => 2.1.5 
    aws-appsync: ^4.1.1 => 4.1.1 
    axios: ^0.21.1 => 0.21.1 
    babel-eslint: ^10.1.0 => 10.1.0 
    base64-arraybuffer: ^1.0.1 => 1.0.1 
    bcryptjs: ^2.4.3 => 2.4.3 
    bootstrap: ^4.6.0 => 4.6.0 
    bootstrap-vue: ^2.21.2 => 2.21.2 
    core-js: ^3.6.5 => 3.16.1 (2.6.12)
    crypto: ^1.0.1 => 1.0.1 
    el-select: ^1.0.1 => 1.0.1 
    element-ui: ^2.15.1 => 2.15.5 
    eslint: ^6.7.2 => 6.8.0 
    eslint-plugin-vue: ^6.2.2 => 6.2.2 
    fuse.js: ^6.4.6 => 6.4.6 
    graphql-tag: ^2.11.0 => 2.12.5 
    ini: ^1.3.5 => 1.3.8 
    inquirer: ^6.5.1 => 6.5.2 (7.3.3)
    jest-worker: ^27.1.0 => 27.1.0 
    moment: ^2.29.1 => 2.29.1 
    moment-timezone: ^0.5.33 => 0.5.33 
    sass: ^1.32.8 => 1.37.5 
    sass-loader: ^10.1.1 => 10.2.0 
    twilio-video: ^2.12.0 => 2.15.3 
    v-infinite-scroll: ^1.0.4 => 1.0.4 
    vue: ^2.6.12 => 2.6.14 
    vue-apollo: ^3.0.7 => 3.0.7 
    vue-autosuggest: ^2.2.0 => 2.2.0 
    vue-awesome-example:  2.0.0 
    vue-clickoutside: ^0.2.0 => 0.2.0 
    vue-clipboard2: ^0.3.1 => 0.3.1 
    vue-el-element: ^1.12.8 => 1.12.8 
    vue-moment: ^4.1.0 => 4.1.0 
    vue-router: ^3.2.0 => 3.5.2 
    vue-select: ^3.12.2 => 3.12.2 
    vue-template-compiler: ^2.6.11 => 2.6.14 
    vue-typeahead-bootstrap: ^2.8.0 => 2.11.1 
    vue2-datepicker: ^3.9.1 => 3.9.2 
    vue2-smooth-scroll: ^1.5.0 => 1.5.0 
    vuejs-paginate: ^2.1.0 => 2.1.0 
  npmGlobalPackages:
    @aws-amplify/cli: 5.1.0
    @vue/cli-init: 4.5.11
    @vue/cli-service-global: 4.5.11
    @vue/cli: 4.5.11
    latest: 0.2.0
    n: 7.0.1
    npm-cli: 0.1.0
    npm: 7.14.0

Describe the bug

My Code:

async onUpload(fileArr) {
      if (fileArr.length > 0) {
        console.log("fileArr", fileArr);
        fileArr.map(async (obj) => {
          try {
            console.log({ Storage, Amplify });
            console.log("Object =>", obj);
            let baseData = await this.toBase64(obj);
            console.log("Base Data =>", baseData);
            const arrayBuffer = decode(baseData);
            console.log("Array buffer =>", arrayBuffer);
            let result = await Storage.put(
              `hub/${obj.name}`,
              arrayBuffer,
              {
                contentType: obj.type,
              }
            );
            console.log("S3 Upload Result =>", result);
          } catch (err) {
            console.log("Error in uploading", err);
          }
        });
      }
    },
Error - AWSS3Provider - error uploading TypeError: Cannot read property 'byteLength' of undefined

Expected behavior

Files should upload to S3 Storage

Reproduction steps

Install and configure

Code Snippet

// Put your code below this line.
async onUpload(fileArr) {
      if (fileArr.length > 0) {
        console.log("fileArr", fileArr);
        fileArr.map(async (obj) => {
          try {
            console.log({ Storage, Amplify });
            console.log("Object =>", obj);
            let baseData = await this.toBase64(obj);
            console.log("Base Data =>", baseData);
            const arrayBuffer = decode(baseData);
            console.log("Array buffer =>", arrayBuffer);
            let result = await Storage.put(
              `hub/${obj.name}`,
              arrayBuffer,
              {
                contentType: obj.type,
              }
            );
            console.log("S3 Upload Result =>", result);
          } catch (err) {
            console.log("Error in uploading", err);
          }
        });
      }
    },

Log output

// Put your logs below this line
[DEBUG] 53:00.104 AWSS3Provider - put hub/Screenshot from 2021-08-05 16-40-08.png to public/hub/Screenshot from 2021-08-05 16-40-08.png
ConsoleLogger.js?36de:127 [DEBUG] 53:00.106 Credentials - getting credentials
ConsoleLogger.js?36de:127 [DEBUG] 53:00.106 Credentials - picking up credentials
ConsoleLogger.js?36de:127 [DEBUG] 53:00.107 Credentials - getting new cred promise
ConsoleLogger.js?36de:127 [DEBUG] 53:00.107 Credentials - checking if credentials exists and not expired
ConsoleLogger.js?36de:127 [DEBUG] 53:00.107 Credentials - need to get a new credential or refresh the existing one
ConsoleLogger.js?36de:127 [DEBUG] 53:00.107 Credentials - no credentials for expiration check
ConsoleLogger.js?36de:127 [DEBUG] 53:00.108 AuthClass - Getting current user credentials
ConsoleLogger.js?36de:127 [DEBUG] 53:00.108 AuthClass - Getting current session
ConsoleLogger.js?36de:127 [DEBUG] 53:00.109 AuthClass - Failed to get user from user pool
ConsoleLogger.js?36de:139 [DEBUG] 53:00.109 AuthClass - Failed to get the current user No current user
ConsoleLogger.js?36de:139 [DEBUG] 53:00.109 AuthClass - getting session failed No current user
ConsoleLogger.js?36de:127 [DEBUG] 53:00.109 Credentials - setting credentials for guest
ConsoleLogger.js?36de:139 [DEBUG] 53:00.116 Credentials - Failed to load credentials Promise {<rejected>: TypeError: Cannot read property 'body' of undefined
    at window.fetch (webpack-internal:///./src/…}
ConsoleLogger.js?36de:139 [DEBUG] 53:00.117 Credentials - Error loading credentials TypeError: Cannot read property 'body' of undefined
    at window.fetch (backend.js?1ba4:7)
    at FetchHttpHandler.handle (fetch-http-handler.js?cd6f:45)
    at eval (GetIdCommand.js?44e3:41)
    at eval (deserializerMiddleware.js?b14a:6)
    at step (tslib.es6.js?9ab4:100)
    at Object.eval [as next] (tslib.es6.js?9ab4:81)
    at eval (tslib.es6.js?9ab4:74)
    at new Promise (<anonymous>)
    at __awaiter (tslib.es6.js?9ab4:70)
    at eval (deserializerMiddleware.js?b14a:2)
ConsoleLogger.js?36de:139 [DEBUG] 53:00.117 AWSS3ProviderManagedUpload - set credentials for storage {accessKeyId: undefined, sessionToken: undefined, secretAccessKey: undefined, identityId: undefined, authenticated: undefined}
ConsoleLogger.js?36de:139 [WARN] 53:00.140 AWSS3Provider - error uploading TypeError: Cannot read property 'byteLength' of undefined
    at Object.isEmptyData (isEmptyData.js?9103:8)
    at Sha256.update (webCryptoSha256.js?6f83:21)
    at Sha256.update (crossPlatformSha256.js?648c:23)
    at hmac (credentialDerivation.js?4cf0:86)
    at eval (credentialDerivation.js?4cf0:33)
    at step (tslib.es6.js?9ab4:100)
    at Object.eval [as next] (tslib.es6.js?9ab4:81)
    at eval (tslib.es6.js?9ab4:74)
    at new Promise (<anonymous>)
    at __awaiter (tslib.es6.js?9ab4:70)
ConsoleLogger._log @ ConsoleLogger.js?36de:139
ConsoleLogger.warn @ ConsoleLogger.js?36de:197
eval @ AWSS3Provider.js?45d5:411
step @ AWSS3Provider.js?45d5:43
eval @ AWSS3Provider.js?45d5:24
rejected @ AWSS3Provider.js?45d5:16
Promise.then (async)
step @ AWSS3Provider.js?45d5:17
fulfilled @ AWSS3Provider.js?45d5:15
Promise.then (async)
step @ AWSS3Provider.js?45d5:17
eval @ AWSS3Provider.js?45d5:18
__awaiter @ AWSS3Provider.js?45d5:14
AWSS3Provider.put @ AWSS3Provider.js?45d5:326
Storage.put @ Storage.js?2d6c:270
_callee13$ @ ClaimForm.vue?69b3:1915
tryCatch @ aws-amplify-vue.common.js?19b2:10090
invoke @ aws-amplify-vue.common.js?19b2:10320
eval @ aws-amplify-vue.common.js?19b2:10145
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
eval @ ClaimForm.vue?69b3:1915
_callee14$ @ ClaimForm.vue?69b3:1915
tryCatch @ aws-amplify-vue.common.js?19b2:10090
invoke @ aws-amplify-vue.common.js?19b2:10320
eval @ aws-amplify-vue.common.js?19b2:10145
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
onUpload @ ClaimForm.vue?69b3:1912
handler @ ClaimForm.vue?69b3:1456
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
run @ vue.runtime.esm.js?2b0e:4584
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
proxySetter @ vue.runtime.esm.js?2b0e:4644
setFiles @ form-file.js?c43f:352
handleFiles @ form-file.js?c43f:401
onChange @ form-file.js?c43f:443
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
invoker @ vue.runtime.esm.js?2b0e:2188
original._wrapper @ vue.runtime.esm.js?2b0e:6961
ClaimForm.vue?69b3:1932 Error in uploading TypeError: Cannot read property 'byteLength' of undefined
    at Object.isEmptyData (isEmptyData.js?9103:8)
    at Sha256.update (webCryptoSha256.js?6f83:21)
    at Sha256.update (crossPlatformSha256.js?648c:23)
    at hmac (credentialDerivation.js?4cf0:86)
    at eval (credentialDerivation.js?4cf0:33)
    at step (tslib.es6.js?9ab4:100)
    at Object.eval [as next] (tslib.es6.js?9ab4:81)
    at eval (tslib.es6.js?9ab4:74)
    at new Promise (<anonymous>)
    at __awaiter (tslib.es6.js?9ab4:70)

aws-exports.js

const awsmobile = {
"aws_project_region": "eu-west-2",
"aws_cognito_identity_pool_id": "eu-west-2:xxx-xxxx-xxxx-xxxx-xxxxxxxx",
"aws_cognito_region": "eu-west-2",
"aws_user_pools_id": "eu-west-2_xxxxxxxx",
"aws_user_pools_web_client_id": "xxxxxxxx",
"oauth": {},
"aws_user_files_s3_bucket": "xxxxxxxx",
"aws_user_files_s3_bucket_region": "eu-west-2"
};

export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

@chrisbonifacio chrisbonifacio self-assigned this Sep 7, 2021
@chrisbonifacio chrisbonifacio added Storage Related to Storage components/category pending-triage Issue is pending triage labels Sep 7, 2021
@chrisbonifacio chrisbonifacio added the Vue Related to Vue Framework issues label Sep 7, 2021
@chrisbonifacio
Copy link
Member

Hi @rakeshkumar331 👋 It seems you're calling Storage.put from within a map function, so I can't be sure what values are being passed to Storage.put. Could you confirm that only trying to upload one item works?

If uploading a single file works, you might want to wrap your map (which will return an array of promises), in a Promise.all and await it like so:

// Put your code below this line.
async function onUpload(fileArr) {
  if (fileArr.length > 0) {
    console.log("fileArr", fileArr);
    await Promise.all(
      fileArr.map(async (obj) => {
        try {
          console.log({ Storage, Amplify });
          console.log("Object =>", obj);
          let baseData = await this.toBase64(obj);
          console.log("Base Data =>", baseData);
          const arrayBuffer = decode(baseData);
          console.log("Array buffer =>", arrayBuffer);
          let result = await Storage.put(`hub/${obj.name}`, arrayBuffer, {
            contentType: obj.type,
          });
          console.log("S3 Upload Result =>", result);
        } catch (err) {
          console.log("Error in uploading", err);
        }
      })
    );
  }
}

@chrisbonifacio chrisbonifacio added pending-response and removed pending-triage Issue is pending triage labels Sep 28, 2021
@chrisbonifacio
Copy link
Member

Hi 👋 Closing this as we have not heard back from you. If you are still experiencing this issue and in need of assistance, please feel free to comment and provide us with any information previously requested by our team members so we can re-open this issue and be better able to assist you. Thank you!

@github-actions
Copy link

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 16, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Storage Related to Storage components/category Vue Related to Vue Framework issues
Projects
None yet
Development

No branches or pull requests

2 participants