DEV Community

Cover image for PART# 1 - Efficient File Transfer System Using HTTP for Large Datasets - Chunked Uploads
MD ARIFUL HAQUE
MD ARIFUL HAQUE

Posted on • Edited on

PART# 1 - Efficient File Transfer System Using HTTP for Large Datasets - Chunked Uploads

Let's break down the provided HTML, PHP, JavaScript, and CSS code for a chunked file upload dashboard part by part.

HTML Code:

Structure Overview:

  • Bootstrap for Layout: The code uses Bootstrap 4.5.2 to create a responsive layout with two main sections:
    • Chunked Uploads Section: For uploading large files in chunks.
    • Downloads Section: For listing and downloading previously uploaded files.

Key Elements:

  • <input type="file" id="fileInput" multiple>: This input allows multiple file selection.
  • <div id="progress-bar"></div>: Placeholder for displaying upload progress.
  • <div id="file-list"></div>: Placeholder to show selected files before uploading.
  • <button id="uploadBtn">Upload Files</button>: Button to initiate the upload process.
  • <button id="downloadBtn">Download Files</button>: Button to fetch and display the list of downloadable files.

PHP Code (chunked-file-upload.php):

This file handles the server-side logic of uploading files in chunks.

Key Parts:

  1. Receive Chunk and Metadata:

    • $_FILES['fileChunk']: Receives the chunk of the file being uploaded.
    • $_POST['chunkIndex']: The index of the current chunk.
    • $_POST['totalChunks']: The total number of chunks for the file.
  2. Chunk Storage:

    • $chunkFilePath = $targetDir . "$fileName.part$chunkIndex": Each chunk is saved as a separate .part file until the final file is assembled.
  3. Merging Chunks:

    • if ($chunkIndex == $totalChunks - 1): When the last chunk is uploaded, the script merges all chunks into the final file.
  4. Return Response:

    • A JSON response is returned to the client with the upload status and file details.

Why use chunking?

  • Large files are broken into smaller chunks to prevent timeouts and memory issues, making the upload process more reliable.

PHP Code (download.php):

Handles file downloads.

Key Parts:

  1. $_GET['file']: Retrieves the file name from the URL query string.
  2. File Path Construction:
    • $filePath = $targetDir . $fileName: Constructs the full path of the file.
  3. File Download:
    • readfile($filePath): Sends the file to the client as a downloadable stream.

Why use it?

  • Enables users to download files directly from the server. The server sends proper headers to prompt the browser to download the file rather than displaying it.

PHP Code (get_files.php):

Lists all uploaded files available for download.

Key Parts:

  1. scandir($targetDir): Scans the directory for all uploaded files.
  2. array_diff(): Filters out . and .. from the list of files.
  3. echo json_encode(array_values($files)): Returns the file list as a JSON array.

Why use it?

  • Provides a dynamic list of files available for download, which is updated on each request.

JavaScript Code (chunked-file-upload.js):

Handles the client-side logic of chunked file uploads and file downloads.

Key Parts:

  1. Drag and Drop:

    • preventDefaults(e): Prevents the browser from opening files when dropped.
    • handleDrop(e): Handles dropped files and displays them.
  2. Display File List:

    • displayFileList(files): Shows the selected files with their sizes and statuses in the file list before upload.
  3. Uploading Files in Chunks:

    • for (let file of files): Loops through each selected file.
    • const chunk = file.slice(start, end): Slices a portion of the file to upload as a chunk.
    • uploadChunk(): Recursively uploads each chunk, updates the progress bar and status, and merges the chunks on the server.
  4. Download Files:

    • $.ajax({url: './src/get_files.php'}): Sends an AJAX request to get the list of uploaded files.
    • downloadFile(fileName): Initiates the download by redirecting the user to download.php.

Why use chunked upload in JS?

  • For large files, uploading in smaller chunks ensures the process continues even if one chunk fails. It improves reliability by allowing chunk-by-chunk retries.

CSS Code (chunked-file-upload.css):

Key Styles:

  1. #drop-area:

    • Dashed Border: Visually indicates the area where users can drop files.
    • Highlight Effect: The border color changes when a file is dragged over.
  2. Progress Bar:

    • #progress-bar: The width dynamically updates to reflect the upload progress.
  3. File List:

    • #file-list .file-status: Adds spacing and styles to display the file name, size, and status.

Why style these elements?

  • A user-friendly interface helps users understand what actions they can perform (drag-and-drop, file selection) and gives feedback on the status of their uploads/downloads.

Conclusion:

This system allows large files to be uploaded reliably in chunks and provides users with feedback through a progress bar and status updates. Additionally, the download section gives users the ability to download uploaded files. Combining Bootstrap, JavaScript, and PHP ensures that the system is both user-friendly and functional.

Connecting Links

If you found this series helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

If you want more helpful content like this, feel free to follow me:

PART# 2 - Efficient File Transfer System Using HTTP for Large Datasets - Range Requests

Source Code

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay