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

rakeshkumar331 · 2021-09-07T12:34:05Z

Before opening, please confirm:

I have searched for duplicate or closed issues and discussions.
I have read the guide for submitting bug reports.
I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

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

The text was updated successfully, but these errors were encountered:

chrisbonifacio · 2021-09-28T19:20:20Z

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 · 2021-10-15T19:28:44Z

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 · 2022-10-16T02:15:27Z

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.

chrisbonifacio self-assigned this Sep 7, 2021

chrisbonifacio added Storage Related to Storage components/category pending-triage Issue is pending triage labels Sep 7, 2021

chrisbonifacio added the Vue Related to Vue Framework issues label Sep 7, 2021

This was referenced Sep 16, 2021

[Snyk] Fix for 1 vulnerabilities hixio-mh/amplify-js#137

Merged

[Snyk] Fix for 1 vulnerabilities hixio-mh/amplify-js#138

Merged

chrisbonifacio added pending-response and removed pending-triage Issue is pending triage labels Sep 28, 2021

chrisbonifacio closed this as completed Oct 15, 2021

github-actions bot locked as resolved and limited conversation to collaborators Oct 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

rakeshkumar331 commented Sep 7, 2021 •

edited by nadetastic

Loading

chrisbonifacio commented Sep 28, 2021

chrisbonifacio commented Oct 15, 2021

github-actions bot commented Oct 16, 2022

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

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

Comments

rakeshkumar331 commented Sep 7, 2021 • edited by nadetastic Loading

Before opening, please confirm:

JavaScript Framework

Amplify APIs

Amplify Categories

Environment information

Describe the bug

Expected behavior

Reproduction steps

Code Snippet

Log output

aws-exports.js

Manual configuration

Additional configuration

Mobile Device

Mobile Operating System

Mobile Browser

Mobile Browser Version

Additional information and screenshots

chrisbonifacio commented Sep 28, 2021

chrisbonifacio commented Oct 15, 2021

github-actions bot commented Oct 16, 2022

rakeshkumar331 commented Sep 7, 2021 •

edited by nadetastic

Loading