பல பதிவேற்றிகள்

ஒரே பக்கத்தில் பல சுயாதீன பதிவேற்ற நிகழ்வுகளைப் பயன்படுத்தவும்.

தனி பதிவேற்ற மண்டலங்கள்

import { useDropup } from '@samithahansaka/dropup';

function MultipleUploadZones() {
  // சுயவிவரப் படம் பதிவேற்றி
  const profilePic = useDropup({
    accept: 'image/*',
    maxFiles: 1,
    multiple: false,
    upload: { url: '/api/upload/profile' },
  });

  // அட்டைப் படம் பதிவேற்றி
  const coverPhoto = useDropup({
    accept: 'image/*',
    maxFiles: 1,
    multiple: false,
    maxWidth: 1920,
    maxHeight: 1080,
    upload: { url: '/api/upload/cover' },
  });

  // ஆவணங்கள் பதிவேற்றி
  const documents = useDropup({
    accept: '.pdf,.doc,.docx',
    maxFiles: 10,
    maxSize: 10 * 1024 * 1024,
    upload: { url: '/api/upload/documents' },
  });

  return (
    <div style={styles.container}>
      {/* சுயவிவரப் படம் */}
      <div style={styles.section}>
        <h3>சுயவிவரப் படம்</h3>
        <div
          {...profilePic.getDropProps()}
          style={{
            ...styles.dropzone,
            ...styles.profileZone,
          }}
        >
          <input {...profilePic.getInputProps()} />
          {profilePic.files[0]?.preview ? (
            <img
              src={profilePic.files[0].preview}
              alt="சுயவிவரம்"
              style={styles.profilePreview}
            />
          ) : (
            <span>சுயவிவரப் படத்தை விடுங்கள்</span>
          )}
        </div>
      </div>

      {/* அட்டைப் படம் */}
      <div style={styles.section}>
        <h3>அட்டைப் படம்</h3>
        <div
          {...coverPhoto.getDropProps()}
          style={{
            ...styles.dropzone,
            ...styles.coverZone,
          }}
        >
          <input {...coverPhoto.getInputProps()} />
          {coverPhoto.files[0]?.preview ? (
            <img
              src={coverPhoto.files[0].preview}
              alt="அட்டை"
              style={styles.coverPreview}
            />
          ) : (
            <span>அட்டைப் படத்தை விடுங்கள் (அதிகபட்சம் 1920x1080)</span>
          )}
        </div>
      </div>

      {/* ஆவணங்கள் */}
      <div style={styles.section}>
        <h3>ஆவணங்கள்</h3>
        <div
          {...documents.getDropProps()}
          style={styles.dropzone}
        >
          <input {...documents.getInputProps()} />
          <span>PDF கள் அல்லது Word ஆவணங்களை விடுங்கள் (அதிகபட்சம் 10)</span>
        </div>

        {documents.files.length > 0 && (
          <ul style={styles.fileList}>
            {documents.files.map(file => (
              <li key={file.id}>
                {file.name}
                <button onClick={() => documents.actions.remove(file.id)}>×</button>
              </li>
            ))}
          </ul>
        )}
      </div>

      {/* அனைத்தையும் பதிவேற்று பொத்தான் */}
      <button
        onClick={() => {
          profilePic.actions.upload();
          coverPhoto.actions.upload();
          documents.actions.upload();
        }}
        disabled={
          profilePic.state.isUploading ||
          coverPhoto.state.isUploading ||
          documents.state.isUploading
        }
        style={styles.uploadButton}
      >
        அனைத்தையும் பதிவேற்று
      </button>
    </div>
  );
}

const styles = {
  container: {
    maxWidth: 600,
    margin: '0 auto',
  },
  section: {
    marginBottom: 30,
  },
  dropzone: {
    border: '2px dashed #ccc',
    borderRadius: 8,
    padding: 20,
    textAlign: 'center' as const,
    cursor: 'pointer',
  },
  profileZone: {
    width: 150,
    height: 150,
    borderRadius: '50%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  profilePreview: {
    width: '100%',
    height: '100%',
    objectFit: 'cover' as const,
  },
  coverZone: {
    height: 200,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  coverPreview: {
    width: '100%',
    height: '100%',
    objectFit: 'cover' as const,
  },
  fileList: {
    listStyle: 'none',
    padding: 0,
    marginTop: 10,
  },
  uploadButton: {
    width: '100%',
    padding: 16,
    fontSize: 16,
    backgroundColor: '#2196f3',
    color: 'white',
    border: 'none',
    borderRadius: 8,
    cursor: 'pointer',
  },
};

வகைப்படுத்தப்பட்ட பதிவேற்றங்கள்

import { useDropup } from '@samithahansaka/dropup';
import { useState } from 'react';

type Category = 'images' | 'videos' | 'documents';

function CategorizedUploader() {
  const [activeCategory, setActiveCategory] = useState<Category>('images');

  const uploaders = {
    images: useDropup({
      accept: 'image/*',
      upload: { url: '/api/upload/images' },
    }),
    videos: useDropup({
      accept: 'video/*',
      maxSize: 100 * 1024 * 1024, // 100MB
      upload: { url: '/api/upload/videos' },
    }),
    documents: useDropup({
      accept: '.pdf,.doc,.docx,.xls,.xlsx',
      upload: { url: '/api/upload/documents' },
    }),
  };

  const current = uploaders[activeCategory];

  const getCounts = () => ({
    images: uploaders.images.files.length,
    videos: uploaders.videos.files.length,
    documents: uploaders.documents.files.length,
  });

  const counts = getCounts();

  return (
    <div style={styles.container}>
      {/* வகை தாவல்கள் */}
      <div style={styles.tabs}>
        {(['images', 'videos', 'documents'] as Category[]).map(cat => (
          <button
            key={cat}
            onClick={() => setActiveCategory(cat)}
            style={{
              ...styles.tab,
              ...(activeCategory === cat ? styles.activeTab : {}),
            }}
          >
            {cat === 'images' ? 'படங்கள்' : cat === 'videos' ? 'வீடியோக்கள்' : 'ஆவணங்கள்'}
            {counts[cat] > 0 && (
              <span style={styles.badge}>{counts[cat]}</span>
            )}
          </button>
        ))}
      </div>

      {/* விடு மண்டலம் */}
      <div
        {...current.getDropProps()}
        style={{
          ...styles.dropzone,
          borderColor: current.state.isDragging ? '#2196f3' : '#ccc',
        }}
      >
        <input {...current.getInputProps()} />
        <p>{activeCategory === 'images' ? 'படங்களை' : activeCategory === 'videos' ? 'வீடியோக்களை' : 'ஆவணங்களை'} இங்கே விடுங்கள்</p>
      </div>

      {/* கோப்பு பட்டியல் */}
      <div style={styles.fileList}>
        {current.files.map(file => (
          <div key={file.id} style={styles.fileItem}>
            {file.preview && (
              <img src={file.preview} alt="" style={styles.thumb} />
            )}
            <span style={styles.fileName}>{file.name}</span>
            <span style={styles.status}>{file.status}</span>
            <button onClick={() => current.actions.remove(file.id)}>×</button>
          </div>
        ))}
      </div>

      {/* செயல்கள் */}
      <div style={styles.actions}>
        <button
          onClick={() => current.actions.upload()}
          disabled={current.state.isUploading || current.files.length === 0}
        >
          {activeCategory === 'images' ? 'படங்களை' : activeCategory === 'videos' ? 'வீடியோக்களை' : 'ஆவணங்களை'} பதிவேற்று
        </button>
        <button
          onClick={() => {
            Object.values(uploaders).forEach(u => u.actions.upload());
          }}
        >
          அனைத்து வகைகளையும் பதிவேற்று
        </button>
      </div>
    </div>
  );
}

const styles = {
  container: {
    maxWidth: 600,
    margin: '0 auto',
  },
  tabs: {
    display: 'flex',
    gap: 8,
    marginBottom: 20,
  },
  tab: {
    padding: '10px 20px',
    border: '1px solid #ccc',
    backgroundColor: 'white',
    cursor: 'pointer',
    borderRadius: 8,
    display: 'flex',
    alignItems: 'center',
    gap: 8,
  },
  activeTab: {
    backgroundColor: '#2196f3',
    color: 'white',
    borderColor: '#2196f3',
  },
  badge: {
    backgroundColor: 'rgba(0,0,0,0.2)',
    padding: '2px 8px',
    borderRadius: 10,
    fontSize: 12,
  },
  dropzone: {
    border: '2px dashed',
    borderRadius: 8,
    padding: 40,
    textAlign: 'center' as const,
    marginBottom: 20,
  },
  fileList: {
    marginBottom: 20,
  },
  fileItem: {
    display: 'flex',
    alignItems: 'center',
    gap: 12,
    padding: 8,
    borderBottom: '1px solid #eee',
  },
  thumb: {
    width: 40,
    height: 40,
    objectFit: 'cover' as const,
    borderRadius: 4,
  },
  fileName: {
    flex: 1,
  },
  status: {
    color: '#666',
    fontSize: 12,
  },
  actions: {
    display: 'flex',
    gap: 12,
  },
};

பல பதிவேற்றங்களுடன் படிவம்

import { useDropup } from '@samithahansaka/dropup';
import { useState } from 'react';

function ProductForm() {
  const [formData, setFormData] = useState({
    name: '',
    description: '',
    price: '',
  });

  const mainImage = useDropup({
    accept: 'image/*',
    maxFiles: 1,
    multiple: false,
  });

  const gallery = useDropup({
    accept: 'image/*',
    maxFiles: 5,
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    // முதலில் படங்களைப் பதிவேற்றவும்
    await Promise.all([
      mainImage.actions.upload(),
      gallery.actions.upload(),
    ]);

    // பின்னர் பதிவேற்றப்பட்ட URL களுடன் படிவத்தைச் சமர்ப்பிக்கவும்
    const productData = {
      ...formData,
      mainImage: mainImage.files[0]?.uploadedUrl,
      gallery: gallery.files.map(f => f.uploadedUrl).filter(Boolean),
    };

    await fetch('/api/products', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(productData),
    });
  };

  return (
    <form onSubmit={handleSubmit} style={styles.form}>
      <h2>பொருளைச் சேர்</h2>

      {/* உரை புலங்கள் */}
      <div style={styles.field}>
        <label>பொருள் பெயர்</label>
        <input
          type="text"
          value={formData.name}
          onChange={e => setFormData(d => ({ ...d, name: e.target.value }))}
          style={styles.input}
        />
      </div>

      <div style={styles.field}>
        <label>விளக்கம்</label>
        <textarea
          value={formData.description}
          onChange={e => setFormData(d => ({ ...d, description: e.target.value }))}
          style={styles.textarea}
        />
      </div>

      <div style={styles.field}>
        <label>விலை</label>
        <input
          type="number"
          value={formData.price}
          onChange={e => setFormData(d => ({ ...d, price: e.target.value }))}
          style={styles.input}
        />
      </div>

      {/* முக்கிய படம் */}
      <div style={styles.field}>
        <label>முக்கிய படம்</label>
        <div
          {...mainImage.getDropProps()}
          style={styles.imageUpload}
        >
          <input {...mainImage.getInputProps()} />
          {mainImage.files[0]?.preview ? (
            <img
              src={mainImage.files[0].preview}
              alt="முக்கிய"
              style={styles.previewImage}
            />
          ) : (
            <span>முக்கிய பொருள் படத்தை விடுங்கள்</span>
          )}
        </div>
      </div>

      {/* தொகுப்பு */}
      <div style={styles.field}>
        <label>தொகுப்பு படங்கள் (அதிகபட்சம் 5)</label>
        <div
          {...gallery.getDropProps()}
          style={styles.galleryUpload}
        >
          <input {...gallery.getInputProps()} />
          <span>தொகுப்பு படங்களை விடுங்கள்</span>
        </div>

        {gallery.files.length > 0 && (
          <div style={styles.galleryPreview}>
            {gallery.files.map(file => (
              <div key={file.id} style={styles.galleryItem}>
                {file.preview && (
                  <img src={file.preview} alt="" style={styles.galleryThumb} />
                )}
                <button
                  type="button"
                  onClick={() => gallery.actions.remove(file.id)}
                  style={styles.removeBtn}
                >
                  ×
                </button>
              </div>
            ))}
          </div>
        )}
      </div>

      <button
        type="submit"
        disabled={
          mainImage.state.isUploading ||
          gallery.state.isUploading
        }
        style={styles.submitBtn}
      >
        {mainImage.state.isUploading || gallery.state.isUploading
          ? 'பதிவேறுகிறது...'
          : 'பொருளைச் சேர்'}
      </button>
    </form>
  );
}

const styles = {
  form: {
    maxWidth: 500,
    margin: '0 auto',
  },
  field: {
    marginBottom: 20,
  },
  input: {
    width: '100%',
    padding: 10,
    border: '1px solid #ccc',
    borderRadius: 4,
  },
  textarea: {
    width: '100%',
    padding: 10,
    border: '1px solid #ccc',
    borderRadius: 4,
    minHeight: 100,
  },
  imageUpload: {
    border: '2px dashed #ccc',
    borderRadius: 8,
    padding: 20,
    textAlign: 'center' as const,
    height: 200,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  previewImage: {
    maxWidth: '100%',
    maxHeight: '100%',
    objectFit: 'contain' as const,
  },
  galleryUpload: {
    border: '2px dashed #ccc',
    borderRadius: 8,
    padding: 20,
    textAlign: 'center' as const,
  },
  galleryPreview: {
    display: 'flex',
    gap: 8,
    marginTop: 12,
    flexWrap: 'wrap' as const,
  },
  galleryItem: {
    position: 'relative' as const,
  },
  galleryThumb: {
    width: 80,
    height: 80,
    objectFit: 'cover' as const,
    borderRadius: 4,
  },
  removeBtn: {
    position: 'absolute' as const,
    top: -8,
    right: -8,
    width: 24,
    height: 24,
    border: 'none',
    borderRadius: '50%',
    backgroundColor: '#f44336',
    color: 'white',
    cursor: 'pointer',
  },
  submitBtn: {
    width: '100%',
    padding: 16,
    backgroundColor: '#2196f3',
    color: 'white',
    border: 'none',
    borderRadius: 8,
    fontSize: 16,
    cursor: 'pointer',
  },
};