Trumbowyg: Image Uploaded But not Inserting

[imkrunal]

I am trying to upload image with php ( codeigniter ). Image upload works but after that model doesn't close and images doesn't get inserted in editor. I am getting success response

{"message":"uploadSuccess","file":"\/iwillgetit\/assets\/906873.jpg"}

Here is my code:

$('#text-editor').trumbowyg({
        btnsDef: {
            // Customizables dropdowns
            image: {
                dropdown: ['insertImage', 'upload'],
                ico: 'insertImage'
            }
        },
        btns: [
            ['viewHTML'],
            ['undo', 'redo'],
            ['formatting'],
            ['strong', 'em', 'del'],
            ['superscript', 'subscript'],
            ['link'],
            ['image','noembed'],
            ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
            ['unorderedList', 'orderedList'],
            ['horizontalRule'],
            ['removeformat'],
            //['emoji'],
            ['fullscreen']
        ],
        autogrow: true,
        //imageWidthModalEdit: true,
        plugins: {
            upload: {
                // Some upload plugin options, see details below
                serverPath: '<?php echo base_url(); ?>imageUpload.php',
                fileFieldName: 'storyimage',
                urlPropertyName: 'file',
                success: function (data, trumbowyg, $modal, values) {
                    console.log(data);
                    alert();
                }
            }
        }
    });

[melokki]

The image is not inserted because of this code

success: function (data, trumbowyg, $modal, values) {
                    console.log(data);
                    alert();
                }

remove this and the image should be inserted into the editor

[Alex-D]

Read the docs: https://alex-d.github.io/Trumbowyg/documentation/plugins/#plugin-upload

You should also have a success property with a boolean for the sucess/error status. Not a message (which you can keep if you want, but add a sucess boolean property).

[imkrunal]

Solved: Problem was the json status i was returning it should be success and url not message and file.

[eemaano]

@imkrunal Trying to get this to work. Having same issue. What was the final code you used for the json status, or success? Thanks

[eemaano]

i was able to figure it out, for non programmers that might be struggling since the demo code doesn't work as is. Need to update the trumbowyg.upload.php and return a success.

$data = array( 'message' => 'uploadSuccess', 'file' => $file, 'success' => true, );

[ipokane]

Hello, I have the same issue. The image is uploaded, but not inserted although the json format is correct.

Here's the code:

$('#description').trumbowyg({
            btnsDef: {
                // Create a new dropdown
                image: {
                    dropdown: ['insertImage', 'upload'],
                    ico: 'insertImage'
                }
            },
            btns: [
                ['viewHTML'],
                ['undo', 'redo'], // Only supported in Blink browsers
                ['formatting'],
                ['strong', 'em', 'del'],
                ['superscript', 'subscript'],
                ['link'],
                //['insertImage'],
                ['image'],
                ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
                ['unorderedList', 'orderedList'],
                ['horizontalRule'],
                ['removeformat'],
                ['fullscreen']
            ],
            autogrow: true,
            plugins: {
                // Add imagur parameters to upload plugin for demo purposes
                upload: {
                    serverPath: 'http://localhost/web/receive-image.php',
                    fileFieldName: 'imagewyg',
                    /*
                    headers: {
                        'Authorization': 'Client-ID xxxxxxxxxxxx'
                    },
                    */
                    urlPropertyName: 'data.link',
                    success: function (data, trumbowyg, $modal, values) {
                        alert(data);
                    },
                    error: function (data) {
                        alert(data);
                    }
                }
            }
        });

<?php

error_reporting(-1);

// cek 1
if (preg_match('/^image\/p?jpeg$/i', $_FILES['imagewyg']['type']) or
preg_match('/^image\/gif$/i', $_FILES['imagewyg']['type']) or
preg_match('/^image\/jpg$/i', $_FILES['imagewyg']['type']) or
preg_match('/^image\/(x-)?png$/i', $_FILES['imagewyg']['type'])) {

    $pictureName = time(). rand(0,999999999) . "_" . str_replace(" ", "_", $_FILES['imagewyg']['name']);

    $tpFile = htmlspecialchars($_FILES['imagewyg']['tmp_name'], ENT_QUOTES, 'UTF-8');
    $pictureName = htmlspecialchars($pictureName, ENT_QUOTES, 'UTF-8');

} else {

    $updErr = 'Please upload a JPEG, GIF, or PNG image file';
    exit;

}

// cek 2
$type = array("jpg","jpeg","gif","png");

$ext = explode(".", $_FILES['imagewyg']['name']);
$ext = strtolower(end($ext));

if (!in_array($ext, $type)){
    $updErr = 'Please upload a JPEG, GIF, or PNG image file';
    exit;
}

// upload
if (!is_uploaded_file($_FILES['imagewyg']['tmp_name']) ) {

    $updErr = 'Please upload a JPEG, GIF, or PNG image file';

} else {

    move_uploaded_file($tpFile, "upload/".$pictureName);

}

$file = "http://localhost/web/upload/" . $pictureName;

$data['success'] = true;
$data['url'] = $file;

header('Content-type:application/json;charset=utf-8');
echo json_encode( $data );

?>

Anyone can help? Thank you in advance.

[Alex-D]

urlPropertyName: 'data.link',

vs

$data['url'] = $file;

You should not override urlPropertyName since his default value is url.

Please read the Upload plugin documentation here for more details: https://alex-d.github.io/Trumbowyg/documentation/plugins/#plugin-upload

[ipokane]

Sorry, I just copy the above code and did not notice this answer:

The image is not inserted because of this code

success: function (data, trumbowyg, $modal, values) {
                  console.log(data);
                  alert();
              }

remove this and the image should be inserted into the editor

So, when I replace "data.link" with "url", it still returns error.

Now it's solved after I replace "data.link" with "url" and removed the additional code:

success: function (data, trumbowyg, $modal, values) {
                        alert(data);
                    },
                    error: function (data) {
                        alert(data);
                    }

Thank you!