Summernote image upload

Question

I have a problem with editor Summernote  I want to upload images into a catalog on the server  I have some script    lt script type  text javascript  gt      function               summernote    summernote         height  200                  summernote    summernote        height 300       onImageUpload  function files  editor  welEditable          sendFile files 0  editor welEditable                       lt  script gt   lt script type  text javascript  gt    function sendFile file  editor  welEditable        data   new FormData        data append  file   file       url    http   localhost spichlerz uploads         ajax         data  data        type   POST         url  url        cache  false        contentType  false        processData  false        success  function  url            editor insertImage welEditable  url                        lt  script gt      lt td gt  lt textarea class  summernote  rows  10  cols  100  name  tekst  gt  lt  textarea gt  lt  td gt    Of course  I have all js and CSS files  What I do wrong  If I click on image upload and go to the editor  the image is not in textarea   If I delete sendFile function and onImageUpload  the image save on base64   Link to summernote  http   hackerwins github io summernote

User · Answer

This code worked well with new version  v0 8 12   2019-05-21       summernote   summernote           callbacks                onImageUpload  function files                    for let i 0  i  lt  files length  i                            upload files i                                                       height  500                 upload   function  file            let out   new FormData            out append  file   file  file name              ajax               method   POST               url   upload php               contentType  false              cache  false              processData  false              data  out              success  function  img                        summernote   summernote  insertImage   img                              error  function  jqXHR  textStatus  errorThrown                    console error textStatus         errorThrown                                      PHP Code  upload php   if    FILES  file    name       if     FILES  file    error           name   md5 rand 100  200         ext   explode        FILES  file    name          filename    name          ext 1        destination    images      filename    change this directory      location     FILES  file    tmp name        move uploaded file  location   destination       echo  images      filename   change this URL     else      echo   message    Ooops   Your upload triggered the following error       FILES  file    error

User · Answer

Summernote converts your uploaded images to a base64 encoded string by default  you can process this string or as other fellows mentioned you can upload images using onImageUpload callback  You can take a look at this gist which I modified a bit to adapt laravel csrf token here  But that did not work for me and I had no time to find out why  Instead  I solved it via a server-side solution based on this blog post  It gets the output of the summernote and then it will upload the images and updates the final markdown HTML  use Illuminate Http Request  use Illuminate Support Facades Storage   Route  get   your-route-to-editor   function          return view  your-view         Route  post   your-route-to-processor   function  Request  request             this- gt validate  request                editordata    gt   required                       data    request- gt input  editordata              loading the html data from the summernote editor and select the img tags from it         dom   new  DomDocument            dom- gt loadHtml  data  LIBXML HTML NOIMPLIED   LIBXML HTML NODEFDTD               images    dom- gt getElementsByTagName  img                   foreach  images as  k   gt   img                for now src attribute contains image encrypted data in a nonsence string             data    img- gt getAttribute  src                 getting the original file name that is in data-filename attribute of img             file name    img- gt getAttribute  data-filename                 extracting the original file name and extension             arr   explode       file name               upload base directory    public                 original file name  time     k              original file extension  png               if  sizeof  arr      2                     original file name    arr 0                    original file extension    arr 1                           else                                the file name contains extra   in itself                  original file name   implode  quot   quot  array slice  arr 0 sizeof  arr -1                     original file extension    arr sizeof  arr -1                            list  type   data    explode       data              list    data         explode       data                data   base64 decode  data                path    upload base directory  original file name      original file extension                uploading the image to an actual file on the server and get the url to it to update the src attribute of images            Storage  put  path   data                img- gt removeAttribute  src                        you can remove the data-filename attribute here too if you want              img- gt setAttribute  src   Storage  url  path                  data base stuff here                saving the attachments path in an array                    updating the summernote WYSIWYG markdown output          data    dom- gt saveHTML               data base stuff here             save the post along with it attachments array        return view  your-preview-page  - gt with   data   gt  data

User · Answer

I tested this code and Works Javascript  lt script gt    document  ready function           summernote   summernote       height  200      onImageUpload  function files  editor  welEditable          sendFile files 0   editor  welEditable                  function sendFile file  editor  welEditable        data   new FormData        data append  quot file quot   file         ajax         data  data        type   quot POST quot         url   quot Your URL POST  php  quot         cache  false        contentType  false        processData  false        success  function url            editor insertImage welEditable  url                            lt  script gt   PHP if    FILES  file    name        if     FILES  file    error           name   md5 rand 100  200         ext   pathinfo   FILES  file    name    PATHINFO EXTENSION        filename    name           ext       destination     assets images    filename    change this directory      location     FILES  quot file quot    quot tmp name quot        move uploaded file  location   destination       echo  http   test yourdomain al images    filename    change this URL     else       echo  message    Ooops   Your upload triggered the following error       FILES  file    error           Update  After 0 7 0 onImageUpload should be inside callbacks option as mentioned by  tugberk     summernote   summernote       height  200      callbacks            onImageUpload  function files  editor  welEditable                sendFile files 0   editor  welEditable

User · Answer

UPLOAD IMAGES WITH PROGRESS BAR  Thought I d extend upon user3451783 s answer and provide one with an HTML5 progress bar  I found that it was very annoying uploading photos without knowing if anything was happening at all   HTML   lt progress gt  lt  progress gt    lt div id  summernote  gt  lt  div gt    JS     initialise editor      summernote   summernote           onImageUpload  function files  editor  welEditable                sendFile files 0   editor  welEditable                     send the file  function sendFile file  editor  welEditable            data   new FormData            data append  file   file             ajax               data  data              type   POST               xhr  function                     var myXhr     ajaxSettings xhr                    if  myXhr upload  myXhr upload addEventListener  progress  progressHandlingFunction  false                   return myXhr                             url  root     assets scripts php app uploadEditorImages php               cache  false              contentType  false              processData  false              success  function url                    editor insertImage welEditable  url                                   update progress bar  function progressHandlingFunction e       if e lengthComputable              progress   attr  value e loaded  max e total               reset progress on complete         if  e loaded    e total                   progress   attr  value   0 0

User · Answer

Image Upload for Summernote v0 8 1  for large images      summernote   summernote       height     window  height   - 300       callbacks            onImageUpload  function image                uploadImage image 0                         function uploadImage image        var data   new FormData        data append  image   image         ajax           url   Your url to deal with your image           cache  false          contentType  false          processData  false          data  data          type   post           success  function url                var image       lt img gt    attr  src    http       url                   summernote   summernote  insertNode   image 0                       error  function data                console log data

[javascript] Summernote image upload

Examples related to javascript

Examples related to image

Examples related to upload

Examples related to summernote