1

Пытаюсь настроить загрузку файлов в tinyMCE, но что то совсем плохо. При загрузке изображения очень сильное ощущение, что post летит куда угодно, кроме нужного роута. Как результат в xhr.responseText попадает текущая страница и, соответсвенно, происходит ошибка: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data (ясно почему - там идет html разметка страницы).

Подключение скриптов и пропись роута к обработчику картинок

@section('scripts')
    <script type="text/javascript">
        const config = {
            image_path : "{{route('admin.image_json')}}"
        };
    </script>
    <script type="text/javascript" src="{{ asset('js/tinymce/js/tinymce/tinymce.min.js') }}" defer></script>
    <script type="text/javascript" src="{{ asset('js/MyAddScripts.js') }}" defer></script>
@endsection

инициализация tinymce - файл js/MyAddScripts.js

tinymce.init({
    selector: 'textarea.tinyM',
    plugins: 'image paste',
    paste_data_images: true,
    file_picker_types: 'file image media',
    toolbar: 'image',
    images_upload_handler: function (blobInfo, success, failure) {
        var xhr, formData;
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', config.image_path);
        var csrf = document.querySelector('meta[name="csrf-token"]').content;
        xhr.setRequestHeader("X-CSRF-Token", csrf);
        xhr.onload = function() {
            var json;
            if (xhr.status != 200) {
                console.log('Eep - it ', xhr.status);
                failure('HTTP Error: ' + xhr.status);
                return;
            }
            console.log(xhr.response);
            json = JSON.parse(xhr.responseText);

            if (!json || typeof json.location != 'string') {
                console.log('Here');
                failure('Invalid JSON: ' + xhr.responseText);
                return;
            }
            success(json.location);
        };
        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());
        xhr.send(formData);
    },
    });
роуты прописаны введите сюда описание изображения

сам метод, отвечающий за возврат json response

public function mceditUploadImage(ImageRequest $request)
{
    $image = $this->saveImage($request, new Image());
    return response()->json(['location' => $image->name ]);
}

место, где происходит ошибка

xhr.onload = function() {
    ...
    json = JSON.parse(xhr.responseText);
2
  • 1
    Так вы посмотрите, на какой роут фактически отправляется через devTools браузера. 13 фев 2020 в 6:52
  • @Stepan Kasyanenko , смотрел и он был правильным ) Собственно проблема решена и была в обычной челевеческой усталости и, как следствие, невинмательности. Вечером нужно будет ответ оформить) . 14 фев 2020 в 12:20

1 ответ 1

0

На свежую голову стало очевидно, что " в xhr.responseText попадает текущая страница " - это результат работы валидации request-a в методе

public function mceditUploadImage(ImageRequest $request)

по причине не совпадения названия поля: "image" в валидации и "file" ajax запросе

formData.append('file', blobInfo.blob(), blobInfo.filename());

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.