@instructure/ui-file-drop 8.25.0 → 8.25.1-snapshot-7

package/src/FileDrop/index.tsx

@@ -22,10 +22,10 @@
  * SOFTWARE.
  */
 /** @jsx jsx */
-import { Component } from 'react'
+import React, { Component } from 'react'
 import keycode from 'keycode'
-
 import { FormFieldMessages } from '@instructure/ui-form-field'
+import type { FormMessage } from '@instructure/ui-form-field'
 import { View } from '@instructure/ui-view'
 import { testable } from '@instructure/ui-testable'
 import {
@@ -34,7 +34,6 @@ import {
   getInteraction,
   withDeterministicId
 } from '@instructure/ui-react-utils'
-import { isEdge } from '@instructure/ui-utils'
 
 import { accepts, getAcceptList } from './utils/accepts'
 import { getEventFiles } from './utils/getEventFiles'
@@ -46,26 +45,15 @@ import generateComponentTheme from './theme'
 import { propTypes, allowedProps } from './props'
 import type { FileDropProps, FileDropState, FileDropStyleProps } from './props'
 
-function keyEventIsClickButton(e: any) {
+function keyEventIsClickButton(e: React.KeyboardEvent) {
   return e.keyCode === keycode.codes.space || e.keyCode === keycode.codes.enter
 }
 
-// Used try-catch due to missing document/navigator references in Jenkins
-function isBrowserMS() {
-  let result = false
-  try {
-    // @ts-expect-error ts-migrate(2551) FIXME: Property 'documentMode' does not exist on type 'Do... Remove this comment to see the full error message
-    result = document.documentMode || isEdge
-  } catch (e) {} // eslint-disable-line no-empty
-  return result
-}
-
-const IS_MS = isBrowserMS()
-
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
@@ -76,20 +64,7 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
-    // @ts-expect-error ts-migrate(6133) FIXME: 'e' is declared but its value is never read.
-    onClick: function (e: any) {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'accepted' is declared but its value is never read... Remove this comment to see the full error message
-    onDrop: function (accepted: any, rejected: any, e: any) {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'accepted' is declared but its value is never read... Remove this comment to see the full error message
-    onDropAccepted: function (accepted: any, e: any) {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'rejected' is declared but its value is never read... Remove this comment to see the full error message
-    onDropRejected: function (rejected: any, e: any) {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'e' is declared but its value is never read.
-    onDragEnter: function (e: any) {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'e' is declared but its value is never read.
-    onDragOver: function (e: any) {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'e' is declared but its value is never read.
-    onDragLeave: function (e: any) {},
+    onClick: function (_e: React.MouseEvent) {},
     shouldEnablePreview: false,
     shouldAllowMultiple: false,
     shouldAllowRepeats: true,
@@ -106,11 +81,17 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
     this.messagesId = props.deterministicId!('FileDrop-messages')
   }
   componentDidMount() {
-    ;(this.props as any).makeStyles(this.makeStyleProps())
+    this.props.makeStyles?.(this.makeStyleProps())
   }
 
   componentDidUpdate() {
-    ;(this.props as any).makeStyles(this.makeStyleProps())
+    this.props.makeStyles?.(this.makeStyleProps())
+  }
+
+  convertToFile(fileLikeItem: DataTransferItem | File) {
+    if (fileLikeItem instanceof DataTransferItem)
+      return fileLikeItem.getAsFile()
+    else return fileLikeItem
   }
 
   makeStyleProps = (): FileDropStyleProps => {
@@ -130,7 +111,7 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
   }
 
   enterCounter = 0
-  fileInputEl = null
+  fileInputEl: HTMLInputElement | null = null
   defaultId: string | null = null
   messagesId = ''
 
@@ -145,9 +126,7 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
   }
 
   get hasMessages() {
-    return (
-      (this.props as any).messages && (this.props as any).messages.length > 0
-    )
+    return this.props.messages && this.props.messages.length > 0
   }
 
   get interaction() {
@@ -155,28 +134,32 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
   }
 
   get invalid() {
-    return (
-      this.hasMessages &&
-      (this.props as any).messages.findIndex((message: any) => {
+    return (this.hasMessages &&
+      this.props.messages!.findIndex((message: FormMessage) => {
         return message.type === 'error'
-      }) >= 0
-    )
+      }) >= 0) as boolean
   }
-
-  getDataTransferItems(e: any, shouldEnablePreview: any) {
-    let list = Array.from(getEventFiles(e, this.fileInputEl))
+  getDataTransferItems(
+    e: React.ChangeEvent | React.DragEvent,
+    shouldEnablePreview?: boolean
+  ): Array<File> {
+    let list: Array<File> = []
+    Array.from(getEventFiles(e, this.fileInputEl)).forEach((file) => {
+      const fileObj = this.convertToFile(file)
+      if (fileObj) list.push(fileObj)
+    })
     if (list.length > 1) {
-      list = (this.props as any).shouldAllowMultiple ? list : [list[0]]
+      list = this.props.shouldAllowMultiple ? list : [list[0]]
     }
     if (shouldEnablePreview) {
-      return list.map((file: any) =>
+      return list.map((file: File) =>
         Object.assign(file, { preview: window.URL.createObjectURL(file) })
       )
     }
     return list
   }
 
-  handleDragEnter = (e: any) => {
+  handleDragEnter = (e: React.DragEvent) => {
     e.preventDefault()
     // Count the dropzone and any children that are entered.
     this.enterCounter += 1
@@ -184,16 +167,15 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
     if (this.enterCounter > 1) {
       return
     }
-    // @ts-expect-error ts-migrate(2554) FIXME: Expected 2 arguments, but got 1.
     const allFilesAccepted = this.allFilesAccepted(this.getDataTransferItems(e))
     this.setState({
       isDragAccepted: allFilesAccepted,
       isDragRejected: !allFilesAccepted
     })
-    ;(this.props as any).onDragEnter(e)
+    this.props.onDragEnter?.(e)
   }
 
-  handleDragOver = (e: any) => {
+  handleDragOver = (e: React.DragEvent) => {
     e.preventDefault()
     e.stopPropagation()
     try {
@@ -202,11 +184,11 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
     } catch (err) {
       // continue regardless of error
     }
-    ;(this.props as any).onDragOver(e)
+    this.props.onDragOver?.(e)
     return false
   }
 
-  handleDragLeave = (e: any) => {
+  handleDragLeave = (e: React.DragEvent) => {
     e.preventDefault()
     this.enterCounter -= 1
     // Only deactivate once the dropzone and all children was left
@@ -217,14 +199,19 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
       isDragAccepted: false,
       isDragRejected: false
     })
-    ;(this.props as any).onDragLeave(e)
+    this.props.onDragLeave?.(e)
   }
 
-  parseFiles(fileList: any) {
-    const accepted: any = []
-    const rejected: any = []
-    fileList.forEach((file: any) => {
-      if (this.fileAccepted(file) && this.fileMatchSize(file)) {
+  parseFiles(fileList: Array<DataTransferItem | File>) {
+    const accepted: typeof fileList = []
+    const rejected: typeof fileList = []
+    fileList.forEach((file: DataTransferItem | File) => {
+      const fileObj = this.convertToFile(file)
+      if (
+        fileObj &&
+        this.fileAccepted(fileObj) &&
+        this.fileMatchSize(fileObj)
+      ) {
         accepted.push(file)
       } else {
         rejected.push(file)
@@ -233,21 +220,18 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
     return [accepted, rejected]
   }
 
-  handleChange = (e: any) => {
+  handleChange = (e: React.ChangeEvent | React.DragEvent) => {
     const { onDrop, onDropAccepted, onDropRejected, shouldEnablePreview } =
       this.props
     const fileList = this.getDataTransferItems(e, shouldEnablePreview)
     const [accepted, rejected] = this.parseFiles(fileList)
     e.preventDefault()
     this.enterCounter = 0
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefined'.
-    onDrop(accepted, rejected, e)
-    if (rejected.length > 0) {
-      // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefined'.
+    onDrop && onDrop(accepted, rejected, e as React.DragEvent)
+    if (rejected.length > 0 && onDropRejected) {
       onDropRejected(rejected, e)
     }
-    if (accepted.length > 0) {
-      // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefined'.
+    if (accepted.length > 0 && onDropAccepted) {
       onDropAccepted(accepted, e)
     }
     this.setState({
@@ -257,24 +241,22 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
     })
   }
 
-  fileAccepted = (file: any) => {
-    return accepts(file, (this.props as any).accept)
+  fileAccepted = (file: File) => {
+    if (this.props.accept) return accepts(file, this.props.accept)
+    else return true
   }
 
-  fileMatchSize(file: any) {
-    return (
-      file.size <= (this.props as any).maxSize &&
-      file.size >= (this.props as any).minSize
-    )
+  fileMatchSize(file: File) {
+    return file.size <= this.props.maxSize! && file.size >= this.props.minSize!
   }
 
-  allFilesAccepted(files: any) {
+  allFilesAccepted(files: Array<File>) {
     return files.every(this.fileAccepted)
   }
 
   acceptStr() {
     const { accept } = this.props
-    return accept ? getAcceptList(accept).join(',') : null
+    return accept ? getAcceptList(accept).join(',') : undefined
   }
 
   renderLabel() {
@@ -286,7 +268,7 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
     })
   }
 
-  handleRef = (el: any) => {
+  handleRef = (el: HTMLInputElement) => {
     this.fileInputEl = el
   }
 
@@ -304,40 +286,27 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
     })
   }
 
-  handleClick = (e: any) => {
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-    if (this.fileInputEl.value && (this.props as any).shouldAllowRepeats) {
-      // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-      this.fileInputEl.value = null
+  handleClick = (e: React.MouseEvent) => {
+    if (this.fileInputEl!.value && this.props.shouldAllowRepeats) {
+      this.fileInputEl!.value = null as unknown as string
     }
     // focus the input (because FF won't)
-    // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-    this.fileInputEl.focus()
-    ;(this.props as any).onClick(e)
+    this.fileInputEl?.focus()
+    this.props.onClick!(e)
     this.setState({
       isFileBrowserDisplayed: true
     })
   }
 
-  handleKeyDown = (e: any) => {
+  handleKeyDown = (e: React.KeyboardEvent) => {
     if (this.state.isFocused && keyEventIsClickButton(e)) {
-      if ((this.props as any).shouldAllowRepeats) {
-        // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-        this.fileInputEl.value = null
-      }
-      // This bit of logic is necessary for MS browsers but causes unwanted warnings in Firefox
-      // So we need to apply this logic only on MS browsers
-      /* istanbul ignore if  */
-      if (IS_MS) {
-        e.stopPropagation()
-        e.preventDefault()
-        // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-        this.fileInputEl.click()
+      if (this.props.shouldAllowRepeats) {
+        this.fileInputEl!.value = null as unknown as string
       }
     }
   }
 
-  handleKeyUp = (e: any) => {
+  handleKeyUp = (e: React.KeyboardEvent) => {
     // This is to handle the case where ESC is pressed inside a Dialog so that
     // closing the file browser dialog doesn't also close the Dialog.
     if (e.keyCode === keycode.codes.esc && this.state.isFileBrowserDisplayed) {
@@ -361,7 +330,7 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
       onDropRejected,
       ...props
     } = this.props
-    const id = (this.props as any).id || this.defaultId
+    const id = this.props.id || this.defaultId!
     const focusColor =
       this.state.isDragRejected || this.invalid ? 'danger' : undefined
 
@@ -377,7 +346,7 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
         elementRef={this.handleElementRef}
       >
         <label
-          css={(this.props as any).styles.fileDropLabel}
+          css={this.props.styles?.fileDropLabel}
           htmlFor={id}
           onDragEnter={this.handleDragEnter}
           onDragOver={this.handleDragOver}
@@ -392,8 +361,8 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
             focusColor={focusColor}
             height={height}
           >
-            <span css={(this.props as any).styles.fileDropLabelContent}>
-              <span css={(this.props as any).styles.fileDropLayout}>
+            <span css={this.props.styles?.fileDropLabelContent}>
+              <span css={this.props.styles?.fileDropLayout}>
                 <View height={height}>{this.renderLabel()}</View>
               </span>
             </span>
@@ -403,24 +372,24 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
           {...passthroughProps(props)}
           onClick={this.handleClick}
           type="file"
-          css={(this.props as any).styles.fileDropInput}
+          css={this.props.styles?.fileDropInput}
           id={id}
           ref={this.handleRef}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
           onKeyDown={this.handleKeyDown}
           onKeyUp={this.handleKeyUp}
-          multiple={(this.props as any).shouldAllowMultiple}
+          multiple={this.props.shouldAllowMultiple}
           accept={this.acceptStr()}
           onChange={this.handleChange}
-          aria-describedby={this.hasMessages ? (this as any).messagesId : null}
+          aria-describedby={this.hasMessages ? this.messagesId : undefined}
           disabled={this.functionallyDisabled}
         />
         {this.hasMessages ? (
           <View display="block" margin="small 0 0">
             <FormFieldMessages
-              id={(this as any).messagesId}
-              messages={(this.props as any).messages}
+              id={this.messagesId}
+              messages={this.props.messages}
             />
           </View>
         ) : null}

package/src/FileDrop/props.ts

@@ -39,161 +39,176 @@ import type {
   OtherHTMLAttributes
 } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
-
-type FileDropOwnProps = {
-  id?: string
-  renderLabel: ((...args: any[]) => any) | React.ReactNode
-  accept?: string | string[]
-  messages?: FormMessage[]
-  onClick?: (...args: any[]) => any
-  onDrop?: (...args: any[]) => any
-  onDropAccepted?: (...args: any[]) => any
-  onDropRejected?: (...args: any[]) => any
-  onDragEnter?: (...args: any[]) => any
-  onDragOver?: (...args: any[]) => any
-  onDragLeave?: (...args: any[]) => any
-  shouldEnablePreview?: boolean
-  shouldAllowMultiple?: boolean
-  shouldAllowRepeats?: boolean
-  maxSize?: number
-  minSize?: number
-  interaction?: 'enabled' | 'disabled' | 'readonly'
-  display?: 'block' | 'inline-block'
-  height?: string | number
-  width?: string | number
-  maxWidth?: string | number
-  minWidth?: string | number
-  margin?: Spacing
-}
-
-type FileDropState = {
+type RenderLabelProps = {
   isDragAccepted: boolean
   isDragRejected: boolean
-  isFocused: boolean
-  isFileBrowserDisplayed: boolean
+  interaction: boolean
 }
-
-type FileDropStyleProps = {
-  functionallyDisabled: boolean
-  visuallyDisabled: boolean
-  dragRejected: boolean
-  dragAccepted: boolean
-}
-
-type PropKeys = keyof FileDropOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type FileDropProps = FileDropOwnProps &
-  WithStyleProps<FileDropTheme, FileDropStyle> &
-  OtherHTMLAttributes<FileDropOwnProps> & WithDeterministicIdProps
-
-type FileDropStyle = ComponentStyle<
-  'fileDropLabel' | 'fileDropInput' | 'fileDropLabelContent' | 'fileDropLayout'
->
-
-const propTypes: PropValidators<PropKeys> = {
+type FileDropOwnProps = {
   /**
    * The id of the input (to link it to its label for a11y)
    */
-  id: PropTypes.string,
+  id?: string
   /**
    * The content of FileDrop; can be a component or React node.
    * Components receive `isDragAccepted` and `isDragRejected` as props.
    */
-  renderLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+  renderLabel: ((props: RenderLabelProps) => React.ReactNode) | React.ReactNode
   /**
    * The mime media type/s or file extension/s allowed to be dropped inside
    */
-  accept: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string)
-  ]),
+  accept?: string | string[]
   /**
    * object with shape: `{
    * text: PropTypes.node,
    * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
    *   }`
    */
-  messages: PropTypes.arrayOf(FormPropTypes.message),
+  messages?: FormMessage[]
   /**
    * Called when clicking on drop area to select files to upload
    */
-  onClick: PropTypes.func,
+  onClick?: (e: React.MouseEvent) => void
   /**
    * Called when dropping files or when file dialog window exits successfully
    */
-  onDrop: PropTypes.func,
+  onDrop?: (
+    accepted: ArrayLike<DataTransferItem | File>,
+    rejected: ArrayLike<DataTransferItem | File>,
+    e: React.DragEvent
+  ) => void
   /**
    * Called when dropping allowed files
    */
-  onDropAccepted: PropTypes.func,
+  onDropAccepted?: (
+    accepted: ArrayLike<DataTransferItem | File>,
+    e: React.DragEvent | React.ChangeEvent
+  ) => void
   /**
    * Called when dropping rejected files
    */
-  onDropRejected: PropTypes.func,
+  onDropRejected?: (
+    rejected: ArrayLike<DataTransferItem | File>,
+    e: React.DragEvent | React.ChangeEvent
+  ) => void
   /**
    * Called when dragging files
    * and passing through FileDrop's content for the first time
    */
-  onDragEnter: PropTypes.func,
+  onDragEnter?: (e: React.DragEvent) => void
   /**
    * Called when dragging files and passing through FileDrop's content
    */
-  onDragOver: PropTypes.func,
+  onDragOver?: (e: React.DragEvent) => void
   /**
    * Called when dragging files and leaving FileDrop's content
    */
-  onDragLeave: PropTypes.func,
+  onDragLeave?: (e: React.DragEvent) => void
   /**
    * Flag to use window.URL.createObjectURL for each dropped file and pass it through file.preview
    */
-  shouldEnablePreview: PropTypes.bool,
+  shouldEnablePreview?: boolean
   /**
    * Flag to allow multiple files to drop at once
    */
-  shouldAllowMultiple: PropTypes.bool,
+  shouldAllowMultiple?: boolean
   /**
    * Flag to allow upload of the same file more than once
    */
-  shouldAllowRepeats: PropTypes.bool,
+  shouldAllowRepeats?: boolean
   /**
    * the maximum file size allowed
    */
-  maxSize: PropTypes.number,
+  maxSize?: number
   /**
    * the minimum file size allowed
    */
-  minSize: PropTypes.number,
+  minSize?: number
   /**
    * Specifies if interaction with the input is enabled, disabled, or readonly.
    */
-  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  interaction?: 'enabled' | 'disabled' | 'readonly'
   /**
    * Set the CSS `display` property on FileInput's outermost element
    */
-  display: PropTypes.oneOf(['block', 'inline-block']),
+  display?: 'block' | 'inline-block'
   /**
    * Set the CSS `height` property on FileInput's outermost element
    */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height?: string | number
   /**
    * Set the CSS `width` property on FileInput's outermost element
    */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width?: string | number
   /**
    * Set the CSS `maxWidth` property on FileInput's outermost element
    */
-  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  maxWidth?: string | number
   /**
    * Set the CSS `minWidth` property on FileInput's outermost element
    */
-  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minWidth?: string | number
   /**
    * Valid values are 0, none, auto, xxx-small, xx-small, x-small, small,
    * medium, large, x-large, xx-large. Apply these values via familiar
    * CSS-like shorthand. For example: margin="small auto large".
    */
+  margin?: Spacing
+}
+
+type FileDropState = {
+  isDragAccepted: boolean
+  isDragRejected: boolean
+  isFocused: boolean
+  isFileBrowserDisplayed: boolean
+}
+
+type FileDropStyleProps = {
+  functionallyDisabled: boolean
+  visuallyDisabled: boolean
+  dragRejected: boolean
+  dragAccepted: boolean
+}
+
+type PropKeys = keyof FileDropOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type FileDropProps = FileDropOwnProps &
+  WithStyleProps<FileDropTheme, FileDropStyle> &
+  OtherHTMLAttributes<FileDropOwnProps> &
+  WithDeterministicIdProps
+
+type FileDropStyle = ComponentStyle<
+  'fileDropLabel' | 'fileDropInput' | 'fileDropLabelContent' | 'fileDropLayout'
+>
+
+const propTypes: PropValidators<PropKeys> = {
+  id: PropTypes.string,
+  renderLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+  accept: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  messages: PropTypes.arrayOf(FormPropTypes.message),
+  onClick: PropTypes.func,
+  onDrop: PropTypes.func,
+  onDropAccepted: PropTypes.func,
+  onDropRejected: PropTypes.func,
+  onDragEnter: PropTypes.func,
+  onDragOver: PropTypes.func,
+  onDragLeave: PropTypes.func,
+  shouldEnablePreview: PropTypes.bool,
+  shouldAllowMultiple: PropTypes.bool,
+  shouldAllowRepeats: PropTypes.bool,
+  maxSize: PropTypes.number,
+  minSize: PropTypes.number,
+  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  display: PropTypes.oneOf(['block', 'inline-block']),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   margin: ThemeablePropTypes.spacing
 }
 

package/src/FileDrop/utils/accepts.ts

@@ -22,13 +22,13 @@
  * SOFTWARE.
  */
 
-function accepts(file: any, acceptProp: any) {
+function accepts(file: File, acceptProp: string | string[]) {
   if (file && acceptProp && file.type !== 'application/x-moz-file') {
     const acceptList = getAcceptList(acceptProp)
     const mimeType = file.type || ''
     const baseMimeType = mimeType.replace(/\/.*$/, '')
 
-    return acceptList.some((type: any) => {
+    return acceptList.some((type) => {
       if (type.charAt(0) === '.') {
         // type is an extension like .pdf
         if (!file.name) {
@@ -45,9 +45,9 @@ function accepts(file: any, acceptProp: any) {
   return true
 }
 
-function getAcceptList(accept: any) {
+function getAcceptList(accept: string | string[]) {
   const list = Array.isArray(accept) ? accept : accept.split(',')
-  return list.map((a: any) => a.trim().replace(/^\w+$/, '.$&'))
+  return list.map((a) => a.trim().replace(/^\w+$/, '.$&'))
 }
 
 export default accepts