Insert image not working in Material Note v2 about materialnote

[thodalf]

Same for Link

[kabudu]

@Cerealkillerway Can you provide any insight into this issue?

[Cerealkillerway]

Hi, sorry but I can't reproduce the issue; I've tested with both chrome and firefox;
when you select an image from your hard drive, the modal should disappear immediatly and the image should appear in the editor area;
maybe the provided dist was outdated, I've rebuilt it, please try with this latest one by fetching again the repo and let me know

[thodalf]

I only use the dist folder. Try with this specific confirguration, maybe you could reproduce the issue.

[Cerealkillerway]

ok let's have a clean start: please pull latest commit from the repo, I've just updated the dist folder;
then please check if everything works by opening the demo (examples/default.html);

[thodalf]

Sorry, but not working too. I have the good version of materialNote (from today) but insert image and insert link are still disabled. My version of materialize is v0.100.2 (in your example is 0.100.1 but, I think it's not really important). What is your trigger/event for validate this insert ? Maybe it's that, the probleme

[Cerealkillerway]

but also the demo from the repo (in examples folder, the default.html) is not working for you?

[thodalf]

Yes, demo work for me in other project...
I don't understand why, in my project (and @kabudu project), this two actions not working.
Here, thematerialnote declaration :

> var summernote = $('#summernote').materialnote({
>         lang: 'fr-FR',
>         toolbar: [
>             ['style', ['style']],
>             ['font', ['bold', 'italic', 'underline', 'clear']],
>             ['fontname', ['fontname']],
>             ['color', ['color']],
>             ['para', ['ul', 'ol', 'paragraph']],
>             ['height', ['height']],
>             ['table', ['table']],
>             ['insert', ['link', 'picture', 'hr']],
>             ['view', ['fullscreen', 'codeview']],
>             ['help', ['help']]
>         ],
>         height: '400px',
>         fontNames: [
>             'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
>             'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',
>             'Tahoma', 'Times New Roman', 'Verdana', 'Microsoft YaHei', 'Permanent Marker'
>         ],
>         callbacks: {
>             onImageUpload: function (files) {
>                 for (var i = files.length - 1; i >= 0; i--) {
>                     sendFile(files[0]);
>                 }
>             }
>         },
>     });

[Cerealkillerway]

Ok, I've tested your configuration in the demo and works properly; I mean the modal is closed after selecting images;
I can see that "files" is an object, selected images are stored inside an array in the "images" property, so you should cycle "files.images":

callbacks: {
     onImageUpload: function (files) {
            let images = files.images;

            for (var i = images.length - 1; i >= 0; i--) {
                  //sendFile(images[0]);
                  console.log(images[0]);
             }
      }
},

but this is how summernote normally works, I haven't changed the object passed to the callback;
of course I can't test the sendFile function, but the callback is called correctly;

so in your project there must be something else that make it not working properly;
can you share the project?

[thodalf]

Ok, thanks for your answer.
My callback works when I drag and drop image into materialnote editor, but modal form always not working.
I can't send my project, it's professionnal...

So dropzone event seem working, but not file input event. What event trigger when input file change ?

[Cerealkillerway]

well the button should act exactly as in summernote (just as a test, have you tried to put summernote in your project to see if the same problem happens?)

in particular look at the code in file src/js/materialize/module/ImageDialog.js at row 92:

                  $imageUrl.on('keyup paste', function () {
                        var url = $imageUrl.val();
                        ui.toggleBtn($imageBtn, url);
                    }).val('').trigger('focus');
                    self.bindEnterKey($imageUrl, $imageBtn);

this is the trigger for when you write/paste in the "image URL" textbox; for when you use the file chooser it's a bit more complicated (same file as above, row 87):

                   $imageBtn.click(function (event) {
                        event.preventDefault();
                        data.resolve($imageUrl.val());
                    });

it uses the callback of the file chooser to resolve "data" that is a deferred object (defined at row 132);
at row 138 you see that inside the data's callback the modal should be hidden when the deferred is resolved:

ui.hideDialog(self.$dialog);

the function ui.toggleBtn() is responsible to toggle the "disabled" class:

        toggleBtn: function ($btn, isEnable) {
            $btn.toggleClass('disabled', !isEnable);
            $btn.attr('disabled', !isEnable);
        }

you can manually toggle the disabled class on the button if you have to, but anyway the behaviour you are experimenting should not happen, so would be better to find out the cause

[kabudu]

I've given this a try using the latest version of materialnote.js in the dist folder, but no difference, the same issue persists. However, dragging + dropping into the editor does work.

[Cerealkillerway]

ok, but since we tried that the demo itself it's working there must be something else that produces the issue;
can you provide an example that reproduces the issue?

[kabudu]

Sure.

Here is the javascript:

var wysiwyg = $('.wysiwyg');
if (!wysiwyg.length) {
    return;
}
var type = wysiwyg.data('type');
var hash = $(wysiwyg.data('hashSource')).val();
var upload_url = wysiwyg.data('uploadUrl');
var wysiwyg_type = wysiwyg.data('wysiwyg') ? wysiwyg.data('wysiwyg') : 'summernote';
wysiwyg[wysiwyg_type]({
    height: 400,
    focus: false,
    fontNames: ['Arial', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana', 'Roboto'],
    fontNamesIgnoreCheck: ['Roboto'],
    toolbar: [
        ['style', ['style']],
        ['fontname', ['fontname']],
        ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']],
        ['table', ['table']],
        ['insert', ['link', 'picture', 'hr']],
        ['view', ['fullscreen', 'codeview']]
    ],
    onImageUpload: function(files) {
        var file = files[0];
        var data = new FormData();
        data.append('file', file);
        data.append('type', type);
        data.append('hash', hash);
        $.ajax({
            url: upload_url,
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(data) {
                var img_node = document.createElement('IMG');
                img_node.src = data.url;
                img_node.style = 'width:100%;';
                wysiwyg[wysiwyg_type]('insertNode', img_node);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(textStatus + " " + errorThrown);
            }
        });
    },
    callbacks: {
        onImageUpload: function(files) {
            var file = files[0];
            var data = new FormData();
            data.append('file', file);
            data.append('type', type);
            data.append('hash', hash);
            $.ajax({
                url: upload_url,
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function(data) {
                    var img_node = document.createElement('IMG');
                    img_node.src = data.url;
                    img_node.style = 'width:100%;';
                    wysiwyg[wysiwyg_type]('insertNode', img_node);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus + " " + errorThrown);
                }
            });
        }
    }
});

and here is the HTML:

<input id="summary_title" name="summary_title" required="required" placeholder="Title" type="text"/>
<textarea id="summary_body" name="summary_body" required="required" placeholder="Body" rows="15" class="wysiwyg" data-type="summary" data-hash-source="#summary_title" data-upload-url="/media/upload" data-wysiwyg="materialnote"></textarea>

It's worth noting that the above worked as expected with materialnote 1.*

[kabudu]

@Cerealkillerway Have you had a chance to look at the example I provided?

[Cerealkillerway]

@kabudu to be honest I've tested it a little and found no problems; I've added a demo with your code in the repository (examples/test-1.html if you want to check it);

as you can see in test-1.html, if you paste an image url it works; if you select an image from hd, it logs an error in console because the upload needs some setup to work locally, anyway the dialog is closed correctly.

Maybe it happens under certain circumstances? If you can provide steps to reproduce the issue let me know

I've tested in latest chrome, firefox and vivaldi

[kabudu]

@Cerealkillerway This is still not working for me, but let's keep the issue closed for now. I will re-visit this at some point to see if I can make it work, otherwise I will just live with the drag+drop workaround.

[Cerealkillerway]

@kabudu, have you tested the example I provided using your code inside the examples directory? Since that works I assume the problem is somewhere else; To go any further you should provide a working example demostrating the issue

[kabudu]

I finally discovered what the issue was. It appears to be some sort of race condition where the material note wysiwyg editor was being initialised even though the dom had not fully loaded, although that shouldn't happen.

Either way, I resolved it by adding a short delay to the initialisation of material note, i.e.

window.setTimeout(function(obj){
    obj.init();
},500, this.wysiwyg);