support chunk uploading

app/Http/Controllers/MediaController.php

@@ -7,6 +7,7 @@ use App\Jobs\ProcessMedia;
 use App\MediaService\MediaService;
 use App\Models\Media;
 use Illuminate\Http\Request;
+use Illuminate\Http\UploadedFile;
 use Illuminate\Support\Facades\Storage;
 use Illuminate\Support\Facades\Validator;
 
@@ -148,8 +149,43 @@ class MediaController extends Controller
         }
 
         $file = $request->file('file');
+        $fileName = $request->input('filename', $file->getClientOriginalName());
+
+        if($request->has('fileappend') && $request->has('filesize')) {
+            $fileSize = $request->get('filesize');
+
+            if($fileSize > $max_size) {
+                return response()->json([
+                    'message' => 'The file ' . $fileName . ' is larger than the maximum size allowed of ' . Helpers::bytesToString($max_size),
+                    'errors' => [
+                        'file' => 'The file is larger than the maximum size allowed of ' . Helpers::bytesToString($max_size)
+                    ]
+                ], 422);
+            }
+
+            $tempFilePath = sys_get_temp_dir() . '/chunk-' . $fileName;
+
+            // Append the chunk to the temporary file
+            $fp = fopen($tempFilePath, 'a');
+            if ($fp) {
+                fwrite($fp, file_get_contents($file->getRealPath()));
+                fclose($fp);
+            }
+
+            // Check if the upload is complete
+            if (filesize($tempFilePath) >= $fileSize) {
+                $fileMime = mime_content_type($tempFilePath);
+                if($fileMime === false) {
+                    $fileMime = 'application/octet-stream';
+                }
+                $file = new UploadedFile($tempFilePath, $fileName, $fileMime, null, true);
+            } else {
+                return response()->json([
+                    'message' => 'Chunk stored',
+                ]);
+            }
+        }
 
-        $fileName = $file->getClientOriginalName();
         $name = pathinfo($fileName, PATHINFO_FILENAME);
         $extension = pathinfo($fileName, PATHINFO_EXTENSION);
         $name = Helpers::cleanFileName($name);
@@ -191,7 +227,7 @@ class MediaController extends Controller
         ]);
 
         $media->generateVariants(false);
-        unlink($file);
+        unlink($file->getRealPath());
 
         if($request->wantsJson()) {
             return response()->json([

public/script.js

@@ -120,9 +120,16 @@ let SM = {
             }
         }
 
-        const uploadFile = (file, title, idx, count) => {
+        const uploadFile = (file, start, title, idx, count) => {
+            const chunkSize = 1024 * 1024 * 2;
+            const end = Math.min(file.size, start + chunkSize);
+            const chunk = file.slice(start, end);
+
             const formData = new FormData();
-            formData.append('file', file);
+            formData.append('file', chunk);
+            formData.append('filename', file.name);
+            formData.append('filesize', file.size);
+            formData.append('fileappend', true);
             if (title !== '') {
                 formData.append('title', title);
             }
@@ -133,7 +140,7 @@ let SM = {
                     'Accept': 'application/json'
                 },
                 onUploadProgress: (progressEvent) => {
-                    let percent = (progressEvent.loaded / progressEvent.total) * 100;
+                    let percent = ((start + progressEvent.loaded) / file.size) * 100;
                     Swal.update({
                         title: 'Uploading...',
                         html: `${file.name} - ${Math.round(percent)}%`,
@@ -141,26 +148,34 @@ let SM = {
                 }
             }).then((response) => {
                 if (response.status === 200) {
-                    uploadedFiles.push({file: file, title: title, data: response.data});
+                    if (end >= file.size) {
+                        uploadedFiles.push({ file: file, title: title, data: response.data });
 
-                    if (idx === count - 1) {
+                        if (idx === count - 1) {
-                        Swal.fire({
+                            Swal.fire({
-                            icon: 'success',
+                                icon: 'success',
-                            title: 'Success',
+                                title: 'Success',
-                            html: count > 1 ? `Uploaded ${count} files successfully` : `${response.data.name || file.name} uploaded successfully`,
+                                html: count > 1 ? `Uploaded ${count} files successfully` : `${response.data.name || file.name} uploaded successfully`,
-                            showConfirmButton: false,
+                                showConfirmButton: false,
-                            timer: 3000
+                                timer: 3000
-                        });
+                            });
 
-                        if (callback) {
+                            if (callback) {
-                            window.setTimeout(() => {
+                                window.setTimeout(() => {
-                                callback({success: true, files: uploadedFiles});
+                                    callback({ success: true, files: uploadedFiles });
-                            }, 3000);
+                                }, 3000);
+                            }
+
+                            return;
+                        } else {
+                            start = 0;
+                            idx += 1;
                         }
                     } else {
-                        idx += 1;
+                        start = end;
-                        uploadFile(files[idx], titles[idx] || '', idx, files.length);
                     }
+
+                    uploadFile(files[idx], start, titles[idx] || '', idx, files.length);
                 } else {
                     showError(response.data.message);
                 }
@@ -169,7 +184,7 @@ let SM = {
             });
         }
 
-        uploadFile(files[0], titles[0] || '', 0, files.length);
+        uploadFile(files[0], 0, titles[0] || '', 0, files.length);
     },
 
     bytesToString: (bytes) => {