[Storage] Stray ProgressEvent at the end of an upload

ffxsam commented 1 year ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] 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: macOS 12.6.2 CPU: (8) arm64 Apple M1 Memory: 137.73 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 18.12.1 - ~/Library/Caches/fnm_multishells/15065_1678462383127/bin/node Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/15065_1678462383127/bin/yarn npm: 8.19.2 - ~/Library/Caches/fnm_multishells/15065_1678462383127/bin/npm Browsers: Chrome: 111.0.5563.64 Firefox: 108.0.2 Safari: 16.3 npmPackages: @aws-amplify/api-graphql: ^3.1.4 => 3.1.6 @aws-sdk/client-s3: ^3.288.0 => 3.288.0 @aws-sdk/lib-storage: ^3.288.0 => 3.288.0 @commitlint/cli: ^17.4.4 => 17.4.4 @commitlint/config-conventional: ^17.4.4 => 17.4.4 @commitlint/format: ^17.4.4 => 17.4.4 @commitlint/types: ^17.4.4 => 17.4.4 @graphql-codegen/cli: 3.2.2 => 3.2.2 @graphql-codegen/client-preset: 2.1.1 => 2.1.1 @mdi/font: ^7.1.96 => 7.1.96 @pinia/testing: ^0.0.15 => 0.0.15 @playwright/test: ^1.31.1 => 1.31.2 @rushstack/eslint-patch: ^1.2.0 => 1.2.0 @sentry/tracing: ^7.40.0 => 7.41.0 @sentry/vite-plugin: ^0.4.0 => 0.4.0 @sentry/vue: ^7.40.0 => 7.41.0 @storybook/addon-actions: ^7.0.0-beta.62 => 7.0.0-beta.62 @storybook/addon-essentials: ^7.0.0-beta.62 => 7.0.0-beta.62 @storybook/addon-links: ^7.0.0-beta.62 => 7.0.0-beta.62 @storybook/addon-mdx-gfm: ^7.0.0-beta.62 => 7.0.0-beta.62 @storybook/blocks: ^7.0.0-beta.62 => 7.0.0-beta.62 @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1 @storybook/vue3: ^7.0.0-beta.62 => 7.0.0-beta.62 @storybook/vue3-vite: ^7.0.0-beta.62 => 7.0.0-beta.62 @tanstack/vue-query: ^4.24.10 => 4.26.1 @types/jsdom: ^21.1.0 => 21.1.0 @types/lodash-es: ^4.17.6 => 4.17.6 @types/lodash.merge: ^4.6.7 => 4.6.7 @types/node: ^18.14.2 => 18.14.6 @types/uuid: ^9.0.1 => 9.0.1 @types/validator: ^13.7.12 => 13.7.13 @vitejs/plugin-vue: ^4.0.0 => 4.0.0 @vitest/ui: ^0.29.2 => 0.29.2 @vue/eslint-config-prettier: ^7.1.0 => 7.1.0 @vue/eslint-config-typescript: ^11.0.2 => 11.0.2 @vue/test-utils: ^2.3.0 => 2.3.0 @vue/tsconfig: ^0.1.3 => 0.1.3 aws-amplify: ^5.0.16 => 5.0.18 axios: ^1.3.4 => 1.3.4 axios-retry: ^3.4.0 => 3.4.0 camelcase-keys: ^8.0.2 => 8.0.2 change-case: ^4.1.2 => 4.1.2 conventional-changelog-atom: ^2.0.8 => 2.0.8 date-fns: ^2.29.3 => 2.29.3 dotenv: ^16.0.3 => 16.0.3 eslint: ^8.35.0 => 8.35.0 eslint-plugin-storybook: ^0.6.11 => 0.6.11 eslint-plugin-vue: ^9.9.0 => 9.9.0 filesize: ^10.0.6 => 10.0.6 graphql: ^16.6.0 => 16.6.0 husky: ^8.0.3 => 8.0.3 immutable: ^4.2.4 => 4.2.4 jsdom: ^21.1.0 => 21.1.0 keycode: ^2.2.1 => 2.2.1 lint-staged: ^13.1.2 => 13.1.2 lodash-es: ^4.17.21 => 4.17.21 lodash.merge: ^4.6.2 => 4.6.2 node-ray: ^1.19.4 => 1.19.4 npm-run-all: ^4.1.5 => 4.1.5 pinia: ^2.0.32 => 2.0.33 prettier: ^2.8.4 => 2.8.4 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 sass: ^1.58.3 => 1.58.3 snakecase-keys: ^5.4.5 => 5.4.5 storybook: ^7.0.0-beta.62 => 7.0.0-beta.62 typescript: ~4.9.5 => 4.9.5 uuid: ^9.0.0 => 9.0.0 validator: ^13.9.0 => 13.9.0 vite: ^4.1.4 => 4.1.4 vite-plugin-vuetify: ^1.0.2 => 1.0.2 vitest: 0.29.2 => 0.29.2 vue: ^3.2.47 => 3.2.47 vue-router: ^4.1.6 => 4.1.6 vue-tsc: ^1.2.0 => 1.2.0 vue3-smooth-dnd: ^0.0.2 => 0.0.2 vuetify: ^3.1.7 => 3.1.7 waveform-data: ^4.3.0 => 4.3.0 zen-observable-ts: ^1.1.0 => 1.1.0 npmGlobalPackages: @aws-amplify/cli: 10.6.0 corepack: 0.14.2 diff-so-fancy: 1.4.3 esbuild: 0.17.11 npm: 8.19.2 rollup: 3.17.2 ts-node: 10.9.1 yarn: 1.22.19 ```

Describe the bug

At the end of a file upload, progressCallback gets called with a native ProgressEvent with strange values for loaded and total.

Expected behavior

I wouldn't expect that final ProgressEvent.

Reproduction steps

See code below.

Workaround

For now, I can check progress instanceof ProgressEvent to ignore that last event.

Code Snippet

async function uploadFile(file: File) {
  const fileId = uuid();
  const fileExt = getFileExt(file.name);
  const fileType = { category: 'audio' };
  const destKey = `staging/${fileType.category}/${fileId}.${fileExt}`;

  try {
    await Storage.put(destKey, file, {
      contentType: file.type,
      progressCallback: _throttle((progress) => {
        console.log('progress:', progress, progress instanceof ProgressEvent);
      }, 250),
    });
  } catch (e) {
    console.log('what is this upload error?', e);
  }
}

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

Amplify.configure({
  aws_appsync_graphqlEndpoint: import.meta.env.VITE_GRAPHQL_ENDPOINT,
  aws_appsync_region: 'us-east-1',
  aws_appsync_authenticationType: 'AMAZON_COGNITO_USER_POOLS',
  API: {
    graphql_headers: async () => ({
      Authorization: (await Auth.currentSession()).getIdToken().getJwtToken(),
    }),
  },
  Storage: {
    AWSS3: {
      bucket: import.meta.env.VITE_UPLOAD_BUCKET,
      region: import.meta.env.VITE_AWS_REGION,
      customPrefix: { public: '' },
    },
  },
});

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

nadetastic commented 1 year ago

Hi @ffxsam - thank you for opening this issue!

I'm able to confirm the behavior and its an un-intended side effect of the current event handling logic between single and multi part uploads. We are currently working on cleaning this up and will update as soon as thats done. In the meantime let me know if you have any questions.

ashika112 commented 2 months ago

This should now be fixed and must be available in latest v5 (5.3.21).

aws-amplify / amplify-js