~NAXC~

File Content: `TaskFileUpload.js`

import React from "react";
import { FileUpload } from "primereact/fileupload";
import videoThumbail from "../../../assets/images/icons/filevideo-4.svg";
import removeIcon from '../../../assets/images/icons/removeFile.svg'
export default function TaskFileUpload({
  formData,
  onUpload,
  handleRemoveFile,
}) {
  return (
    <>
      <div className="uploads-comments__title">
        <h5 className="title">Your Files</h5>
      </div>
      <div className="file-upload">
        <FileUpload
          id="fileUpload"
          name={`demo[]`}
          onSelect={(event) => {
            onUpload(event);
          }}
          accept="image/jpg,image/png,image/jpeg,image/heif,video/*"
          customUpload
        />
        <div className="file-preview">
          {formData.file?.map((file, index) => (
            <div className="p-fileupload-row" key={index}>
              <img
                className="p-fileupload-file-thumbnail"
                src={
                  file.type?.startsWith("video")
                    ? videoThumbail
                    : file.objectURL
                }
                width="50"
                alt={file.name}
                loading="lazy"
              />
              <div className="p-fileupload-filename">{`${file.name}`}</div>

              <div className="cancel-btn">
                <button
                  className="p-button p-component p-button-icon-only p-button-text p-button-rounded p-button-danger"
                  type="button"
                  onClick={() => handleRemoveFile(index)}>
                  <img src={removeIcon} alt="" loading="lazy"/>
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}
File Content: TaskFileUpload.js

File Content: `TaskFileUpload.js`
