• Frontend Integration: useChunkedFileUpload
  • Parameters
  • Example Usage
• Getting Started

Frontend Integration: useChunkedFileUpload

useChunkedFileUpload is a custom hook designed for handling chunked file uploads in JavaScript applications.

Parameters

• chunkSize: (number) Size of each chunk in bytes (default: 1 MB).
• uploadDelay: (function) A function that returns a promise to introduce a delay between chunk uploads.
• initializeUpload: (function) Initializes the upload process and returns a unique file name.
• uploadChunk: (function) Handles the upload of each chunk.
• finalizeUpload: (function) Called when the upload is complete.
• reportProgress: (function) Reports upload progress as a percentage.
• handleError: (function) Handles errors during the upload process.

Example Usage

const { startUpload } = useChunkedFileUpload({
    initializeUpload: async (fileName) => {
        const response = await fetch('/upload/start', {
            method: 'POST',
            body: JSON.stringify({ fileName }),
            headers: { 'Content-Type': 'application/json' }
        });
        return await response.json(); // Return the unique file name
    },
    uploadChunk: async (uniqueFileName, chunkData, chunkIndex) => {
        const formData = new FormData();
        formData.append('fileName', uniqueFileName);
        formData.append('file', chunkData);
        formData.append('index', chunkIndex);
        
        await fetch('/upload', {
            method: 'POST',
            body: formData
        });
    },
    finalizeUpload: async (uniqueFileName) => {
        await fetch('/upload/complete', {
            method: 'POST',
            body: JSON.stringify({ fileName: uniqueFileName }),
            headers: { 'Content-Type': 'application/json' }
        });
    },
    reportProgress: (progress) => {
        console.log(`Upload progress: ${progress}%`);
    },
    handleError: (error) => {
        console.error(`Upload error: ${error}`);
    }
});

// Attach an event listener to a file input
document.getElementById('fileInput').addEventListener('change', (event) => {
    const file = event.target.files[0];
    if (file) {
        startUpload(file).then(() => {
            console.log('Upload complete!');
        }).catch((error) => {
            console.error('Upload failed:', error);
        });
    }
});

Getting Started

1. Clone the Repository: Integrate the FluxFile system into your project.
2. Implement a Storage Provider: Create your storage provider to work with your chosen storage backend.
3. Register Services: Register the necessary services in your application setup.
4. Set Up API Endpoints: Utilize the provided API endpoints for handling uploads.