Handle Files

DragNdrop Component Documentation

Overview

The DragNdrop component provides a user interface for dragging and dropping files to upload. It also supports browsing files through a file input.

Key Features

1. Drag and Drop: Allows users to drag and drop files to upload.
2. Browse Files: Provides an option to browse and select files.
3. File List: Displays a list of selected files.
4. Remove Files: Allows users to remove files from the selection.

Dependencies

• React: For building the component.
• React Icons: For displaying upload, check, and clear icons.

State Management

The component uses useState for managing the selected files.

const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const selectedFiles = event.target.files;
  if (selectedFiles && selectedFiles.length > 0) {
    const newFiles = Array.from(selectedFiles);
    setFiles((prevFiles) => [...prevFiles, ...newFiles]);
  }
};

const handleDrop = (event: React.DragEvent<HTMLInputElement>) => {
  event.preventDefault();
  const droppedFiles = event.dataTransfer.files;
  if (droppedFiles.length > 0) {
    const newFiles: File[] = Array.from(droppedFiles);
    setFiles((prevFiles) => [...prevFiles, ...newFiles]);
  }
};

const handleRemoveFile = (index: number) => {
  setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
};

Rendering the Component

Displays the drag-and-drop area, the file input, and the list of selected files.

<section
  className="drag-drop mt-8 md:mt-8"
  style={{ width: width, height: height }}
>
  <div
    className={`document-uploader ${
      files.length > 0 ? "upload-box active" : "upload-box"
    }`}
    onDrop={handleDrop}
    onDragOver={(event) => event.preventDefault()}
  >
    <div className="upload-info">
      <AiOutlineCloudUpload />
      <div>
        <p>Drag and drop your files here</p>
        <p className="t hidden md:block">
          Limit 15MB per file. Supported files: {acceptedFiles.toUpperCase()}
        </p>
      </div>
    </div>
    <input
      type="file"
      hidden
      id="browse"
      onChange={handleFileChange}
      accept={acceptedFiles}
      multiple
    />
    <label htmlFor="browse" className="browse-btn hover:green underline">
      Browse files
    </label>
    {files.length > 0 && (
      <div className="file-list">
        <div className="file-list__container">
          {files.map((file, index) => (
            <div className="file-item" key={index}>
              <div className="file-info">
                <p>{file.name}</p>
              </div>
              <div className="file-actions">
                <MdClear onClick={() => handleRemoveFile(index)} />
              </div>
            </div>
          ))}
        </div>
      </div>
    )}
    {files.length > 0 && (
      <div className="success-file mt-5 md:mt-1">
        <AiOutlineCheckCircle style={{ color: "#6DC24B", marginRight: 1 }} />
        <p>{files.length} file(s) selected</p>
      </div>
    )}
  </div>
</section>

FileDisplay Component Documentation

Overview

The FileDisplay component displays a list of uploaded files. It categorizes files into images and documents, providing appropriate rendering for each type.

Key Features

1. Image Display: Renders images using the next/image component.
2. Document Links: Provides download links for documents.

Dependencies

• React: For building the component.
• next/image: For optimized image rendering.

State Management

No state management is required for this component.

Helper Functions

Utility functions to determine the file type based on the file extension.

const getFileExtension = (url: string) => {
  const decodedUrl = decodeURIComponent(url);
  const [cleanUrl] = decodedUrl.split("?");
  return cleanUrl.split(".").pop()?.toLowerCase();
};

const isImage = (url: string) => {
  const extension = getFileExtension(url);
  return imageExtensions.includes(extension ?? "");
};

const isDocument = (url: string) => {
  const extension = getFileExtension(url);
  return documentExtensions.includes(extension ?? "");
};

Rendering the Component

Displays images in a grid and documents as download links.

return (
  <div>
    <div className="mt-4 grid grid-cols-2 gap-4 md:mt-8 md:grid-cols-3">
      {files.filter(isImage).map((url, index) => (
        <div key={index} className="overflow-hidden rounded shadow">
          <Image
            src={url}
            alt={`${folderName} image ${index}`}
            width={500}
            height={300}
            layout="responsive"
          />
        </div>
      ))}
    </div>
    <div className="mt-6 md:mt-10">
      {files.filter(isDocument).map((url, index) => (
        <div key={index} className="mb-2">
          <a
            href={url}
            download
            target="_blank"
            className="text-blue-600 hover:text-blue-800 border-blue-600 hover:border-blue-800 block w-full rounded border px-3 py-2 underline transition-colors duration-200 ease-in-out"
          >
            {`${folderName} ${index + 1}`}
          </a>
        </div>
      ))}
    </div>
  </div>
);

Conclusion

This documentation provides an overview of the DragNdrop and FileDisplay components, their key features, state management, and critical functions. For further details, refer to the components’ source code in the project directory.