File Upload - Proxy Problem

Plasmic Studio Questions
1

Hello,

My goal is to create a custom component that allows file uploads.
Here is my code

interface FileUploadProps {
  onChange?(value: File[]): void;
  className?: string;
  children: ReactNode;
}

export function FileUpload({ onChange, className, children }: FileUploadProps) {
  const inputRef = useRef<HTMLInputElement>(null);

  function handleFilesChange(e: ChangeEvent<HTMLInputElement>) {
    const fileList = e.target.files;
    if (fileList && onChange) {
      onChange(Array.from(fileList));
    }
  }

  function handleClick() {
    inputRef.current?.click();
  }

  return (
    <>
      <input
        type="file"
        ref={inputRef}
        onChange={handleFilesChange}
        multiple
        hidden
      />
      <div onClick={handleClick} className={className}>
        {children}
      </div>
    </>
  );
}

However, when I want to use the updated files and saved in state, they are in a Proxy and I can’t access individual properties.

console
console913×306 17.7 KB

I want it to be my own custom component - I don’t want to use the built-in file upload. Am I doing something wrong, or could I do something differently?

Thank you for your help.