application mime type not allowing in chrome.

[vinaypathak05]

I'm allowing to accept application mime type below is my code snap

let accept =
"application/pdf,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/zip";

<Dropzone
onDrop={onDropFile}
accept={accept ? { [accept]: [] } : {}}
multiple={false}
>
{({ getRootProps, getInputProps }) => (
<div
{...getRootProps()}
className={${className} flex items-center justify-center space-x-3 w-full h-full px-3 py-3 cursor-pointer border border-default rounded-md}
>
<input {...getInputProps()} />

{displayText}

)}

  for application mime type, its working in firefox, but not in chrome. getting below error
  
  Failed to execute 'showOpenFilePicker' on 'Window': Invalid type: application/pdf,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/zip

Desktop (please complete the following information):

• OS: macOS
• Browser: chrome
• Version: 118.0.5993.70

[savva312]

Hey i have a similar issue, while i am able to use Dropzone to upload file types of docx,pdf when i pass them to accept like below, I get the error attached

Using MS Edge Version 119.0.2151.44 (Official build) (64-bit)

Any help? or News?

{
    "image/*": [
        ".jpg",
        ".jpeg",
        ".webp",
        ".png",
        ".avif",
        ".gif",
        ".svg"
    ],
    "application/*": [
        ".docx",
        ".pdf"
    ]
}

I get the error

Skipped "application/*" because it is not a valid MIME type. Check https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types for a list of valid MIME types. at UploadDropZone (webpack-internal:///(app-pages-browser)/./app/[lng]/myfiles/components/UploadDropZone.js:107:11) at div at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@emotion+react@11.11.1_@types+react@18.0.15_react@18.2.0/node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66) at Grid (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@mui+material@5.14.15_@emotion+react@11.11.1_@emotion+styled@11.11.0_@types+react@18.0.15_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/Grid/Grid.js:392:87) at div at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@emotion+react@11.11.1_@types+react@18.0.15_react@18.2.0/node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66) at Grid (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@mui+material@5.14.15_@emotion+react@11.11.1_@emotion+styled@11.11.0_@types+react@18.0.15_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/Grid/Grid.js:392:87) at Home (webpack-internal:///(app-pages-browser)/./app/[lng]/myfiles/page.js:88:79) at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:246:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:61:11) at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:333:11) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:111:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:166:9) at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:231:11) at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:344:11) at div at MyFilesProvider (webpack-internal:///(app-pages-browser)/./app/[lng]/myfiles/contexts/myFilesContext.js:15:11) at div at main at Sidebar (webpack-internal:///(app-pages-browser)/./app/[lng]/components/Sidebar.jsx:25:11) at section at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:246:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:61:11) at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:333:11) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:111:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:166:9) at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:231:11) at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:344:11) at div at div at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/react-error-boundary@4.0.11_react@18.2.0/node_modules/react-error-boundary/dist/react-error-boundary.development.esm.js:21:5) at Suspense at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:246:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:53:9) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:61:11) at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:333:11) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:111:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:166:9) at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:231:11) at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:344:11) at UseClientHydrationStreamProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+react-query-next-experimental@5.5.0_@tanstack+react-query@5.4.3_next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/@tanstack/react-query-next-experimental/build/modern/HydrationStreamProvider.js:18:58) at ReactQueryStreamedHydration (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+react-query-next-experimental@5.5.0_@tanstack+react-query@5.4.3_next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/@tanstack/react-query-next-experimental/build/modern/ReactQueryStreamedHydration.js:17:99) at QueryClientProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@TanStack+react-query@5.4.3_react-dom@18.2.0_react@18.2.0/node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js:26:3) at f (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next-themes@0.2.1_next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next-themes/dist/index.module.js:8:597) at $ (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next-themes@0.2.1_next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/next-themes/dist/index.module.js:8:348) at ThemeProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@material-tailwind+react@2.1.4_react-dom@18.2.0_react@18.2.0/node_modules/@material-tailwind/react/context/theme.js:1:2661) at I18nextProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/react-i18next@13.0.0_i18next@23.0.1_react-dom@18.2.0_react@18.2.0/node_modules/react-i18next/dist/es/I18nextProvider.js:11:5) at Providers (webpack-internal:///(app-pages-browser)/./app/[lng]/providers.js:35:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:53:9) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:61:11) at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11) at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9) at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:307:11) at Router (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/app-router.js:174:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:82:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:111:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/app-router.js:445:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/app-index.js:143:11) at RSCComponent at Root (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/app-index.js:166:11)

[phani1585]

@savva312 did you got any solution for this?

[savva312]

Hey @phani1585 no, I haven't found anything. Having a normal input element and having accept="application/*" seems ok. I am not sure if Dropzone renders it differently and causes the error

[savva312]

Specifying the application types individually seems to make the warning to go away

accept: {
        "application/pdf": [".pdf"],
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
        "image/*": [".jpg", ".jpeg"],
      },

[phani1585]

Thank you @savva312 , it worked