tus Protocol

tus रिज्यूमेबल फ़ाइल अपलोड के लिए एक ओपन प्रोटोकॉल है। विश्वसनीय अपलोड के लिए इसका उपयोग करें जो नेटवर्क व्यवधानों से बच सकते हैं।

tus क्यों?

• रिज्यूमेबल: नेटवर्क विफलताओं के बाद अपलोड जारी रखें
• कुशल: शुरुआत से नहीं, बल्कि जहां छोड़ा था वहां से फिर शुरू करें
• मानकीकृत: कई सर्वर कार्यान्वयनों के साथ अच्छी तरह से परिभाषित प्रोटोकॉल
• चंक्ड: स्वचालित रूप से बड़ी फ़ाइलों को संभालता है

इंस्टॉलेशन

npm install @samithahansaka/dropup tus-js-client

tus-js-client एक peer dependency है।

बुनियादी उपयोग

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/',
    }),

    onUploadComplete: (file) => {
      console.log('अपलोड पूर्ण:', 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>
  );
}

कॉन्फ़िगरेशन विकल्प

createTusUploader({
  // आवश्यक
  endpoint: 'https://your-tus-server.com/files/',

  // चंक आकार (डिफ़ॉल्ट: Infinity = कोई चंकिंग नहीं)
  chunkSize: 5 * 1024 * 1024,  // 5MB चंक्स

  // रिट्राई कॉन्फ़िगरेशन
  retryDelays: [0, 1000, 3000, 5000],  // 0s, 1s, 3s, 5s के बाद पुनः प्रयास

  // सभी अनुरोधों के लिए हेडर
  headers: {
    'Authorization': 'Bearer token',
  },

  // सर्वर को भेजा गया मेटाडेटा
  metadata: {
    filename: 'file.name',
    filetype: 'file.type',
    // कस्टम मेटाडेटा जोड़ें
    userId: 'user123',
  },

  // localStorage के माध्यम से रिज्यूमेबिलिटी सक्षम करें
  storeFingerprintForResuming: true,

  // सफल अपलोड के बाद फिंगरप्रिंट हटाएं
  removeFingerprintOnSuccess: true,

  // समानांतर अपलोड
  parallelUploads: 3,
});

पिछले अपलोड फिर से शुरू करें

tus बाधित अपलोड को फिर से शुरू कर सकता है:

const { files, actions } = useDropup({
  upload: createTusUploader({
    endpoint: 'https://your-tus-server.com/files/',

    // फिर से शुरू करने के लिए अपलोड URLs संग्रहीत करें
    storeFingerprintForResuming: true,

    // वैकल्पिक: कस्टम स्टोरेज कुंजी
    urlStorageKey: 'my-app-tus-uploads',

    onShouldRetry: (error, retryAttempt) => {
      // कस्टम रिट्राई लॉजिक
      if (error.message.includes('network')) {
        return retryAttempt < 5;
      }
      return false;
    },
  }),
});

// फ़ाइलों को स्वचालित रूप से फिर से जोड़े जाने पर फिर से शुरू किया जा सकता है
// या रिट्राई के साथ मैन्युअल रूप से:
actions.retry(['file-id']);

प्रगति ट्रैकिंग

function TusWithProgress() {
  const { files, actions, getDropProps, getInputProps } = useDropup({
    upload: createTusUploader({
      endpoint: 'https://your-tus-server.com/files/',
    }),

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

    onUploadStart: (file) => {
      console.log(`अपलोड शुरू हो रहा है: ${file.name}`);
    },

    onUploadComplete: (file) => {
      console.log(`पूर्ण: ${file.uploadedUrl}`);
    },
  });

  return (
    <div>
      <div {...getDropProps()}>
        <input {...getInputProps()} />
        <p>फ़ाइलें यहां छोड़ें</p>
      </div>

      {files.map(file => (
        <div key={file.id}>
          <span>{file.name}</span>
          {file.status === 'uploading' && (
            <div style={styles.progressBar}>
              <div
                style={{
                  ...styles.progress,
                  width: `${file.progress}%`,
                }}
              />
            </div>
          )}
          <span>{file.status}</span>
        </div>
      ))}
    </div>
  );
}

रोकें और फिर से शुरू करें

function PausableUploader() {
  const { files, actions, getDropProps, getInputProps } = useDropup({
    upload: createTusUploader({
      endpoint: 'https://your-tus-server.com/files/',
      storeFingerprintForResuming: true,
    }),
  });

  return (
    <div>
      <div {...getDropProps()}>
        <input {...getInputProps()} />
        <p>फ़ाइलें यहां छोड़ें</p>
      </div>

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

          {file.status === 'uploading' && (
            <button onClick={() => actions.cancel(file.id)}>
              रोकें
            </button>
          )}

          {file.status === 'paused' && (
            <button onClick={() => actions.retry([file.id])}>
              फिर से शुरू करें
            </button>
          )}

          {file.status === 'error' && (
            <button onClick={() => actions.retry([file.id])}>
              पुनः प्रयास करें
            </button>
          )}
        </div>
      ))}

      <button onClick={() => actions.upload()}>
        सभी प्रारंभ करें
      </button>
    </div>
  );
}

सर्वर सेटअप

tusd (आधिकारिक सर्वर)

# tusd इंस्टॉल करें
go install github.com/tus/tusd/cmd/tusd@latest

# डिफ़ॉल्ट विकल्पों के साथ चलाएं
tusd -upload-dir=/uploads

# S3 स्टोरेज के साथ चलाएं
tusd -s3-bucket=my-bucket -s3-endpoint=https://s3.amazonaws.com

Node.js (tus-node-server)

const { Server } = require('@tus/server');
const { FileStore } = require('@tus/file-store');

const server = new Server({
  path: '/files',
  datastore: new FileStore({ directory: './uploads' }),
});

// Express के साथ
app.all('/files/*', server.handle.bind(server));

कस्टम मेटाडेटा हैंडलिंग

// सर्वर-साइड: मेटाडेटा एक्सेस करें
const server = new Server({
  path: '/files',
  datastore: new FileStore({ directory: './uploads' }),
  onUploadCreate: async (req, res, upload) => {
    // क्लाइंट से भेजे गए मेटाडेटा को एक्सेस करें
    console.log(upload.metadata);
    // { filename: 'photo.jpg', filetype: 'image/jpeg', userId: 'user123' }
  },
  onUploadFinish: async (req, res, upload) => {
    // पूर्ण किए गए अपलोड को प्रोसेस करें
    console.log('अपलोड पूर्ण:', upload.id);
  },
});

tus एक्सटेंशन

Dropup का tus एकीकरण इन tus एक्सटेंशन का समर्थन करता है:

एक्सटेंशन	विवरण
Creation	नए अपलोड बनाएं
Termination	अपलोड रद्द करें
Checksum	अखंडता सत्यापित करें
Concatenation	समानांतर अपलोड
Expiration	स्वतः-सफाई

त्रुटि हैंडलिंग

const { files, actions } = useDropup({
  upload: createTusUploader({
    endpoint: 'https://your-tus-server.com/files/',
    retryDelays: [0, 1000, 3000, 5000, 10000],
  }),

  onUploadError: (file, error) => {
    if (error.code === 'TUS_OFFLINE') {
      console.log('नेटवर्क ऑफ़लाइन, कनेक्ट होने पर फिर से शुरू होगा');
    } else if (error.code === 'TUS_EXPIRED') {
      console.log('अपलोड समाप्त हो गया, नया शुरू कर रहे हैं');
      actions.retry([file.id]);
    } else {
      console.error('अपलोड विफल:', error.message);
    }
  },
});

बड़ी फ़ाइल अपलोड

tus बड़ी फ़ाइलों के लिए आदर्श है:

function LargeFileUploader() {
  const { files, actions, getDropProps, getInputProps } = useDropup({
    maxSize: 10 * 1024 * 1024 * 1024, // 10GB सीमा

    upload: createTusUploader({
      endpoint: 'https://your-tus-server.com/files/',
      chunkSize: 50 * 1024 * 1024, // 50MB चंक्स
      retryDelays: [0, 3000, 5000, 10000, 20000],
      storeFingerprintForResuming: true,
    }),

    onUploadProgress: (file, progress) => {
      // बड़ी फ़ाइलों के लिए विस्तृत प्रगति दिखाएं
      const uploadedMB = (file.size * progress / 100 / 1024 / 1024).toFixed(0);
      const totalMB = (file.size / 1024 / 1024).toFixed(0);
      console.log(`${uploadedMB}MB / ${totalMB}MB`);
    },
  });

  return (
    <div {...getDropProps()}>
      <input {...getInputProps()} />
      <p>बड़ी फ़ाइलें अपलोड करें (10GB तक)</p>
    </div>
  );
}

तुलना: tus बनाम Chunked Upload

सुविधा	tus	Custom Chunked
रिज्यूमेबिलिटी	बिल्ट-इन	मैन्युअल
सर्वर समर्थन	कई विकल्प	कस्टम
प्रोटोकॉल ओवरहेड	अधिक	कम
कॉन्फ़िगरेशन	मानकीकृत	लचीला
सर्वोत्तम के लिए	बड़ी फ़ाइलें, अविश्वसनीय नेटवर्क	सरल अपलोड