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

பெரிய கோப்புகளை சிறிய துண்டுகளாகப் பிரித்து பதிவேற்றவும். இது இயக்குகிறது:

• சேவையக வரம்புகளை விட பெரிய கோப்புகளின் பதிவேற்றம்
• நெட்வொர்க் தோல்விகளுக்குப் பிறகு மீண்டும் தொடரக்கூடிய பதிவேற்றங்கள்
• சிறந்த முன்னேற்ற கண்காணிப்பு
• குறைக்கப்பட்ட நினைவக பயன்பாடு

அடிப்படை துண்டு பதிவேற்றம்

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

function ChunkedUploader() {
  const { files, actions, state, getDropProps, getInputProps } = useDropup({
    upload: createChunkedUploader({
      url: '/api/upload/chunk',
      chunkSize: 5 * 1024 * 1024, // 5MB துண்டுகள்
    }),
  });

  return (
    <div>
      <div {...getDropProps()} style={styles.dropzone}>
        <input {...getInputProps()} />
        <p>பெரிய கோப்புகளை இங்கே விடுங்கள் - அவை துண்டுகளாக பதிவேறும்</p>
      </div>

      {files.map(file => (
        <div key={file.id} style={styles.fileItem}>
          <span>{file.name}</span>
          <span>{(file.size / 1024 / 1024).toFixed(1)} MB</span>

          {file.status === 'uploading' && (
            <div style={styles.progressBar}>
              <div
                style={{
                  ...styles.progress,
                  width: `${file.progress}%`,
                }}
              />
            </div>
          )}

          <span>{file.status}</span>
        </div>
      ))}

      <button
        onClick={() => actions.upload()}
        disabled={state.isUploading}
      >
        பதிவேற்று
      </button>
    </div>
  );
}

const styles = {
  dropzone: {
    border: '2px dashed #ccc',
    borderRadius: 8,
    padding: 40,
    textAlign: 'center' as const,
    marginBottom: 20,
  },
  fileItem: {
    display: 'flex',
    alignItems: 'center',
    gap: 12,
    padding: 12,
    borderBottom: '1px solid #eee',
  },
  progressBar: {
    flex: 1,
    height: 8,
    backgroundColor: '#eee',
    borderRadius: 4,
    overflow: 'hidden',
  },
  progress: {
    height: '100%',
    backgroundColor: '#4caf50',
    transition: 'width 0.2s',
  },
};

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

createChunkedUploader({
  // தேவை
  url: '/api/upload/chunk',

  // விருப்பமான அமைப்புகள்
  chunkSize: 5 * 1024 * 1024,  // 5MB (இயல்புநிலை)
  concurrency: 3,              // இணை துண்டுகள் (இயல்புநிலை: 1)
  retries: 3,                  // தோல்வியுற்ற துண்டுகளை மீண்டும் முயற்சி (இயல்புநிலை: 3)

  // அனைத்து துண்டு கோரிக்கைகளுக்கான தலைப்புகள்
  headers: {
    'Authorization': 'Bearer token',
  },

  // தனிப்பயன் துண்டு மெட்டாடேட்டா
  getChunkMeta: (file, chunkIndex, totalChunks) => ({
    fileId: file.id,
    fileName: file.name,
    chunkIndex,
    totalChunks,
  }),
});

சேவையக-பக்க கையாளுதல்

உங்கள் சேவையகம் துண்டு பதிவேற்றங்களை கையாளி அவற்றை மீண்டும் இணைக்க வேண்டும்.

உதாரணம்: Node.js/Express

const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');

const app = express();
const upload = multer({ dest: 'chunks/' });

const uploadState = new Map();

app.post('/api/upload/chunk', upload.single('chunk'), (req, res) => {
  const { fileId, fileName, chunkIndex, totalChunks } = req.body;

  // துண்டு தகவலைச் சேமி
  if (!uploadState.has(fileId)) {
    uploadState.set(fileId, {
      fileName,
      totalChunks: parseInt(totalChunks),
      chunks: [],
    });
  }

  const state = uploadState.get(fileId);
  state.chunks.push({
    index: parseInt(chunkIndex),
    path: req.file.path,
  });

  // அனைத்து துண்டுகளும் பெறப்பட்டதா சரிபார்
  if (state.chunks.length === state.totalChunks) {
    // துண்டுகளை குறியீட்டால் வரிசைப்படுத்து
    state.chunks.sort((a, b) => a.index - b.index);

    // துண்டுகளை இணை
    const finalPath = path.join('uploads', fileName);
    const writeStream = fs.createWriteStream(finalPath);

    for (const chunk of state.chunks) {
      const data = fs.readFileSync(chunk.path);
      writeStream.write(data);
      fs.unlinkSync(chunk.path); // துண்டை சுத்தம் செய்
    }

    writeStream.end();
    uploadState.delete(fileId);

    return res.json({
      complete: true,
      url: `/uploads/${fileName}`,
    });
  }

  res.json({
    complete: false,
    received: state.chunks.length,
    total: state.totalChunks,
  });
});

tus நெறிமுறை

வலுவான மீண்டும் தொடரக்கூடிய பதிவேற்றங்களுக்கு, tus நெறிமுறையைப் பயன்படுத்தவும்:

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

function TusUploader() {
  const { files, actions, state, getDropProps, getInputProps } = useDropup({
    upload: createTusUploader({
      endpoint: 'https://tusd.tusdemo.net/files/',

      // விருப்பமான அமைப்புகள்
      chunkSize: 5 * 1024 * 1024,
      retryDelays: [0, 1000, 3000, 5000],

      // சேவையகத்திற்கான மெட்டாடேட்டா
      metadata: {
        filetype: 'file.type',
        filename: 'file.name',
      },

      // localStorage இலிருந்து மீண்டும் தொடங்கு
      storeFingerprintForResuming: true,
    }),

    onUploadComplete: (file) => {
      console.log('tus பதிவேற்றம் முடிந்தது:', file.uploadedUrl);
    },
  });

  return (
    <div>
      <div {...getDropProps()} style={styles.dropzone}>
        <input {...getInputProps()} />
        <p>மீண்டும் தொடரக்கூடிய பதிவேற்றத்திற்கு கோப்புகளை விடுங்கள்</p>
      </div>

      {files.map(file => (
        <div key={file.id} style={styles.fileItem}>
          <span>{file.name}</span>
          <span>{file.progress}%</span>
          <span>{file.status}</span>
        </div>
      ))}

      <button onClick={() => actions.upload()}>
        பதிவேற்று
      </button>
    </div>
  );
}

இடைநிறுத்தி மீண்டும் தொடங்கு

துண்டு பதிவேற்றங்களுடன், நீங்கள் இடைநிறுத்தி மீண்டும் தொடங்கலாம்:

function PausableUploader() {
  const { files, actions, getDropProps, getInputProps } = useDropup({
    upload: createChunkedUploader({
      url: '/api/upload/chunk',
    }),
  });

  return (
    <div>
      <div {...getDropProps()}>
        <input {...getInputProps()} />
        <p>கோப்புகளை இங்கே விடுங்கள்</p>
      </div>

      {files.map(file => (
        <div key={file.id}>
          <span>{file.name}</span>
          <span>{file.progress}%</span>
          <span>{file.status}</span>

          {file.status === 'uploading' && (
            <button onClick={() => actions.cancel(file.id)}>
              இடைநிறுத்து
            </button>
          )}

          {file.status === 'paused' && (
            <button onClick={() => actions.retry([file.id])}>
              மீண்டும் தொடங்கு
            </button>
          )}
        </div>
      ))}

      <button onClick={() => actions.upload()}>
        அனைத்தையும் தொடங்கு
      </button>
    </div>
  );
}

துண்டு அளவு பரிந்துரைகள்

கோப்பு அளவு	பரிந்துரைக்கப்பட்ட துண்டு அளவு
< 10 MB	துண்டாக்கம் தேவையில்லை
10-100 MB	5 MB
100 MB - 1 GB	10 MB
> 1 GB	20-50 MB

செயல்திறன்

பெரிய துண்டுகள் = குறைவான கோரிக்கைகள், ஆனால் தோல்வியில் நீண்ட மீட்பு. சிறிய துண்டுகள் = அதிக மேலதிகச் செலவு, ஆனால் சிறந்த மீண்டும் தொடரும் தன்மை.