With filepond.js is a pretty great image uploading library and the documentation about it is also quite a lot. There are also quite a few video tutorials combined with laravel, but I see no one instructing how to upload in encode format when we use submit form.
Here I will guide you in detail:
- In your HTML code, create a form to send a POST request to the
submit_formroute:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <form action="{{ route('submit_form') }}" method="POST" enctype="multipart/form-data"> @csrf <label for="field1">Field 1:</label> <input type="text" name="field1" id="field1"> <label for="field2">Field 2:</label> <input type="text" name="field2" id="field2"> <input type="file" name="filepond" id="filepond"> <button type="submit">Submit</button> </form> |
and register for more endcode plugins
1 2 3 4 5 | FilePond.registerPlugin( FilePondPluginFileEncode ) FilePond.create(document.querySelector('#filepond')) |
- In the backend
Create routes:
1 2 3 | Route::post('/submit-form', 'AppHttpControllersFormController@submitForm')->name('submit_form'); |
Create controller:
1 2 3 4 5 6 7 8 9 10 11 | public function submitForm(Request $request){ $file = $request->input('filepond'); // Giải mã file $file = json_decode($file, true); $fileContent = base64_decode($file['data']); $filePath = $file['name']; Storage::put($filePath, $fileContent); return $filePath; } |
In it, we use the json_decode function to convert the JSON string to an array in PHP, then decode the files using the base64_decode method. Finally, we save the decrypted files to disk using the put method of the Storage object.