CODEWITHSUNDEEP
reactjstypescript
Dan
Dan

Reputation: 180

How to save in state few files?

I created Drag and Drop functionality and I need to save in state few files.

const [uploadFiles, setUploadFiles] = useState<any[]>([]);

const onDropHandler = async (e:React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    const files = Object.values(e.dataTransfer.files);
    setUploadFiles({ ...files, files });
  };

And I receive this error

Argument of type '{ files: File[]; length: number; toString(): string; toLocaleString(): string; pop(): File | undefined; push(...items: File[]): number; concat(...items: ConcatArray<File>[]): File[]; concat(...items: (File | ConcatArray<...>)[]): File[]; ... 27 more ...; [Symbol.unscopables](): { ...; }; }' is not assignable to parameter of type 'SetStateAction<any[]>'.

If I set new State , everything works. But so I remove previous state...

setUploadFiles(files);

Upvotes: 0

Views: 47

Answers (1)

Zohaib
Zohaib

Reputation: 117

let tempState =[...uploadFiles]
tempState.push(files)
setUploadFiles(tempState)

This way you can just push the next file to the next index of the state array. No previous file will be lost.

Upvotes: 1

Related Questions