{"id":51027,"date":"2016-06-03T18:14:21","date_gmt":"2016-06-03T18:14:21","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=51027"},"modified":"2016-06-03T18:14:21","modified_gmt":"2016-06-03T18:14:21","slug":"image-upload-summernote","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/image-upload-summernote\/","title":{"rendered":"Image Upload In summernote Editor"},"content":{"rendered":"<p>If we use Summernote\u00a0editor by\u00a0normal process then it is not possible to upload images on the server because Summernote\u00a0converts images to Base 64 format so when we save an\u00a0image in the database then it takes too much space in the database. But with the\u00a0help of some code we can upload images on the server through summernote\u00a0editor. We have to use a default &#8220;onImageUpload&#8221;\u00a0summernote\u00a0function for image uploading.<\/p>\n<p>Normal using process of Summernote &#8211;<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-51028\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_2.png\" alt=\"Screenshot_2\" width=\"1108\" height=\"107\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_2.png 1108w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_2-250x24.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_2-300x29.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_2-768x74.png 768w\" sizes=\"(max-width: 1108px) 100vw, 1108px\" loading=\"lazy\" \/><\/p>\n<p>By use of &#8220;onImageUpload&#8221; function on Summernote &#8211;<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-51030\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_3-1.png\" alt=\"Screenshot_3\" width=\"1100\" height=\"129\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_3-1.png 1100w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_3-1-250x29.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_3-1-300x35.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_3-1-768x90.png 768w\" sizes=\"(max-width: 1100px) 100vw, 1100px\" loading=\"lazy\" \/><\/p>\n<p>After that, we have to use our normal process for image uploading. Trough AJAX we can dynamically save images.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-51031\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_4.png\" alt=\"Screenshot_4\" width=\"1101\" height=\"353\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_4.png 1101w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_4-250x80.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_4-300x96.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_4-768x246.png 768w\" sizes=\"(max-width: 1101px) 100vw, 1101px\" loading=\"lazy\" \/><\/p>\n<p>In the success function, we have to return the image path in which path we have uploaded the image. Then image will be shown on the Summernote editor.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-51032\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_5.png\" alt=\"Screenshot_5\" width=\"628\" height=\"398\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_5.png 628w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_5-250x158.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/06\/Screenshot_5-300x190.png 300w\" sizes=\"(max-width: 628px) 100vw, 628px\" loading=\"lazy\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If we use Summernote\u00a0editor by\u00a0normal process then it is not possible to upload images on the server because Summernote\u00a0converts images to Base 64 format so when we save an\u00a0image in the database then it takes too much space in the database. But with the\u00a0help of some code we can upload images on the server through <a href=\"https:\/\/webkul.com\/blog\/image-upload-summernote\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":71,"featured_media":41008,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1808,305,13],"tags":[2071],"class_list":["post-51027","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-opencart","category-php","tag-opencart"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Image Upload In summernote Editor - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/image-upload-summernote\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Upload In summernote Editor - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"If we use Summernote\u00a0editor by\u00a0normal process then it is not possible to upload images on the server because Summernote\u00a0converts images to Base 64 format so when we save an\u00a0image in the database then it takes too much space in the database. But with the\u00a0help of some code we can upload images on the server through [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/image-upload-summernote\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-03T18:14:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sambit Pattanayak\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sambit Pattanayak\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/image-upload-summernote\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/image-upload-summernote\/\"},\"author\":{\"name\":\"Sambit Pattanayak\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/23309d7bfba5b06d58b50ea5e3191f01\"},\"headline\":\"Image Upload In summernote Editor\",\"datePublished\":\"2016-06-03T18:14:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/image-upload-summernote\/\"},\"wordCount\":140,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/image-upload-summernote\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png\",\"keywords\":[\"opencart\"],\"articleSection\":[\"Ajax\",\"opencart\",\"php\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/image-upload-summernote\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/image-upload-summernote\/\",\"url\":\"https:\/\/webkul.com\/blog\/image-upload-summernote\/\",\"name\":\"Image Upload In summernote Editor - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/image-upload-summernote\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/image-upload-summernote\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png\",\"datePublished\":\"2016-06-03T18:14:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/image-upload-summernote\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/image-upload-summernote\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/image-upload-summernote\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/image-upload-summernote\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Image Upload In summernote Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/23309d7bfba5b06d58b50ea5e3191f01\",\"name\":\"Sambit Pattanayak\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b470681418ca47d8211cf413884189c631a12188462ba25500fa51c897318975?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b470681418ca47d8211cf413884189c631a12188462ba25500fa51c897318975?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Sambit Pattanayak\"},\"sameAs\":[\"http:\/\/webkul.com\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/sambit-p819\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Image Upload In summernote Editor - Webkul Blog","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:\/\/webkul.com\/blog\/image-upload-summernote\/","og_locale":"en_US","og_type":"article","og_title":"Image Upload In summernote Editor - Webkul Blog","og_description":"If we use Summernote\u00a0editor by\u00a0normal process then it is not possible to upload images on the server because Summernote\u00a0converts images to Base 64 format so when we save an\u00a0image in the database then it takes too much space in the database. But with the\u00a0help of some code we can upload images on the server through [...]","og_url":"https:\/\/webkul.com\/blog\/image-upload-summernote\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2016-06-03T18:14:21+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png","type":"image\/png"}],"author":"Sambit Pattanayak","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Sambit Pattanayak","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/image-upload-summernote\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/image-upload-summernote\/"},"author":{"name":"Sambit Pattanayak","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/23309d7bfba5b06d58b50ea5e3191f01"},"headline":"Image Upload In summernote Editor","datePublished":"2016-06-03T18:14:21+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/image-upload-summernote\/"},"wordCount":140,"commentCount":1,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/image-upload-summernote\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png","keywords":["opencart"],"articleSection":["Ajax","opencart","php"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/image-upload-summernote\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/image-upload-summernote\/","url":"https:\/\/webkul.com\/blog\/image-upload-summernote\/","name":"Image Upload In summernote Editor - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/image-upload-summernote\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/image-upload-summernote\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png","datePublished":"2016-06-03T18:14:21+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/image-upload-summernote\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/image-upload-summernote\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/image-upload-summernote\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/image-upload-summernote\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Image Upload In summernote Editor"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/23309d7bfba5b06d58b50ea5e3191f01","name":"Sambit Pattanayak","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b470681418ca47d8211cf413884189c631a12188462ba25500fa51c897318975?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b470681418ca47d8211cf413884189c631a12188462ba25500fa51c897318975?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Sambit Pattanayak"},"sameAs":["http:\/\/webkul.com"],"url":"https:\/\/webkul.com\/blog\/author\/sambit-p819\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/51027","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/71"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=51027"}],"version-history":[{"count":1,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/51027\/revisions"}],"predecessor-version":[{"id":51033,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/51027\/revisions\/51033"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/41008"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=51027"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=51027"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=51027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}