[bug] Upload image on my server, Error 4 : Parsing response failed

[tagalpha]

Hi, When i want upload an image in froala editor i have this error :

Error log :

My code :

JS

$('.froala-editor').froalaEditor({
    toolbarButtons: ['fullscreen', 'undo', 'redo', '|',
        'bold', 'italic', 'underline', '|',
        'fontFamily', 'fontSize', 'color', 'emoticons', 'insertHR', 'clearFormatting', '|',
        'paragraphFormat', 'paragraphStyle', 'quote', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '|',
        'insertLink', 'insertImage', 'insertVideo', 'insertTable', '|',
        'html', 'help'
    ],

    saveURL: Routing.generate('admin_upload_image'),

    // Set the image upload URL.
    imageUploadURL: Routing.generate('admin_upload_image'),

    // Additional upload params.
    imageUploadParams: {id: 'my_editor'},

    // Set request type.
    imageUploadMethod: 'POST',

    // Set max image size to 5MB.
    imageMaxSize: 5 * 1024 * 1024,

    // Allow to upload PNG and JPG.
    imageAllowedTypes: ['jpeg', 'jpg', 'png']

}).on('froalaEditor.image.beforeUpload', function (e, editor, images) {
    // Return false if you want to stop the image upload.
    })
    .on('froalaEditor.image.uploaded', function (e, editor, response) {
        // Image was uploaded to the server.

        console.log(uploadUrl, uploadParam, uploadParams);
        console.log('Image uploaded');
        console.log(e);
        console.log(editor);
        console.log(response);
    })
    .on('froalaEditor.image.inserted', function (e, editor, $img, response) {
        // Image was inserted in the editor.
        console.log('Image inserted');
        console.log(e);
        console.log(editor);
        console.log($img);
        console.log(response);
    })
    .on('froalaEditor.image.replaced', function (e, editor, $img, response) {
        // Image was replaced in the editor.
    })
    .on('froalaEditor.image.error', function (e, editor, error, response) {
        console.log('Image error');
        console.log(e);
        console.log(editor);
        console.log(error);
        console.log(response);
    })
;

Upload function:

 /**
     * @Route("/uploadImage", name="admin_upload_image", options={"expose": true})
     * @Method({"GET", "POST"})
     * @param Request $request
     * @return JsonResponse
     */
    public function uploadImageAction(Request $request)
    {
        $mediaManager = $this->get("kms_froala_editor.media_manager");
        $path         = $request->request->get("path");
        $folder       = $request->request->get("folder") . '/upload';
        $rootDir      = $this->get("kernel")->getRootDir();
        $basePath     = $request->getBasePath() . '/upload';

        return $mediaManager->uploadImage($request->files, $rootDir, $basePath, $folder, $path);

    }

What could be the problem?

[stefanneculai]

@tagalpha could you please let us know your jQuery version?

[tagalpha]

I use Jquery 2.2.0

[stefanneculai]

The response appears to be formatted correctly. Would it be possible to send us a link where to replicate it?

[tagalpha]

I don't understand what you want exactly. I haven't acces to prod server this website is in developpement.

[stefanneculai]

If you cannot provide us access to the page where you have this problem, could you then make a screenshot of the response in the Network tab of the Chrome Developer Tools?

[tagalpha]

[stefanneculai]

The problem is actually from your side, not from the implementation. You do the following:

.on('froalaEditor.image.uploaded', function (e, editor, response) {
        // Image was uploaded to the server.

        console.log(uploadUrl, uploadParam, uploadParams);
        console.log('Image uploaded');
        console.log(e);
        console.log(editor);
        console.log(response);
    })

uploadUrl, uploadParam and uploadParams are not defined and the editor fails to read the response correctly.