ຂ້າມໄປຫາເນື້ອຫາຫຼັກ

ຕົວຢ່າງພື້ນຖານ

ວິທີທີ່ງ່າຍທີ່ສຸດໃນການນຳໃຊ້ Dropup.

ການຕັ້ງຄ່າຂັ້ນຕ່ຳ​

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

function BasicUploader() {
  const { files, getDropProps, getInputProps } = useDropup();

  return (
    <div
      {...getDropProps()}
      style={{
        border: '2px dashed #ccc',
        borderRadius: 8,
        padding: 40,
        textAlign: 'center',
        cursor: 'pointer',
      }}
    >
      <input {...getInputProps()} />
      <p>ລາກໄຟລ໌ມາທີ່ນີ້ ຫຼືຄລິກເພື່ອເລືອກ</p>

      {files.length > 0 && (
        <ul style={{ listStyle: 'none', padding: 0, marginTop: 20 }}>
          {files.map(file => (
            <li key={file.id}>
              {file.name} ({(file.size / 1024).toFixed(1)} KB)
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

ກັບຟັງຊັນການອັບໂຫຼດ​

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

function BasicUploadWithSubmit() {
  const {
    files,
    actions,
    state,
    getDropProps,
    getInputProps,
  } = useDropup({
    upload: {
      url: '/api/upload',
      method: 'POST',
    },
  });

  return (
    <div>
      <div
        {...getDropProps()}
        style={{
          border: '2px dashed #ccc',
          borderRadius: 8,
          padding: 40,
          textAlign: 'center',
        }}
      >
        <input {...getInputProps()} />
        <p>ວາງໄຟລ໌ທີ່ນີ້ ຫຼືຄລິກເພື່ອເລືອກ</p>
      </div>

      {/* ລາຍການໄຟລ໌ */}
      {files.length > 0 && (
        <div style={{ marginTop: 20 }}>
          <h3>ໄຟລ໌ທີ່ເລືອກ:</h3>
          {files.map(file => (
            <div
              key={file.id}
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                padding: 10,
                borderBottom: '1px solid #eee',
              }}
            >
              <span>{file.name}</span>
              <span>{file.status}</span>
              <button onClick={() => actions.remove(file.id)}>ລຶບ</button>
            </div>
          ))}
        </div>
      )}

      {/* ປຸ່ມອັບໂຫຼດ */}
      <div style={{ marginTop: 20 }}>
        <button
          onClick={() => actions.upload()}
          disabled={files.length === 0 || state.isUploading}
        >
          {state.isUploading ? `ກຳລັງອັບໂຫຼດ... ${state.progress}%` : 'ອັບໂຫຼດທັງໝົດ'}
        </button>

        <button onClick={() => actions.reset()} style={{ marginLeft: 10 }}>
          ລ້າງທັງໝົດ
        </button>
      </div>
    </div>
  );
}

ການອັບໂຫຼດໄຟລ໌ດຽວ​

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

function SingleFileUploader() {
  const { files, getDropProps, getInputProps } = useDropup({
    multiple: false, // ອະນຸຍາດໄຟລ໌ດຽວເທົ່ານັ້ນ
    maxFiles: 1,
  });

  const file = files[0];

  return (
    <div {...getDropProps()} style={styles.dropzone}>
      <input {...getInputProps()} />
      {file ? (
        <p>ເລືອກແລ້ວ: {file.name}</p>
      ) : (
        <p>ວາງໄຟລ໌ທີ່ນີ້</p>
      )}
    </div>
  );
}

const styles = {
  dropzone: {
    border: '2px dashed #ccc',
    borderRadius: 8,
    padding: 40,
    textAlign: 'center' as const,
  },
};

ກັບການຈຳກັດປະເພດໄຟລ໌​

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

function ImageOnlyUploader() {
  const { files, state, getDropProps, getInputProps } = useDropup({
    accept: 'image/*',
    onValidationError: (errors) => {
      errors.forEach(({ file }) => {
        alert(`${file.name} ບໍ່ແມ່ນຮູບພາບທີ່ຖືກຕ້ອງ`);
      });
    },
  });

  return (
    <div
      {...getDropProps()}
      style={{
        ...styles.dropzone,
        borderColor: state.isDragReject ? 'red' : '#ccc',
        backgroundColor: state.isDragReject ? '#fff0f0' : 'white',
      }}
    >
      <input {...getInputProps()} />
      {state.isDragReject ? (
        <p style={{ color: 'red' }}>ຍອມຮັບສະເພາະຮູບພາບເທົ່ານັ້ນ!</p>
      ) : (
        <p>ວາງຮູບພາບທີ່ນີ້</p>
      )}
    </div>
  );
}

ກັບ Callbacks​

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

function UploaderWithCallbacks() {
  const { files, actions, getDropProps, getInputProps } = useDropup({
    upload: { url: '/api/upload' },

    onFilesAdded: (newFiles) => {
      console.log('ເພີ່ມໄຟລ໌:', newFiles.map(f => f.name));
    },

    onUploadStart: (file) => {
      console.log('ເລີ່ມ:', file.name);
    },

    onUploadProgress: (file, progress) => {
      console.log(`${file.name}: ${progress}%`);
    },

    onUploadComplete: (file, response) => {
      console.log('ສຳເລັດ:', file.name, file.uploadedUrl);
    },

    onUploadError: (file, error) => {
      console.error('ລົ້ມເຫຼວ:', file.name, error.message);
    },

    onAllComplete: (allFiles) => {
      const successful = allFiles.filter(f => f.status === 'complete');
      console.log(`ສຳເລັດ! ${successful.length}/${allFiles.length} ສຳເລັດ`);
    },
  });

  return (
    <div>
      <div {...getDropProps()} style={styles.dropzone}>
        <input {...getInputProps()} />
        <p>ວາງໄຟລ໌ທີ່ນີ້</p>
      </div>

      <button onClick={() => actions.upload()}>
        ອັບໂຫຼດ ({files.length} ໄຟລ໌)
      </button>
    </div>
  );
}

ປຸ່ມ Trigger ແຍກຕ່າງຫາກ​

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

function SeparateButtonUploader() {
  const {
    files,
    openFileDialog,
    getDropProps,
    getInputProps,
  } = useDropup();

  return (
    <div>
      {/* ພື້ນທີ່ວາງທີ່ຍັງຮັບການວາງໄດ້ */}
      <div
        {...getDropProps()}
        style={{
          border: '2px dashed #ccc',
          padding: 20,
          marginBottom: 10,
        }}
      >
        <input {...getInputProps()} />
        <p>ວາງໄຟລ໌ທີ່ນີ້</p>
      </div>

      {/* ປຸ່ມແຍກຕ່າງຫາກເພື່ອເປີດ dialog ເລືອກໄຟລ໌ */}
      <button onClick={openFileDialog}>
        ເລືອກໄຟລ໌
      </button>

      {files.length > 0 && (
        <p>ເລືອກແລ້ວ {files.length} ໄຟລ໌</p>
      )}
    </div>
  );
}

ອັບໂຫຼດອັດຕະໂນມັດ​

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

function AutoUploader() {
  const { files, getDropProps, getInputProps } = useDropup({
    upload: { url: '/api/upload' },
    autoUpload: true, // ໄຟລ໌ຈະອັບໂຫຼດອັດຕະໂນມັດເມື່ອເພີ່ມ
    onUploadComplete: (file) => {
      console.log('ອັບໂຫຼດແລ້ວ:', file.uploadedUrl);
    },
  });

  return (
    <div {...getDropProps()} style={styles.dropzone}>
      <input {...getInputProps()} />
      <p>ວາງໄຟລ໌ທີ່ນີ້ - ມັນຈະອັບໂຫຼດອັດຕະໂນມັດ!</p>

      {files.map(file => (
        <div key={file.id}>
          {file.name}:
          {file.status === 'uploading' && ` ${file.progress}%`}
          {file.status === 'complete' && ' ສຳເລັດ!'}
          {file.status === 'error' && ` ຂໍ້ຜິດພາດ: ${file.error?.message}`}
        </div>
      ))}
    </div>
  );
}

ຂັ້ນຕອນຕໍ່ໄປ​