FileUpload

fileupload-1779354196315.tsx

'use client';

import React, { useState } from 'react';

interface File {
  name: string;
  size: number;
  progress: number;
}

const FileUpload = () => {
  const [dragOver, setDragOver] = useState(false);
  const [files, setFiles] = useState<File[]>([]);
  const [uploading, setUploading] = useState(false);

  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setDragOver(true);
  };

  const handleDragLeave = () => {
    setDragOver(false);
  };

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setDragOver(false);
    const newFiles = Array.from(e.dataTransfer.files).map((file) => ({
      name: file.name,
      size: file.size,
      progress: 0,
    }));
    setFiles((prevFiles) => [...prevFiles, ...newFiles]);
    setUploading(true);
    simulateUpload();
  };

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

  const simulateUpload = () => {
    const intervalId = setInterval(() => {
      setFiles((prevFiles) =>
        prevFiles.map((file, index) => {
          if (file.progress < 100) {
            return { ...file, progress: Math.min(file.progress + 10, 100) };
          }
          return file;
        })
      );
      if (prevFiles.every((file) => file.progress === 100)) {
        clearInterval(intervalId);
        setUploading(false);
      }
    }, 500);
  };

  const prevFiles = files;

  return (
    <div
      className={`flex flex-col items-center justify-center w-full h-full p-4 border-2 border-dashed ${
        dragOver ? 'border-gold' : 'border-zinc-500'
      } rounded-lg bg-zinc-950`}
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
    >
      {dragOver ? (
        <p className="text-gold">Drop files here</p>
      ) : (
        <p className="text-zinc-500">Drag and drop files or click to upload</p>
      )}
      <ul className="w-full mt-4">
        {files.map((file, index) => (
          <li
            key={index}
            className="flex justify-between items-center py-2 px-4 mb-2 bg-zinc-900 rounded-lg"
          >
            <span className="text-zinc-500">{file.name}</span>
            <span className="text-zinc-500">{file.size} bytes</span>
            <button
              className="text-gold hover:text-zinc-500 transition duration-300"
              onClick={() => handleRemoveFile(index)}
            >
              Remove
            </button>
            {uploading && (
              <div className="w-full h-2 bg-zinc-900 rounded-lg">
                <div
                  className="h-2 bg-gold rounded-lg"
                  style={{
                    width: `${file.progress}%`,
                    transition: 'width 0.5s',
                  }}
                />
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default FileUpload;

Component info

CategoryInputs & Forms

Frameworkreact

TierFREE

Copies0

About

Drag & drop file upload zone

More from Inputs & Forms

'use client';

import React, { useState } from 'react';

interface RangeSliderProps {
  min: number;
  max: number;
  defaultValue: [number, number];
}

const RangeSlider: React.FC<RangeSliderProps> = ({ min, max, defaultValue }) => {
  const [minVal

RangeSlider

Inputs & Forms

'use client';

import React, { useState } from 'react';

interface Color {
  hex: string;
}

interface Swatch {
  hex: string;
}

const ColorPicker = () => {
  const [color, setColor] = useState<Color>({ hex: '#C9A84C' });
  const [customColor, setCu

ColorPicker

Inputs & Forms

'use client';

import { useState, useEffect } from 'react';

interface Tag {
  id: number;
  name: string;
}

const TagInput = () => {
  const [tags, setTags] = useState<Tag[]>([]);
  const [inputValue, setInputValue] = useState('');
  const [suggest

TagInput

Inputs & Forms

import React, { useState } from 'react';

const OTPInput = () => {
  const [otp, setOtp] = useState(new Array(6).fill(''));
  const [activeIndex, setActiveIndex] = useState(0);

  const handleChange = (e, index) => {
    const value = e.target.value;

OTPInput

Inputs & Forms