Upload image on server and add file path inside image tag using quilljs

Question

I am using quilljs for my editor. All my data are handle by mysql database. I am using Angularjs 1.x and for backend Cakephp is my frame-work. I am currently trying to build a forum kind of page in which I want to save multiple images along with text which will be formatted using quilljs

<p>sd<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgA....SUVORK5CYII=" alt="i am image"><b>it is image of earth</b></p>

This is what currently storing in my database. Now if there is multiple big images come in then size of field will be too much high there for I want to upload image inside severside folder and want to print image address inside image tag like:

 <p>sd<img src="../img/709f2d0be9d13c645037f1b9bb066b00a6d7/image1.jpg" alt="i am image"><b>it is image of earth</b></p>

So I can fetch image directly from given folder.

Answer 1

i have done small trick with quilljs. i have put some code inside quilljs which send image toward my php script on line number 8663 after if (typeof value === 'string') this statement i have added script which sends image value to my php script

var img = {
                'img' : value
            }
            $.ajax({
                    url: "../Writers/writerCertificateupload",
                    data: img, 
                    contentType: undefined,
                    type: 'post'
           }).success(function(path){
                node.setAttribute('src', path);
            })

where node.setAttribute('src', path); sets path which i am returning from php script it sets it on image tag i.e <img src="../img/709f2d0be9d13c645037f1b9bb066b00a6d7/image1.jpg"> and then it sets it inside editor and then we can save that data within editor. this is how i have solve this problem.

my php code is

        public function writerCertificateupload()//pending
    {
            $id = $this->Auth->user('id');
            $this->autoRender=false;
            define('UPLOAD_DIR', 'files/post/');
            $img = $_POST['img'];
            $img = str_replace('data:image/jpeg;base64,', '', $img);
            $img = str_replace(' ', '+', $img);
            $data = base64_decode($img);
            $file = UPLOAD_DIR . uniqid() . '.jpg';
            $success = file_put_contents($file, $data);

            $file = "../".$file;
            print $success ? $file : 'Unable to save the file.';
    }