Hello guys,
I'm tyring to upload images with TincyMCE cloud API version. So far submitting textarea with plain text works, but I'm stuck at adding images. I want to upload images to server storage, return URL link and save it in textarea with TinyMCE. I made a route that saves image and returns json with image path, but I get 500 TokenMismatchException in console, before it even hits the end point. I see the image in TincyMCE editor, but i also get red alert: Failed to upload image: HTTP Error: 500. Do i need to somehow add X-CSRF token when sending to the controller?
HTML code:
<form method="POST" action="/news" enctype="multipart/form-data">
{{ csrf_field() }}
<!-- Form Input -->
<textarea class="form-control" name="body" id="body" rows="8">
{{ old('body') }}
</textarea>
</form>
Here is the tinymce script:
<script>
tinymce.init({
selector: 'textarea',
height: 500,
setup: function (editor) {
editor.on('init change', function () {
editor.save();
});
},
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste imagetools"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'
],
image_title: true,
automatic_uploads: true,
images_upload_url: '/upload',
file_picker_types: 'image',
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>
and the controller method, that is called on /upload ->
public function store()
{
$imgpath = request()->file('name')->store('uploads', 'public');
return json_encode(['location' => $imgpath]);
}
If i try to just save image in blob version straight to the database it works, but i think that using storage and URL would be better for performance.
Any help would be very appreciated.