Angular-Summernote on-image-upload editor Object Undefined

Question

I'm struggling on figuring out how to use angular-summernote callback on-image-upload.

The code in my view:

<summernote data-editable="editable" data-on-image-upload="imageUpload(files, editor)"></summernote>

And the imageUplaod function:

$scope.imageUpload = function(files, editor) {
    console.log(files);  // FileList
    console.log(editor);  // undefined
    console.log($scope.editable); // undefined
};

And the image is not inserted into the editor. I have tried googling for the implementation example on the imageUpload, but find null. Can anyone show me how to do it?

Psycholinguistics

Answer 1

I struggled with this too. The current documentation for this basic feature is really poor. Anyway, this is how I do it:

$scope.imageUpload = function(files) {
    uploadEditorImage(files);
};

function uploadEditorImage(files) {
    if (files != null) {

        // Begin uploading the image.
        // Here I'm using the ngFileUpload module (named 'Upload') to upload files, but you can use $.ajax if you want
        // Remember to include the dependency in your Controller!
        Upload.upload({
            url: 'api/resources/upload-file',
            file: files[0]
        }).success(function(data, status, headers, config) {

            // The image has been uploaded to your server.
            // Now we need to insert the image back into the text editor.
            var editor = $.summernote.eventHandler.getModule(),
                uploaded_file_name = data.file_name, // this is the filename as stored on your server.
                file_location = '/uploads/'+uploaded_file_name;

            editor.insertImage($scope.editable, file_location, uplaoded_file_name);

        });

    }

};

The important part, to get the image to display back in the editor, is this bit here:

var editor = $.summernote.eventHandler.getModule(),
             uploaded_file_name = data.file_name,
             file_location = '/path-where-you-upload-your-image/'+uploaded_file_name;

editor.insertImage($scope.editable, file_location, uploaded_file_name);

$.summernote.eventHandler.getModule() retrieves all the API methods native to summernote. In this case, you need to use the insertImage() method in order to insert the uploaded image back into the editor.

If anyone has any cleaner solutions then please go ahead!

Gatewood

Answer 2

instead of using 'editor' object use the following when image uploaded

$('.summernote').summernote('editor.insertImage', url);

Pugnacious

But I don't think that is the angular ways. @Pugnacious – Psycholinguistics

Answer 3

I got it through AngularJS + JQuery in this way:

$scope.summernoteOptions = {
    height: 300,
    focus: true,
    lang: 'es-ES',
    callbacks: {
        onImageUpload: function(files) {
            var data = new FormData();
            data.append("file", files[0]);
            $.ajax({
                data: data,
                type: "POST",
                url: "/admin/api/insertar-imagen-summernote.php",
                cache: false,
                contentType: false,
                processData: false,
                success: function(url) {
                    $('.summernote').summernote('editor.insertImage', url);
                }
            });
        }
    }
};

Wrap