Skip to content

Commit

Permalink
fix(ui): restrict file picking via upload config mimetypes (#8710)
Browse files Browse the repository at this point in the history
Fixes #8673

This PR restricts inputs with `type="file"` to only those mimetypes
specified in collection upload configs. This also works for the input in
`bulkUpload` and drag-and-drop capabilities by omitting dropped files if
they do not conform to the upload config mimetypes. This PR also assumes
that an upload config with an empty mimetype array should accept all
files since the negation of that statement makes an upload collection
redundant.
  • Loading branch information
akhrarovsaid authored Oct 16, 2024
1 parent a9c6a91 commit c4fa885
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 4 deletions.
4 changes: 3 additions & 1 deletion packages/ui/src/elements/BulkUpload/AddFilesView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ import './index.scss'
const baseClass = 'bulk-upload--add-files'

type Props = {
readonly acceptMimeTypes?: string
readonly onCancel: () => void
readonly onDrop: (acceptedFiles: FileList) => void
}
export function AddFilesView({ onCancel, onDrop }: Props) {
export function AddFilesView({ acceptMimeTypes, onCancel, onDrop }: Props) {
const { t } = useTranslation()

const inputRef = React.useRef(null)
Expand All @@ -37,6 +38,7 @@ export function AddFilesView({ onCancel, onDrop }: Props) {
{t('upload:selectFile')}
</Button>
<input
accept={acceptMimeTypes}
aria-hidden="true"
className={`${baseClass}__hidden-input`}
hidden
Expand Down
28 changes: 25 additions & 3 deletions packages/ui/src/elements/BulkUpload/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import type { JsonObject } from 'payload'
import { useModal } from '@faceless-ui/modal'
import React from 'react'

import { useConfig } from '../../providers/Config/index.js'
import { EditDepthProvider, useEditDepth } from '../../providers/EditDepth/index.js'
import { Drawer } from '../Drawer/index.js'
import { AddFilesView } from './AddFilesView/index.js'
Expand All @@ -17,20 +18,41 @@ function DrawerContent() {
const { addFiles, forms, isInitializing } = useFormsManager()
const { closeModal } = useModal()
const { collectionSlug, drawerSlug } = useBulkUpload()
const { config } = useConfig()

const uploadCollection = config.collections.find((col) => col.slug === collectionSlug)
const uploadConfig = uploadCollection.upload
const uploadMimeTypes = uploadConfig.mimeTypes

const onDrop = React.useCallback(
(acceptedFiles: FileList) => {
void addFiles(acceptedFiles)
const fileTransfer = new DataTransfer()
for (const candidateFile of acceptedFiles) {
if (
uploadMimeTypes === undefined ||
uploadMimeTypes.length === 0 ||
uploadMimeTypes?.includes(candidateFile.type)
) {
fileTransfer.items.add(candidateFile)
}
}
void addFiles(fileTransfer.files)
},
[addFiles],
[addFiles, uploadMimeTypes],
)

if (!collectionSlug) {
return null
}

if (!forms.length && !isInitializing) {
return <AddFilesView onCancel={() => closeModal(drawerSlug)} onDrop={onDrop} />
return (
<AddFilesView
acceptMimeTypes={uploadMimeTypes?.join(', ')}
onCancel={() => closeModal(drawerSlug)}
onDrop={onDrop}
/>
)
} else {
return <AddingFilesView />
}
Expand Down
3 changes: 3 additions & 0 deletions packages/ui/src/elements/Upload/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,8 @@ export const Upload: React.FC<UploadProps> = (props) => {

const showFocalPoint = focalPoint && (hasImageSizes || hasResizeOptions || focalPointEnabled)

const acceptMimeTypes = uploadConfig.mimeTypes?.join(', ')

return (
<div className={[fieldBaseClass, baseClass].filter(Boolean).join(' ')}>
<FieldError field={null} message={errorMessage} showError={showError} />
Expand Down Expand Up @@ -251,6 +253,7 @@ export const Upload: React.FC<UploadProps> = (props) => {
{t('upload:selectFile')}
</Button>
<input
accept={acceptMimeTypes}
aria-hidden="true"
className={`${baseClass}__hidden-input`}
hidden
Expand Down

0 comments on commit c4fa885

Please sign in to comment.