Cannot extend typescript File

Question

I am creating a drag and drop interface. On drop, I get the native File. I need to extend this interface and include a few other information.

My first approach was using

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, the result of the function toAcceptedFiles, only contains the preview key from the File; all the blob, name, etc is gone. If I console.log the file inside the toAcceptedFiles, I can see all the keys.

The interesting thing is, the following interface works fine:

interface AcceptedFile {
   file: File,
   acl: Acl,
   disabled: boolean;
}

Why is extending the File breaking it?

I’m pretty sure that you likely cannot just copy over the native File object while also expecting it to continue working. It’s likely that it has some internal properties that you simply don’t have access to (e.g. an memory pointer where the data is stored or something browser-specific). So you should probably just wrap it in a custom object instead of copying it to a custom type. — poke
– poke, Commented Dec 17, 2017 at 11:31

arpl · Accepted Answer · 2017-12-17 02:36:56Z

1

Why the first approach won't work spread operator issues with property accessors (getters)

Your second approach is more reasonable since the native api will give back to you a File[] which you want to map to your type AcceptedFile.

const toAcceptedFiles = (files: File[]): AcceptedFile[] => {
   return files.map(file => {
      return {
         file: file,
         acl: Acl.Public,
         disabled: false
      }
   });
}

When toAcceptedFiles is called from the native API it will be populated with File[] and not AcceptedFile[].

interface AcceptedFile {
   file: File;
   acl: Acl,
   disabled: boolean;
}

edited Dec 17, 2017 at 2:36

answered Dec 17, 2017 at 0:23

arpl

3,6433 gold badges21 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Kousha Over a year ago

But that's not my problem. my onDrop function takes in an File[]. I then pass that into toAcceptedFiles but when it is converted, it has lost all the blob information about the file. My first approach does not even work

Kousha Over a year ago

I am pretty sure the spread operator ...file is breaking something

arpl Over a year ago

Did you make acl and disabled optional?

Kousha Over a year ago

Yes, again the problem is if I console log what I get from toAcceptedFiles, it only contains the properties acl, disabled, and preview. But console.logging the file inside the map function, also shows the size, type, name, etc

arpl Over a year ago

{...file} performs shallow copy of the actual File so most of the actual data will get lost.

|

Collectives™ on Stack Overflow

Cannot extend typescript File

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related