Welcome Guest, Not a member yet? Register   Sign In
Tinymce 4.9.8 upload image
#1

Hi guys,

I need some help, I have problem with Tinymce version 4.9.8 upload image. I follow from this official guide (https://www.tiny.cloud/docs-4x/general-c...agehandler)

This is my script from view
Code:
<?= script_tag('assets/tinymce/tinymce.min.js'); ?>
    <script>
      tinymce.init({
        selector: 'textarea#post_content',
        plugins: 'image code media',
        toolbar: 'undo redo | styleselect | bold italic underline | link image media | code',
        menubar: false,
        document_base_url: '<?= base_url() ?>',
        images_upload_handler: function (blobInfo, success, failure, progress) {
        var xhr, formData;

        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', '<?= base_url('admin/blog/imgUpload') ?>');

        xhr.upload.onprogress = function (e) {
          progress(e.loaded / e.total * 100);
        };

        xhr.onload = function() {
          var json;

          if (xhr.status < 200 || xhr.status >= 300) {
            failure('HTTP Error: ' + xhr.status);
            return;
          }
          // console.log(xhr.responseText);
          json = JSON.parse(xhr.responseText);
          // console.log(json.location);
          if (!json || typeof json.location != 'string') {
            failure('Invalid JSON: ' + xhr.responseText);
            return;
          }

          success(json.location);
        };

        xhr.onerror = function () {
          failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
        };

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

        xhr.send(formData);
      }
      });
    </script>

2. Controller code:
PHP Code:
    public function blogImgUpload()
    {
        
        
            $accepted_origins 
= array('http://localhost:8080');
            $imageFolder "../public/blog_img/";

            reset ($_FILES);
            $temp current($_FILES);
            
            
if (is_uploaded_file($temp['tmp_name'])){
                if (isset($_SERVER['HTTP_ORIGIN'])) {
                    // same-origin requests won't set an origin. If the origin is set, it must be valid.
                    if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) {
                        header('Access-Control-Allow-Origin: ' $_SERVER['HTTP_ORIGIN']);
                    } else {
                        header("HTTP/1.1 403 Origin Denied");
                        return;
                    }
                }

                /*
                If your script needs to receive cookies, set images_upload_credentials : true in
                the configuration and enable the following two headers.
                */
                // header('Access-Control-Allow-Credentials: true');
                // header('P3P: CP="There is no P3P policy."');

                // Sanitize input
                if (preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/"$temp['name'])) {
                    header("HTTP/1.1 400 Invalid file name.");
                    return;
                }

                // Verify extension
                if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif""jpg""png"))) {
                    header("HTTP/1.1 400 Invalid extension.");
                    return;
                }

                // Accept upload if there was no origin, or if it is an accepted origin
                $filetowrite $imageFolder $temp['name'];
                move_uploaded_file($temp['tmp_name'], $filetowrite);

                // Respond to the successful upload with JSON.
                // Use a location key to specify the path to the saved image resource.
                // { location : '/your/uploaded/image/file'}
                // $img = [
                //     'location' => base_url('blog_img/') . $temp['name']
                // ];
                $img = [
                    'location' => $filetowrite
                
];
                // echo $this->response->setJSON($img);
                return json_encode($img);
            } else {
                // Notify editor that the upload failed
                header("HTTP/1.1 500 Server Error");
            }
        
Routes.php settings
PHP Code:
$routes->group('admin', function($routes){
    ...
    
$routes->add('blog/imgUpload''Admin\BlogManagement::blogImgUpload');
        ..
}); 

1) The file is successfully upload at `blog_img/` directory
2) I receive error in chrome console 
PHP Code:
Uncaught SyntaxErrorUnexpected token in JSON at position 43
    at JSON
.parse (<anonymous>)
    at XMLHttpRequest.xhr.onload (create:150
 
output/response from json_encode
Code:
{"location":"..\/public\/blog_img\/8.png"}

I hope someone can help me..
This is me. JK not me.
Reply


Messages In This Thread
Tinymce 4.9.8 upload image - by falcon812311 - 08-26-2020, 09:21 AM
RE: Tinymce 4.9.8 upload image - by InsiteFX - 08-27-2020, 05:09 AM
RE: Tinymce 4.9.8 upload image - by falcon812311 - 08-27-2020, 07:16 AM
RE: Tinymce 4.9.8 upload image - by InsiteFX - 08-27-2020, 08:28 AM
RE: Tinymce 4.9.8 upload image - by anturom - 08-27-2020, 02:10 PM
RE: Tinymce 4.9.8 upload image - by argaLion - 07-13-2022, 04:46 PM



Theme © iAndrew 2016 - Forum software by © MyBB