I would like to put files into file type input and then in the class fetch and set. The getter looks like this and it works, but I have a problem with the setter because there is an error: "Property 'item' is missing in type 'File []' but required in type 'FileList'". I created an auxiliary interejs to retrieve specific properties.
interface IFile{
url: string;
name: string;
}
class File{
[x: string]: any;
get files(): File[] {
const input = (this.querySelector('[name="Input"]') as HTMLInputElement).files;
return input as any;
}
set files(value: File[]) {
(this.querySelector('[name="Input"]') as HTMLInputElement).files = value;
}
}
CodePudding user response:
You cannot name your class
File
. SinceFile
is an interface defined by TypeScript. (Not sure if you are trying to override the native type, which is something I wouldn't recommend). You should changeFile
to something else, eg.InputFile
, which would already be helpful.In the line:
const input = (this.querySelector('[name="Input"]') as HTMLInputElement).files;
The type of input
variable is FileList
.
FileList
is a superset of the typeFile
.Hence, you can assign
FileList
type toFile
in your getter.However, in your setter, you cannot assign a
File[]
toFileList
.
Changing the return type of your getter to FileList
and making corresponding changes in your setter should fix the problem.
Ultimately, your class could look something like:
class MyFile {
[x: string]: any;
get files(): FileList {
const input = (this.querySelector('[name="Input"]') as HTMLInputElement).files;
if(input === null) {
// handle null
throw Error();
}
return input;
}
set files(value: FileList) {
(this.querySelector('[name="Input"]') as HTMLInputElement).files = value;
}
}
I hope this helps!
CodePudding user response:
As far as I understood the Documentation, you seem to override the entire FileList thats stored in the HTMLInputElement.files property.
The property expects the new Value to be of a similar Type as FileList.
But it seems that your Definition of File[] misses the neccessary Property of item
.
But instead to try to recreate the FileList Type, i would recommend to use the same Types and Features as are native implemented.
I've linked you a reference, where a similar Issues were tackled and there your should find a suitable solution: Similar Issue