json_encode formatting - froala

Question

I'm using Froalo for text editing, but I'm having difficulties getting the image upload to function correctly. Testing on localhost.

The documentation says that

imageUploadURL: '/upload_image.php',

should return a json string formated like this :

{ link: 'path/to/image.jpg' }

my javascript looks this this :

$(function() {
    $('#edit').froalaEditor({
        language:'fr',
        imageUploadURL: 'upload.php'
    })
});

my upload.php looks like this :

var_dump($_FILES);
require('clean.php'); // removes french special characters
$image = clean($_FILES['file']['name']);
$uploaddir = '../photos/';
$uploadfile = $uploaddir . basename($image);
$retour = ['link'=> $uploadfile];
$b = json_encode($retour);
$array_final = preg_replace('/"([a-zA-Z]+[a-zA-Z0-9_]*)":/','$1:',$b);
if( move_uploaded_file($_FILES['file']['tmp_name'],$uploadfile)) {
    echo stripslashes($array_final);
} else {
    echo "Lo kol kakh tov...";
}

When I run this from the text editor through froalaEditor,

the file gets uploaded to the server,
firebug says that upload.php answers the array $_FILES and :

{link:"../photos/sama1.jpg"}

That all seems good, but froala answers that "something" went wrong and the images doesn't appear in the editor.

Could it be because of the double quotes around the image url?

JSON never returns any single quoted strings. They must be in the double quotes. However, json_encode() can automatically take care of that. — Muntashir Akon

thiebo thiebo · Accepted Answer · 2016-03-31T20:53:59

Solution was dead simple : the problem was this:

{link:"../photos/sama1.jpg"}

It didn't like the relative path so changing it to either this :

{link:"/var/www/html/blabla/photos/sama1.jpg"}

or this

{link:"/photos/sama1.jpg"}

did the trick :)

json_encode formatting - froala

1 Answers