Broken style for FileUploader

[nam-truong-le]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Storage

How is your app built?

amplify gen2 nextjs template

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

Frankfurt

Please describe your bug.

Hi, I import amplify css like this:

import "@aws-amplify/ui-react/styles.css";

Looks like it's working, Authenticator looks good:

But the FileUploader doesn't look like what I see in amplify ui docs. Can you have a look? Thank you:

What's the expected behaviour?

FileUploader should like this https://ui.docs.amplify.aws/react/connected-components/storage/fileuploader

Help us reproduce the bug!

I use https://github.com/aws-samples/amplify-next-template to generate my app.

Code Snippet

import "@aws-amplify/ui-react/styles.css";

          <FileUploader
            isResumable
            onUploadStart={() => onUploadStart()}
            onUploadSuccess={() => onUploadSuccess()}
            onUploadError={() => onUploadSuccess()}
            maxFileCount={1}
            path={`applicant-photos/${today}/`}
            acceptedFileTypes={["image/*"]}
            useAccelerateEndpoint
          />

Console log output

No response

Additional information and screenshots

{
  "name": "aws-amplify-gen2",
  "version": "0.3.0",
  "private": true,
  "scripts": {
    "dev": "NODE_ENV=development next dev -p 3999",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "sandbox": "env-cmd -f .env.development ampx sandbox --stream-function-logs --profile vs2 --identifier truong",
    "sandbox:delete": "ampx sandbox delete --profile vs2 --identifier truong"
  },
  "dependencies": {
    "@aws-amplify/adapter-nextjs": "1.2.17",
    "@aws-amplify/ui-react": "6.1.13",
    "@aws-amplify/ui-react-storage": "3.3.2",
    "@emotion/react": "11.13.3",
    "@emotion/styled": "11.13.0",
    "@fontsource/roboto": "5.1.0",
    "@mui/icons-material": "6.1.0",
    "@mui/material": "6.1.0",
    "@mui/material-nextjs": "5.16.6",
    "@mui/types": "7.2.15",
    "@paypal/paypal-js": "8.1.0",
    "@paypal/react-paypal-js": "8.6.0",
    "@reduxjs/toolkit": "2.2.7",
    "@vietnamvisa/vs2-react": "1.6.11",
    "aws-amplify": "6.4.0",
    "crypto-random-string": "5.0.0",
    "dayjs": "1.11.13",
    "lodash.concat": "4.5.0",
    "lodash.difference": "4.5.0",
    "lodash.filter": "4.6.0",
    "lodash.groupby": "4.6.0",
    "lodash.sortby": "4.7.0",
    "lodash.sum": "4.0.2",
    "lodash.sumby": "4.6.0",
    "lodash.truncate": "4.4.2",
    "next": "14.2.11",
    "react": "^18",
    "react-dom": "^18",
    "react-redux": "9.1.2",
    "schema-dts": "1.1.2"
  },
  "devDependencies": {
    "@aws-amplify/backend": "1.2.1",
    "@aws-amplify/backend-cli": "1.2.6",
    "@types/lodash.concat": "4.5.9",
    "@types/lodash.difference": "4.5.9",
    "@types/lodash.filter": "4.6.9",
    "@types/lodash.groupby": "4.6.9",
    "@types/lodash.sortby": "4.7.9",
    "@types/lodash.sum": "4.0.9",
    "@types/lodash.sumby": "4.6.9",
    "@types/lodash.truncate": "4.4.9",
    "@types/node": "20.16.5",
    "@types/react": "18.3.5",
    "@types/react-dom": "18.3.0",
    "ampx": "0.2.1",
    "aws-cdk": "2.158.0",
    "env-cmd": "10.1.0",
    "eslint": "8.57.0",
    "eslint-config-next": "14.2.11",
    "eslint-config-prettier": "8.10.0",
    "prettier": "3.3.3",
    "typescript": "5.6.2"
  },
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0"
  },
  "packageManager": "[email protected]+sha512.73a29afa36a0d092ece5271de5177ecbf8318d454ecd701343131b8ebc0c1a91c487da46ab77c8e596d6acf1461e3594ced4becedf8921b074fbd8653ed7051c"
}

[nam-truong-le]

After some packages are updated, it's working now:

{
  "name": "aws-amplify-gen2",
  "version": "0.3.0",
  "private": true,
  "scripts": {
    "dev": "NODE_ENV=development next dev -p 3999",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "sandbox": "env-cmd -f .env.development ampx sandbox --stream-function-logs --profile vs2 --identifier truong",
    "sandbox:delete": "ampx sandbox delete --profile vs2 --identifier truong"
  },
  "dependencies": {
    "@aws-amplify/adapter-nextjs": "1.2.18",
    "@aws-amplify/ui-react": "6.3.1",
    "@aws-amplify/ui-react-storage": "3.3.2",
    "@emotion/react": "11.13.3",
    "@emotion/styled": "11.13.0",
    "@fontsource/roboto": "5.1.0",
    "@mui/icons-material": "6.1.0",
    "@mui/material": "6.1.0",
    "@mui/material-nextjs": "6.1.0",
    "@mui/types": "7.2.16",
    "@paypal/paypal-js": "8.1.2",
    "@paypal/react-paypal-js": "8.7.0",
    "@reduxjs/toolkit": "2.2.7",
    "@vietnamvisa/vs2-react": "1.6.11",
    "aws-amplify": "6.6.1",
    "crypto-random-string": "5.0.0",
    "dayjs": "1.11.13",
    "lodash.concat": "4.5.0",
    "lodash.difference": "4.5.0",
    "lodash.filter": "4.6.0",
    "lodash.groupby": "4.6.0",
    "lodash.sortby": "4.7.0",
    "lodash.sum": "4.0.2",
    "lodash.sumby": "4.6.0",
    "lodash.truncate": "4.4.2",
    "next": "14.2.11",
    "react": "^18",
    "react-dom": "^18",
    "react-redux": "9.1.2",
    "schema-dts": "1.1.2"
  },
  "devDependencies": {
    "@aws-amplify/backend": "1.2.1",
    "@aws-amplify/backend-cli": "1.2.6",
    "@types/lodash.concat": "4.5.9",
    "@types/lodash.difference": "4.5.9",
    "@types/lodash.filter": "4.6.9",
    "@types/lodash.groupby": "4.6.9",
    "@types/lodash.sortby": "4.7.9",
    "@types/lodash.sum": "4.0.9",
    "@types/lodash.sumby": "4.6.9",
    "@types/lodash.truncate": "4.4.9",
    "@types/node": "20.16.5",
    "@types/react": "18.3.6",
    "@types/react-dom": "18.3.0",
    "ampx": "0.2.1",
    "aws-cdk": "2.158.0",
    "env-cmd": "10.1.0",
    "eslint": "8.57.1",
    "eslint-config-next": "14.2.11",
    "eslint-config-prettier": "8.10.0",
    "prettier": "3.3.3",
    "typescript": "5.6.2"
  },
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0"
  },
  "packageManager": "[email protected]+sha512.73a29afa36a0d092ece5271de5177ecbf8318d454ecd701343131b8ebc0c1a91c487da46ab77c8e596d6acf1461e3594ced4becedf8921b074fbd8653ed7051c"
}

[jordanvn]

Hello @nam-truong-le, glad to hear this issue was resolved by updating packages. This would be the recommended fix, as the FileUploader missing styling was a bug that was fixed in the latest release.

I'm going to close this issue as resolved.