javascript - TypeScript y tipos de carga de archivos

Estoy intentando establecer los tipos para una subida de archivos, pero no puedo creer que tenga que definir cada propiedad del objeto archivo

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[]>([])

Subo algunos archivos y los guardo en el estado, pero luego cuando intento agregarlos al formulario

const formData = new FormData()

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

Recibo un error en el archivo

Respuesta #1

Si solo usas File, entonces obtienes exactamente lo que quieres:

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

const formData = new FormData()

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

Eso debería proporcionarte todos los campos documentados aquí: https://developer.mozilla.org/en-US/docs/Web/API/File

Ver el patio de recreo

Respuesta #2

El segundo argumento del método FormData.append es Blob o USVString.

Habías mencionado en un comentario que toda la estructura necesita ser enviada al backend. Por lo tanto, necesitas convertir la instancia de FormData a un blob.

for (const file of files) {
  formData.append('files', new Blob([JSON.stringify(file)], {type : 'text/html'});)
}