Breaking News: Grepper is joining You.com. Read the official announcement!

add a code that support removing of the file selected

ObiTech Invents answered on August 9, 2023 Popularity 1/10 Helpfulness 1/10

answer add a code that support removing of the file selected

add a code that support removing of the file selected

Comment

import React, { useState } from 'react';

const FileUpload: React.FC = () => {
  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (files) {
      setSelectedFiles([...selectedFiles, ...Array.from(files)]);
    }
  };

  const handleIconClick = () => {
    if (fileInputRef.current) {
      fileInputRef.current.click();
    }
  };

  const handleRemoveFile = (index: number) => {
    const updatedFiles = [...selectedFiles];
    updatedFiles.splice(index, 1);
    setSelectedFiles(updatedFiles);
  };

  const fileInputRef = React.createRef<HTMLInputElement>();

  return (
    <div>
      <input
        type="file"
        multiple
        style={{ display: 'none' }}
        ref={fileInputRef}
        onChange={handleFileChange}
      />
      <button onClick={handleIconClick}>Upload Files</button>
      <ul>
        {selectedFiles.map((file, index) => (
          <li key={index}>
            {file.name}{' '}
            <button onClick={() => handleRemoveFile(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FileUpload;

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: chat.openai.com

Tags: add file selected whatever

Link to this answer
Share Copy Link

Contributed on Aug 09 2023

ObiTech Invents

0 Answers Avg Quality 2/10

add a code that support removing of the file selected

Contents

More Related Answers

add a code that support removing of the file selected

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.