As I develop a drag and drop interface, upon dropping a file, the native File is retrieved. To enhance this interface with additional information, I decided to explore various approaches.
In my initial attempt, I utilized:
interface AcceptedFile extends File {
acl: Acl,
disabled: boolean;
}
const toAcceptedFiles = (files: File[]): AcceptedFile[] => {
return files.map(file => {
return {
...file,
acl: Acl.Public,
disabled: false
}
});
}
However, I encountered an unexpected issue where the function toAcceptedFiles produced results containing only the preview key from the original File; all other essential keys such as blob and name were missing. Intriguingly, if I console.log the file within the toAcceptedFiles, all the necessary keys can still be seen.
On further exploration, I discovered that the following alternative interface functioned as intended:
interface AcceptedFile {
file: File,
acl: Acl,
disabled: boolean;
}
The perplexing question arises - why does extending the File lead to this unexpected behavior?