Skip to content

Instantly share code, notes, and snippets.

@saeedvir
Last active December 1, 2023 02:30
Show Gist options
  • Save saeedvir/6ff68e21e5cb561445423907b51cc000 to your computer and use it in GitHub Desktop.
Save saeedvir/6ff68e21e5cb561445423907b51cc000 to your computer and use it in GitHub Desktop.
TinyMCE Upload image + laravel
/*
* Laravel Route Or Controller
*/
Route::post('tinymce-upload', function (Request $request) {
#Check For Upload (add your security !!!)
$fileName = request()->file('file')->getClientOriginalName();
$path = request()->file('file')->storeAs('uploads', $fileName, 'public');
return response()->json(['location' => "/storage/$path"]);
})->name('tinymce-upload');
/*
In JS
*/
const tinymce_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', tinymce.activeEditor.options.get('images_upload_url') );
xhr.upload.onprogress = (e) => {
progress(e.loaded / e.total * 100);
};
xhr.onload = () => {
if (xhr.status === 403) {
reject({ message: 'HTTP Error: ' + xhr.status, remove: true });
return;
}
if (xhr.status < 200 || xhr.status >= 300) {
reject('HTTP Error: ' + xhr.status);
return;
}
const json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
reject('Invalid JSON: ' + xhr.responseText);
return;
}
resolve(json.location);
};
xhr.onerror = () => {
reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
};
const formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
formData.append('_token',$('meta[name="csrf-token"]').attr("content"));
xhr.send(formData);
});
tinymce.init({
selector: '.tinymce-editor-full',
plugins: [
'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor',
'pagebreak',
'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen',
'insertdatetime',
'media', 'table', 'emoticons', 'help'
],
toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
'forecolor backcolor emoticons | help',
menu: {
favs: {
title: 'My Favorites',
items: 'code visualaid | searchreplace | emoticons'
}
},
menubar: 'favs file edit view insert format tools table help',
// powerpaste_html_import: 'prompt',
relative_urls: false,
automatic_uploads: true,
// file_picker_types: 'image',
images_upload_url: "{{ route('tinymce-upload') }}",
images_upload_credentials: true,
images_upload_handler: tinymce_upload_handler,
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment