Cara Mudah Upload Gambar Dengan Tiny MCE Pada Laravel

1. Menambahkan Depedency Tiny MCE

Di sini kita perlu menambahkan depedency Tiny MCE contoh dengan cdn pada layout pada berikut.

<script src="https://cdn.tiny.cloud/1/API_KEY_HERE/tinymce/5/tinymce.min.js" referrerpolicy="origin">

2. Menambahkan Script Pada View

Pada langkah ini menambahkan script pada view untuk menampilkan text editor.

Selector yang akan di load.

<textarea class="form-control" id="body" name="body" ></textarea>

Kemudian tambahkan script.

<script>
    tinymce.init({
        selector: '#body',
        plugins: 'lists link image media code',
        toolbar: 'undo redo | styleselect | forecolor | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link image | code',
        file_picker_types: 'image',
        images_upload_handler: function (blobInfo, success, failure) {
            let data = new FormData();
            data.append('file', blobInfo.blob(), blobInfo.filename());
            data.append('_token', document.getElementsByName("_token")[0].value);
            axios.post("/file/upload", data).then(function (res) {
                success(res.data.location);
            }).catch(function (err) {
                failure('HTTP Error: ' + err.message);
            });
        },
        file_picker_callback: function(cb, value, meta) {
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');
            input.onchange = function() {
                var file = this.files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function () {
                    var id = 'blobid' + (new Date()).getTime();
                    var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                    var base64 = reader.result.split(',')[1];
                    var blobInfo = blobCache.create(id, file, base64);
                    blobCache.add(blobInfo);
                    cb(blobInfo.blobUri(), { title: file.name });
                };
            };
            input.click();
        }
    });
</script>

3. Membuat Fungsi Upload Pada Controller

Pada langkah ini kita akan membuat fungsi upload untuk menyimpan gambar pada storage.

Pada Route.

Route::post('file/upload', [FileController::class, 'upload'])->name('file.upload');

Pada Controller.

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Storage;

class FileController extends Controller
{

    /**
    * Handle file upload and return location.
    *
    * @param  Illuminate\Http\Request  $request
    * @return \Illuminate\Http\Response
    */
    public function upload(Request $request)
    {
        $this->validate($request, [ 'file' => 'required|image' ]);
        
        $filename = $request->file->getClientOriginalName();
        $location = url('storage/upload-image/' . $filename);
        
        try {
            $request->file->storeAs('public/upload-image', $filename);
        } catch (Exception $e) {
            return abort(500, 'Invalid upload image.');
        }
        
        return response()->json([ 'location' => $location ]);
    }
}

Catatan

Pada upload di storage jika kita gunakan default tanpa nama file bisa gunakan :

$location = $request->file->storePublicly('upload-image', 'public');

Jika ingin disabled pada tiny bisa lakukan seperti di bawah ini.

tinyMCE.init({
    selector: '#form-content-readonly',
    readonly : 1
});

tinymce.activeEditor.getBody().setAttribute('contenteditable', false);

Sekian untuk kali ini semoga bermanfaat :D untuk lebih lanjut bisa kunjungi link tersebut.