TypeScript and File upload types

Question

I am trying to set the types for a file upload, but I can not believe I have to define every single property on the file object

export type FileProps = {
  path: string 
  lastModified: number
  slice: () => void
  stream: () => void
  text: () => void
  arrayBuffer: ArrayBuffer
  name: string
  size: number
  type: string
}

const [files, setFiles] = useState<FileProps[]>([])

I upload a few files and store them on the state, but then when I try to add to the form

const formData = new FormData()

for (const file of files) {
  formData.append('files', file)
}

I get an error on file

Answer 1

If you just use File, then you get exactly what you want:

const [files, setFiles] = useState<File[]>([])

const formData = new FormData()

for (const file of files) {
  formData.append('files', file)
}

That should get you all the fields documented here: https://developer.mozilla.org/en-US/docs/Web/API/File

See playground