CODEWITHSUNDEEP
javascriptsummernote
Michael Moxley
Michael Moxley

Reputation: 36

summernote 0.8.8 onimageupload example

Does anyone have a good example of the code to use Summernote 0.8.8 that uploads images to a directory on the server (not as base64)? I tried some of the older posted results(they might have worked with older versions of Summernote),but nothing seams to work for me. I'm not strong on Java, so I'm not sure how to fix the issue.

Summernote's web example is

$('#summernote').summernote({
  callbacks: {
    onImageUpload: function(files) {
      $summernote.summernote('insertNode', imgNode);
    }
  }
});

$('#summernote').on('summernote.image.upload', function(we, files) {
$summernote.summernote('insertNode', imgNode);
});

But this does not work, as the image does not 'upload' it is still in Base64. This does work for me, as it loads too slow. Thanks!

Upvotes: 1

Views: 2739

Answers (1)

4Jean
4Jean

Reputation: 765

FOR SUMMERNOTE 0.88+

I Tested it with these CDN

<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.min.js"></script>

JAVASCRIPT

<script>
    $(document).ready(function() {
        $('#summernote').summernote({
            height: "300px",
            dialogsInBody: true,
            callbacks: {
                onImageUpload: function(files) {
                    uploadFile(files[0]);
                }
            }
        });
    });

    function uploadFile(file) {
        data = new FormData();
        data.append("file", file);

        $.ajax({
            data: data,
            type: "POST",
            url: "upload_url_path", //replace with your url
            cache: false,
            contentType: false,
            processData: false,
            success: function(url) {
                $('#summernote').summernote("insertImage", url);
            }
        });
    }
</script>

PHP SAMPLE CODE FOR UPLOAD

      <?php
      $allowed = array( 'png', 'jpg', 'gif' );
        if( isset($_FILES['file']) && $_FILES['file']['error'] == 0 ) {
            $extension = pathinfo( $_FILES['file']['name'], PATHINFO_EXTENSION );
            if( !in_array( strtolower( $extension ), $allowed ) ) {
                 echo 'AN ERROR OCCURED - INVALID IMAGE';
                exit;
            }
            if( move_uploaded_file( $_FILES['file']['tmp_name'], 'assets/images/'.$_FILES['file']['name'] ) ) {
                echo base_url().'assets/images/'.$_FILES['file']['name']; // echo absolute file_url
                exit;
            }
        }
        echo 'AN ERROR OCCURED';
        exit;
?>

https://summernote.org/deep-dive/#onimageupload

Upvotes: 4

Related Questions