DropZone

dropzone-1779394643018.tsx

'use client'
import { useState } from 'react'

export default function DropZone({ accept = ['image/*'], maxSize = 5 }) {
  const [files, setFiles] = useState([])
  const [drag, setDrag] = useState(false)
  const handleDrop = (e) => {
    e.preventDefault(); setDrag(false)
    const dropped = Array.from(e.dataTransfer.files)
    const valid = dropped.filter(f => f.size <= maxSize * 1024 * 1024)
    setFiles(prev => [...prev, ...valid.map(f => ({ name:f.name, size:f.size, url:URL.createObjectURL(f), type:f.type }))])
  }
  const remove = (i) => setFiles(f => f.filter((_,j)=>j!==i))
  const isImg = (type) => type.startsWith('image/')
  const fmt = (b) => b < 1048576 ? (b/1024).toFixed(1)+'KB' : (b/1048576).toFixed(1)+'MB'
  return (
    <div style={{ maxWidth:'400px' }}>
      <div
        onDragOver={e=>{e.preventDefault();setDrag(true)}}
        onDragLeave={()=>setDrag(false)}
        onDrop={handleDrop}
        style={{
          border:'2px dashed '+(drag?'#6d28d9':'#cbd5e1'),
          borderRadius:'16px', padding:'32px 20px', textAlign:'center',
          background:drag?'#faf5ff':'#fafbfc', transition:'all 0.2s', cursor:'pointer',
        }}
      >
        <div style={{ fontSize:'40px', marginBottom:'10px' }}>{drag?'🎯':'📂'}</div>
        <p style={{ margin:'0 0 6px', fontWeight:600, color:'#374151', fontSize:'15px' }}>
          {drag ? 'Release to upload' : 'Drag & drop files here'}
        </p>
        <p style={{ margin:0, fontSize:'12px', color:'#94a3b8' }}>Max {maxSize}MB per file</p>
      </div>
      {files.length > 0 && (
        <div style={{ marginTop:'12px', display:'flex', flexWrap:'wrap', gap:'10px' }}>
          {files.map((f, i) => (
            <div key={i} style={{
              position:'relative', borderRadius:'10px', overflow:'hidden',
              border:'1px solid #e2e8f0', width:'90px',
            }}>
              {isImg(f.type) ? (
                <img src={f.url} alt={f.name} style={{ width:'100%', height:'70px', objectFit:'cover', display:'block' }}/>
              ) : (
                <div style={{ height:'70px', background:'#f0f4ff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:'28px' }}>📄</div>
              )}
              <div style={{ padding:'4px 6px', fontSize:'10px', color:'#64748b', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{fmt(f.size)}</div>
              <button onClick={()=>remove(i)} style={{
                position:'absolute', top:'4px', right:'4px', background:'rgba(0,0,0,0.6)',
                color:'#fff', border:'none', borderRadius:'50%', width:'18px', height:'18px',
                cursor:'pointer', fontSize:'12px', display:'flex', alignItems:'center', justifyContent:'center',
              }}>×</button>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

Component info

CategoryInputs & Forms

Frameworkreact

TierFREE

Copies0

About

Advanced drag-and-drop zone with file type filtering and preview

More from 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

'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[]

FileUpload

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

'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