noblog

- input multiple FileList -

MyInputFileListComponent

const MyInputFileListComponent = () => {
  const [inputFiles, setInputFiles] = useState<FileList | null>(null);
  console.log('MyInputFileListComponent inputFiles', inputFiles);

  return <input type="file" onChange={(e) => setInputFiles(e.target.files)} />;
};

MyInputFileComponent

const MyInputFileComponent = () => {
  const [inputFiles, setInputFiles] = useState<File[]>([]);
  console.log('MyInputFileComponent inputFiles', inputFiles);

  return (
    <input
      type="file"
      onChange={(e) =>
        setInputFiles(e.target.files ? [...Array.from(e.target.files)] : [])
      }
    />
  );
};

MyInputMultiFileListComponent

const MyInputMultiFileListComponent = () => {
  const [inputFiles, setInputFiles] = useState<FileList | null>(null);
  console.log('MyInputMultiFileListComponent inputFiles', inputFiles);

  return (
    <input
      type="file"
      multiple
      onChange={(e) => setInputFiles(e.target.files)}
    />
  );
};

MyInputMultiFileListControlComponent

const MyInputMultiFileListControlComponent = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  const [inputFiles, setInputFiles] = useState<FileList | null>(null);
  console.log('MyInputMultiFileListControlComponent inputFiles', inputFiles);

  const selectedFileArray: File[] = useMemo(() => {
    return inputFiles ? [...Array.from(inputFiles)] : [];
  }, [inputFiles]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) return;
    if (!inputRef.current?.files) return;
    const newFileArray = [
      ...selectedFileArray,
      ...Array.from(e.target.files),
    ].filter(
      (file, index, self) =>
        self.findIndex((f) => f.name === file.name) === index // 重複を削除
    );
    const dt = new DataTransfer();
    newFileArray.forEach((file) => dt.items.add(file));
    inputRef.current.files = dt.files; // input内のFileListを更新
    setInputFiles(dt.files); // Reactのstateを更新
  };

  const handleDelete = (index: number) => {
    if (!inputRef.current?.files) return;
    const dt = new DataTransfer();
    selectedFileArray.forEach((file, i) => i !== index && dt.items.add(file));
    inputRef.current.files = dt.files; // input内のFileListを更新
    setInputFiles(dt.files); // Reactのstateを更新
  };