Send, Validate, and Store Base64 Files with Laravel


Handling file uploads is a common requirement in web applications, and Laravel provides robust tools for managing file uploads. However, there are scenarios where you might need to handle files encoded in Base64, especially when dealing with APIs. This article will guide you through sending, validating, and storing Base64 files in a Laravel application.


Step 1: Sending Base64 Files


To send a file as a Base64 string, you first need to convert the file to a Base64 string on the client side. This is typically done in the front end using JavaScript.


Example: Converting and Sending a File in Base64


<!DOCTYPE html>
<html>
<head>
    <title>Base64 File Upload</title>
</head>
<body>
    <input type="file" id="fileInput" />
    <button onclick="uploadFile()">Upload</button>

    <script>
        function uploadFile() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            const reader = new FileReader();

            reader.onloadend = function() {
                const base64String = reader.result.replace('data:', '').replace(/^.+,/, '');

                fetch('/upload', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ file: base64String })
                })
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                });
            };

            reader.readAsDataURL(file);
        }
    </script>
</body>
</html>


Step 2: Validating Base64 Files in Laravel


To validate the incoming Base64 file, you need to decode it and ensure it is a valid file. Laravel's validation rules can be extended to handle this requirement.


Example: Creating a Custom Validation Rule


First, create a custom validation rule using Artisan:


php artisan make:rule Base64File


Then, implement the validation logic in the generated `Base64File` rule class:


namespace App\Rules;

use Illuminate\Contracts\Validation\Rule;
use Illuminate\Support\Facades\Validator;

class Base64File implements Rule
{
    public function passes($attribute, $value)
    {
        $decoded = base64_decode($value, true);

        if (!$decoded) {
            return false;
        }

        // Check if the decoded data is a valid image file
        $finfo = finfo_open(FILEINFO_MIME_TYPE);
        $mimeType = finfo_buffer($finfo, $decoded);
        finfo_close($finfo);

        $validMimeTypes = ['image/jpeg', 'image/png', 'image/gif'];
        return in_array($mimeType, $validMimeTypes);
    }

    public function message()
    {
        return 'The :attribute must be a valid Base64 encoded file.';
    }
}


Step 3: Storing Base64 Files in Laravel


After validating the Base64 file, the next step is to decode and store it. This can be done within a controller method.


Example: Handling the Upload Request in a Controller


First, create a controller using Artisan:


php artisan make:controller FileUploadController


Then, implement the file upload logic in the controller:


namespace App\Http\Controllers;

use App\Rules\Base64File;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class FileUploadController extends Controller
{
    public function upload(Request $request)
    {
        $request->validate([
            'file' => ['required', new Base64File]
        ]);

        $fileData = $request->input('file');
        $decodedFile = base64_decode($fileData);
        
        $filename = uniqid() . '.jpg'; // You can change the extension based on the file type
        Storage::disk('public')->put($filename, $decodedFile);

        return response()->json(['message' => 'File uploaded successfully', 'filename' => $filename]);
    }
}


Step 4: Defining Routes


Define the route to handle the file upload request in your `web.php` or `api.php` routes file:


use App\Http\Controllers\FileUploadController;

Route::post('/upload', [FileUploadController::class, 'upload']);



Handling Base64 file uploads in Laravel involves several steps: converting the file to a Base64 string on the client side, validating the Base64 string on the server side, and finally decoding and storing the file. By following these steps, you can effectively manage Base64 file uploads in your Laravel application, ensuring that your file handling processes are secure and efficient.