{"id":3046,"date":"2018-01-23T21:45:08","date_gmt":"2018-01-23T21:45:08","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=3046"},"modified":"2022-05-20T12:42:06","modified_gmt":"2022-05-20T12:42:06","slug":"tinymce-upload-image-to-server-using-php","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/","title":{"rendered":"Server-side Image Upload in TinyMCE Editor using PHP"},"content":{"rendered":"<p>Image upload is a common feature in the WYSIWYG HTML editor. If you&#8217;re using <a href=\"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-website\/\">TinyMCE editor in the textarea<\/a>, the image can be easily inserted into the editor. TinyMCE HTML editor provides an easy option to <a href=\"https:\/\/www.codexworld.com\/add-local-file-picker-to-image-dialog-in-tinymce\/\">upload and insert images in the editor<\/a> as BLOB data type. But it takes time to render BLOB images on the browser. So, server-side upload is always a better option to insert images in a TinyMCE editor.<\/p>\n<p><b>TinyMCE editor<\/b> supports local file picking and image uploading. But, to make these features functional you are required to do some settings in the TinyMCE configuration options. Also, the server-side upload handler is required to upload image file to the server. In this tutorial, we will show you how to allow the user to <b>upload images in TinyMCE editor using PHP<\/b>.<\/p>\n<p>In this example, we will go through the image upload handling process in the TinyMCE editor with PHP. Also, demonstrates the integration of the upload image feature in TinyMCE using images_upload_handler callback and PHP upload handler script. With this feature, the user can <b>upload images from the computer and insert them into the TinyMCE editor<\/b>. Also, a friendly user interface (UI) will be provided to simplify the image upload by dropping it from the computer.<\/p>\n<h2>HTML Code<\/h2>\n<p>Define a textarea element (<code>myTextarea<\/code>) to add TinyMCE HTML Editor on the webpage.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">textarea<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"myTextarea\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">textarea<\/span>&gt;<\/span><\/pre>\n<h2>JavaScript Code<\/h2>\n<p>First, include the JS library of the TinyMCE plugin.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"tinymce\/tinymce.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p>Define image upload handler callback using JavaScript.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>The selected file is posted to the server-side script (<code>upload.php<\/code>) to process upload functionality.<\/li>\n<li>This upload handler function provides 2 events, blobInfo and progress.<\/li>\n<li>On success, the uploaded file path is retrieved from the JSON object (<code>json.location<\/code>).<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> image_upload_handler_callback = (blobInfo, progress) =&gt; <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">Promise<\/span>((resolve, reject) =&gt; {\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> xhr = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> XMLHttpRequest();\r\n    xhr.withCredentials = <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">false<\/span>;\r\n    xhr.open(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'POST'<\/span>, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'upload.php'<\/span>);\r\n    \r\n    xhr.upload.onprogress = (e) =&gt; {\r\n        progress(e.loaded \/ e.total * <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">100<\/span>);\r\n    };\r\n    \r\n    xhr.onload = () =&gt; {\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (xhr.status === <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">403<\/span>) {\r\n            reject({ message: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'HTTP Error: '<\/span> + xhr.status, remove: <span class=\"hljs-literal\" style=\"color: rgb(182, 86, 17);\">true<\/span> });\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span>;\r\n        }\r\n      \r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (xhr.status &lt; <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">200<\/span> || xhr.status &gt;= <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">300<\/span>) {\r\n            reject(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'HTTP Error: '<\/span> + xhr.status);\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span>;\r\n        }\r\n      \r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> json = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">JSON<\/span>.parse(xhr.responseText);\r\n      \r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (!json || <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">typeof<\/span> json.location != <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'string'<\/span>) {\r\n            reject(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Invalid JSON: '<\/span> + xhr.responseText);\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span>;\r\n        }\r\n      \r\n        resolve(json.location);\r\n    };\r\n    \r\n    xhr.onerror = () =&gt; {\r\n      reject(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Image upload failed due to a XHR Transport error. Code: '<\/span> + xhr.status);\r\n    };\r\n    \r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> formData = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> FormData();\r\n    formData.append(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'file'<\/span>, blobInfo.blob(), blobInfo.filename());\r\n    \r\n    xhr.send(formData);\r\n});<\/pre>\n<p>Initialize TinyMCE and attach editor to the textarea element specified in the <code>selector<\/code> option. The following configuration options enable the local file picker and image upload feature in the TinyMCE editor.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Enable the <code>image<\/code> plugin and add the image upload button to the editor toolbar.<\/li>\n<li>Set the server-side upload handler script URL (<code>upload.php<\/code>) in the <b>images_upload_url<\/b> option. Once this config is defined, an Upload tab will appear in the Image Dialog.<\/li>\n<li>Set the image upload handler callback in the <b>images_upload_handler<\/b> option.<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\">tinymce.init({\r\n    selector: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#myTextarea'<\/span>,\r\n    plugins: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'image'<\/span>,\r\n    toolbar: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | image'<\/span>,\r\n    \r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ without images_upload_url set, Upload tab won't show up<\/span>\r\n    images_upload_url: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'upload.php'<\/span>,\r\n    \r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ override default upload handler to simulate successful upload<\/span>\r\n    images_upload_handler: image_upload_handler_callback\r\n});<\/pre>\n<h2>PHP Upload Handler (upload.php)<\/h2>\n<p>This <code>upload.php<\/code> file handles the server-side image upload functionality using PHP.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Specify the origins that are allowed to post HTTP requests to this handler script and upload images to the server.<\/li>\n<li>Validate the origin of the HTTP request and accept only allowed origins.<\/li>\n<li>Check whether the file was uploaded via HTTP POST using PHP <code>is_uploaded_file()<\/code> function.<\/li>\n<li>Sanitize input file name using <code>preg_match()<\/code> function in PHP.<\/li>\n<li>Verify the extension of the file using <code>pathinfo()<\/code> function in PHP.<\/li>\n<li>Upload file to the server using <code>move_uploaded_file()<\/code> function in PHP.<\/li>\n<li>Respond to the successful upload with JSON. Use a location key to specify the path to the saved image resource.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Only&nbsp;these&nbsp;origins&nbsp;are&nbsp;allowed&nbsp;to&nbsp;upload&nbsp;images <br \/><\/span><span style=\"color: #0000BB\">$accepted_origins&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array(<\/span><span style=\"color: #DD0000\">\"http:\/\/localhost\"<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">\"https:\/\/www.codexworld.com\"<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">\"http:\/\/192.168.1.1\"<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">\"http:\/\/example.com\"<\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Set&nbsp;the&nbsp;upload&nbsp;folder <br \/><\/span><span style=\"color: #0000BB\">$imageFolder&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"uploads\/\"<\/span><span style=\"color: #007700\">; <br \/> <br \/>if&nbsp;(isset(<\/span><span style=\"color: #0000BB\">$_SERVER<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'HTTP_ORIGIN'<\/span><span style=\"color: #007700\">]))&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;same-origin&nbsp;requests&nbsp;won't&nbsp;set&nbsp;an&nbsp;origin.&nbsp;If&nbsp;the&nbsp;origin&nbsp;is&nbsp;set,&nbsp;it&nbsp;must&nbsp;be&nbsp;valid. <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if&nbsp;(<\/span><span style=\"color: #0000BB\">in_array<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_SERVER<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'HTTP_ORIGIN'<\/span><span style=\"color: #007700\">],&nbsp;<\/span><span style=\"color: #0000BB\">$accepted_origins<\/span><span style=\"color: #007700\">))&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">header<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'Access-Control-Allow-Origin:&nbsp;'&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$_SERVER<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'HTTP_ORIGIN'<\/span><span style=\"color: #007700\">]); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">header<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"HTTP\/1.1&nbsp;403&nbsp;Origin&nbsp;Denied\"<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>} <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Don't&nbsp;attempt&nbsp;to&nbsp;process&nbsp;the&nbsp;upload&nbsp;on&nbsp;an&nbsp;OPTIONS&nbsp;request <br \/><\/span><span style=\"color: #007700\">if&nbsp;(<\/span><span style=\"color: #0000BB\">$_SERVER<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'REQUEST_METHOD'<\/span><span style=\"color: #007700\">]&nbsp;==&nbsp;<\/span><span style=\"color: #DD0000\">'OPTIONS'<\/span><span style=\"color: #007700\">)&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">header<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"Access-Control-Allow-Methods:&nbsp;POST,&nbsp;OPTIONS\"<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;return; <br \/>} <br \/> <br \/><\/span><span style=\"color: #0000BB\">reset&nbsp;<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">); <br \/><\/span><span style=\"color: #0000BB\">$temp&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">current<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">); <br \/>if&nbsp;(<\/span><span style=\"color: #0000BB\">is_uploaded_file<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$temp<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'tmp_name'<\/span><span style=\"color: #007700\">])){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/* <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If&nbsp;your&nbsp;script&nbsp;needs&nbsp;to&nbsp;receive&nbsp;cookies,&nbsp;set&nbsp;images_upload_credentials&nbsp;:&nbsp;true&nbsp;in <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;the&nbsp;configuration&nbsp;and&nbsp;enable&nbsp;the&nbsp;following&nbsp;two&nbsp;headers. <br \/>&nbsp;&nbsp;&nbsp;&nbsp;*\/ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;header('Access-Control-Allow-Credentials:&nbsp;true'); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;header('P3P:&nbsp;CP=\"There&nbsp;is&nbsp;no&nbsp;P3P&nbsp;policy.\"'); <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;Sanitize&nbsp;input <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if&nbsp;(<\/span><span style=\"color: #0000BB\">preg_match<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"\/([^\\w\\s\\d\\-_~,;:\\[\\]\\(\\).])|([\\.]{2,})\/\"<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$temp<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">]))&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">header<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"HTTP\/1.1&nbsp;400&nbsp;Invalid&nbsp;file&nbsp;name.\"<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Verify&nbsp;extension <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if&nbsp;(!<\/span><span style=\"color: #0000BB\">in_array<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">strtolower<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">pathinfo<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$temp<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">],&nbsp;<\/span><span style=\"color: #0000BB\">PATHINFO_EXTENSION<\/span><span style=\"color: #007700\">)),&nbsp;array(<\/span><span style=\"color: #DD0000\">\"gif\"<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">\"jpg\"<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">\"jpeg\"<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">\"png\"<\/span><span style=\"color: #007700\">)))&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">header<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"HTTP\/1.1&nbsp;400&nbsp;Invalid&nbsp;extension.\"<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Accept&nbsp;upload&nbsp;if&nbsp;there&nbsp;was&nbsp;no&nbsp;origin,&nbsp;or&nbsp;if&nbsp;it&nbsp;is&nbsp;an&nbsp;accepted&nbsp;origin <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$filetowrite&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$imageFolder&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$temp<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">move_uploaded_file<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$temp<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'tmp_name'<\/span><span style=\"color: #007700\">],&nbsp;<\/span><span style=\"color: #0000BB\">$filetowrite<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Determine&nbsp;the&nbsp;base&nbsp;URL <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$protocol&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;isset(<\/span><span style=\"color: #0000BB\">$_SERVER<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'HTTPS'<\/span><span style=\"color: #007700\">])&nbsp;&amp;&amp;&nbsp;<\/span><span style=\"color: #0000BB\">$_SERVER<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'HTTPS'<\/span><span style=\"color: #007700\">]&nbsp;==&nbsp;<\/span><span style=\"color: #DD0000\">'on'&nbsp;<\/span><span style=\"color: #007700\">?&nbsp;<\/span><span style=\"color: #DD0000\">\"https:\/\/\"&nbsp;<\/span><span style=\"color: #007700\">:&nbsp;<\/span><span style=\"color: #DD0000\">\"http:\/\/\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$baseurl&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$protocol&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$_SERVER<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">\"HTTP_HOST\"<\/span><span style=\"color: #007700\">]&nbsp;.&nbsp;<\/span><span style=\"color: #0000BB\">rtrim<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">dirname<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_SERVER<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'REQUEST_URI'<\/span><span style=\"color: #007700\">]),&nbsp;<\/span><span style=\"color: #DD0000\">\"\/\"<\/span><span style=\"color: #007700\">)&nbsp;.&nbsp;<\/span><span style=\"color: #DD0000\">\"\/\"<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Respond&nbsp;to&nbsp;the&nbsp;successful&nbsp;upload&nbsp;with&nbsp;JSON. <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;Use&nbsp;a&nbsp;location&nbsp;key&nbsp;to&nbsp;specify&nbsp;the&nbsp;path&nbsp;to&nbsp;the&nbsp;saved&nbsp;image&nbsp;resource. <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;{&nbsp;location&nbsp;:&nbsp;'\/your\/uploaded\/image\/file'} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(array(<\/span><span style=\"color: #DD0000\">'location'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$baseurl&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$filetowrite<\/span><span style=\"color: #007700\">)); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">header<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"HTTP\/1.1&nbsp;400&nbsp;Upload&nbsp;failed.\"<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>}&nbsp;else&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Notify&nbsp;editor&nbsp;that&nbsp;the&nbsp;upload&nbsp;failed <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">header<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"HTTP\/1.1&nbsp;500&nbsp;Server&nbsp;Error\"<\/span><span style=\"color: #007700\">); <br \/>} <br \/> <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<h2>Image Upload Dialog in TinyMCE<\/h2>\n<p>The image icon in the editor&#8217;s toolbar opens a dialog box for the image upload. In the <b>Upload<\/b> tab, you can select an image from the computer or drag and drop the image directly. The image will be uploaded to the server and HTML will be inserted into the editor.<\/p>\n<div class=\"img_center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-editor-drag-drop-image-upload-dialog-php-codexworld.png\" alt=\"tinymce-editor-drag-drop-image-upload-dialog-php-codexworld\" width=\"999\" height=\"711\" class=\"alignnone size-full wp-image-4973\" srcset=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-editor-drag-drop-image-upload-dialog-php-codexworld.png 999w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-editor-drag-drop-image-upload-dialog-php-codexworld-300x214.png 300w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-editor-drag-drop-image-upload-dialog-php-codexworld-768x547.png 768w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-editor-drag-drop-image-upload-dialog-php-codexworld-200x142.png 200w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-editor-drag-drop-image-upload-dialog-php-codexworld-323x230.png 323w\" sizes=\"auto, (max-width: 999px) 100vw, 999px\" \/><\/div>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/tinymce-html-export-to-word-doc\/\">How to Export TinyMCE Content to MS Word Document<\/a><\/span><\/p>\n<h2>Conclusion<\/h2>\n<p>This example uses the latest version of the TinyMCE plugin (v6). You can add a responsive Rich Text Editor to the website and integrate the image upload feature in TinyMCE 6 using PHP. Not only the image upload but also you can set the description and change the width\/height of the image before inserting it in the TinyMCE editor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Image upload is a common feature in the WYSIWYG HTML editor. If you&#8217;re using TinyMCE editor in the textarea, the image can be easily inserted into the editor. TinyMCE HTML editor provides an easy option <\/p>\n","protected":false},"author":1,"featured_media":4975,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[362,66,14,299,170,183,67],"class_list":["post-3046","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","tag-image-upload","tag-javascript","tag-php","tag-plugin","tag-text-editor","tag-tinymce","tag-upload","cat-4-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Server-side Image Upload in TinyMCE Editor using PHP - CodexWorld<\/title>\n<meta name=\"description\" content=\"TinyMCE image upload handling - Learn how to upload image to the server in TinyMCE editor using PHP. Handle image upload functionality in TinyMCE editor with PHP. Example code to enable image upload feature in TinyMCE and upload image from computer using PHP.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Server-side Image Upload in TinyMCE Editor using PHP - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"TinyMCE image upload handling - Learn how to upload image to the server in TinyMCE editor using PHP. Handle image upload functionality in TinyMCE editor with PHP. Example code to enable image upload feature in TinyMCE and upload image from computer using PHP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-23T21:45:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-20T12:42:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-image-upload-handler-to-server-from-computer-using-php-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/tinymce-upload-image-to-server-using-php\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/tinymce-upload-image-to-server-using-php\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Server-side Image Upload in TinyMCE Editor using PHP\",\"datePublished\":\"2018-01-23T21:45:08+00:00\",\"dateModified\":\"2022-05-20T12:42:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/tinymce-upload-image-to-server-using-php\\\/\"},\"wordCount\":599,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/tinymce-upload-image-to-server-using-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/tinymce-image-upload-handler-to-server-from-computer-using-php-codexworld.png\",\"keywords\":[\"Image-Upload\",\"JavaScript\",\"PHP\",\"Plugin\",\"Text Editor\",\"TinyMCE\",\"Upload\"],\"articleSection\":[\"PHP\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/tinymce-upload-image-to-server-using-php\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/tinymce-upload-image-to-server-using-php\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/tinymce-upload-image-to-server-using-php\\\/\",\"name\":\"Server-side Image Upload in TinyMCE Editor using PHP - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/tinymce-upload-image-to-server-using-php\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/tinymce-upload-image-to-server-using-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/tinymce-image-upload-handler-to-server-from-computer-using-php-codexworld.png\",\"datePublished\":\"2018-01-23T21:45:08+00:00\",\"dateModified\":\"2022-05-20T12:42:06+00:00\",\"description\":\"TinyMCE image upload handling - Learn how to upload image to the server in TinyMCE editor using PHP. Handle image upload functionality in TinyMCE editor with PHP. Example code to enable image upload feature in TinyMCE and upload image from computer using PHP.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/tinymce-upload-image-to-server-using-php\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/tinymce-upload-image-to-server-using-php\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/tinymce-upload-image-to-server-using-php\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/tinymce-image-upload-handler-to-server-from-computer-using-php-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/tinymce-image-upload-handler-to-server-from-computer-using-php-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"tinymce-image-upload-handler-to-server-from-computer-using-php-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/tinymce-upload-image-to-server-using-php\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Server-side Image Upload in TinyMCE Editor using PHP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Server-side Image Upload in TinyMCE Editor using PHP - CodexWorld","description":"TinyMCE image upload handling - Learn how to upload image to the server in TinyMCE editor using PHP. Handle image upload functionality in TinyMCE editor with PHP. Example code to enable image upload feature in TinyMCE and upload image from computer using PHP.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/","og_locale":"en_US","og_type":"article","og_title":"Server-side Image Upload in TinyMCE Editor using PHP - CodexWorld","og_description":"TinyMCE image upload handling - Learn how to upload image to the server in TinyMCE editor using PHP. Handle image upload functionality in TinyMCE editor with PHP. Example code to enable image upload feature in TinyMCE and upload image from computer using PHP.","og_url":"https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2018-01-23T21:45:08+00:00","article_modified_time":"2022-05-20T12:42:06+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-image-upload-handler-to-server-from-computer-using-php-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Server-side Image Upload in TinyMCE Editor using PHP","datePublished":"2018-01-23T21:45:08+00:00","dateModified":"2022-05-20T12:42:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/"},"wordCount":599,"commentCount":6,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-image-upload-handler-to-server-from-computer-using-php-codexworld.png","keywords":["Image-Upload","JavaScript","PHP","Plugin","Text Editor","TinyMCE","Upload"],"articleSection":["PHP"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/","url":"https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/","name":"Server-side Image Upload in TinyMCE Editor using PHP - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-image-upload-handler-to-server-from-computer-using-php-codexworld.png","datePublished":"2018-01-23T21:45:08+00:00","dateModified":"2022-05-20T12:42:06+00:00","description":"TinyMCE image upload handling - Learn how to upload image to the server in TinyMCE editor using PHP. Handle image upload functionality in TinyMCE editor with PHP. Example code to enable image upload feature in TinyMCE and upload image from computer using PHP.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-image-upload-handler-to-server-from-computer-using-php-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-image-upload-handler-to-server-from-computer-using-php-codexworld.png","width":1366,"height":768,"caption":"tinymce-image-upload-handler-to-server-from-computer-using-php-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/tinymce-upload-image-to-server-using-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Server-side Image Upload in TinyMCE Editor using PHP"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/01\/tinymce-image-upload-handler-to-server-from-computer-using-php-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-N8","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3046","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=3046"}],"version-history":[{"count":5,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3046\/revisions"}],"predecessor-version":[{"id":4971,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3046\/revisions\/4971"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/4975"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=3046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=3046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=3046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}