Summernote Image Upload Not Working (PHP)

Question

I've tried various solutions found on here and elsewhere - at best I get the Base64 code inserted into the editor (I believe this is Summernote's default), otherwise I get nothing.

The solution I'm attempting now is taken from this post.

Here's my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
</head>
<body>
<div id="summernote"></div>
<script>
    $(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("file", file);
            $.ajax({
                data: data,
                type: "POST",
                url: "img-upload.php",
                cache: false,
                contentType: false,
                processData: false,
                success: function(url) {
                    editor.insertImage(welEditable, url);
                }
            });
        }
    });
</script>
</body>
</html>

Here's the img-upload.php source (domain name concealed):

<?php
if ($_FILES['file']['name']) {
    if (!$_FILES['file']['error']) {
        $name = md5(rand(100, 200));
        $ext = explode('.', $_FILES['file']['name']);
        $filename = $name . '.' . $ext[1];
        $destination = '/uploads/' . $filename; //change this directory
        $location = $_FILES["file"]["tmp_name"];
        move_uploaded_file($location, $destination);
        echo 'http://<mydomain>/uploads/' . $filename;//change this URL
    }
    else
    {
        echo  $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
    }
}
?>

Looks like I have write permissions to the uploads folder, can anyone see anything else wrong with this?

The code I pasted here is everything, the only error reporting is in the upload script, as this is called from inside the Summernote script where would errors be displayed/logged? — Waloob73, Aug 25 '16 at 12:23
I used an alert box to test that Summernote is calling the sendFile function, so I know that's being called, so the error may be in the PHP script — Waloob73, Aug 25 '16 at 12:27
I've also tried the method shown on this post (http://stackoverflow.com/questions/30578916/summernote-show-images-that-have-been-uploaded-to-a-folder?rq=1) but nothing is uploaded. The image adds to the editor in Base64 just as it would without all this in place. — Waloob73, Aug 25 '16 at 12:54
Is your ajax hits the url ? Whats is the response of your ajax after hitting ? — Suresh Velusamy, Aug 26 '16 at 06:32

score 2 · Answer 1 · answered Oct 14 '16 at 01:42

the onImageUpload element its a callbacks element, here's your code:

    $('#summernote').summernote({
        height: 200,
        callbacks: {
            onImageUpload: function(files, editor, welEditable) {
                sendFile(files[0], editor, welEditable);
            }           
        }
    });

Summernote Image Upload Not Working (PHP)

1 Answers1