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:

• : This input allows multiple file selection.
• : Placeholder for displaying upload progress.
• : Placeholder to show selected files before uploading.
• Upload Files: Button to initiate the upload process.
• Download Files: 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:

• LinkedIn
• GitHub

Source Code