Does ng-quill support image upload?

[santoshshinde2012]

ngQuill works well with Quill , and inserting Base64-encoded images is ok but too larger images will exceed my database table limit.

if image insertion could be conducted by uploading to server folder (e.g. /img/test.jpg) and then include the url in the , that would make me not worry about limit, since texts don't occupy too much storage in database.

I have check sample demo with qill js to here

Is there any way to configure the ng-quill to make this happen?

[santoshshinde2012]

I got the solution from here .

I have used following steps to implement this feature

1. Instance of editor

    $scope.editorCreated = function (editor) {
   
         //get editor instance after editor created
         $scope.quillEditor = editor;
   
        // quill editor add image handler
        editor.getModule('toolbar').addHandler('image', () => {
          selectLocalImage();
        });
     }

2. select image from Local

   function selectLocalImage() {
       //browse image from local
        saveToServer(file)
     }

3.Upload on Server

       // @param {File} file     
       function saveToServer(file) {
          //upload on server
          insertToEditor(url);
        }

4.Insert image url to rich editor.

       function insertToEditor(url) {
          // push image url to rich editor.
          var range = $scope.quillEditor.getSelection();
          var imagePosition = 0;
          if(range){
           imagePosition = range.index;
          }
          $scope.quillEditor.insertEmbed(imagePosition, 'image', url);
        }

Hopes this will help some one !

Thanks.

[KillerCodeMonkey]

Nice! Thanks for sharing the solution ;).

[Cristiian]

Hello, I'm trying to upload the image to the server, it works, but I cannot refresh the scope until I press a key in the editor, tried $apply(), $timeout, with no success, do you have any suggestion?

$scope.editorCreated = function (editor) {
    //get editor instance after editor created
    $scope.quillEditor = editor;

    // quill editor add image handler
    editor.getModule('toolbar').addHandler('image', () => {
        selectLocalImage();
    });
};

function selectLocalImage() {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.click();
    input.onchange = function () {
        // file type is only image.
        if (/^image\//.test(input.files[0].type)) {
            saveToServer(input.files[0]);

        } else {
            console.warn('You could only upload images.');
        }
    };
}

// @param {File} file     
function saveToServer(file) {
    //upload on server
    insertToEditor(base_url + "public/img/logo.jpg");
}

function insertToEditor(url) {
    // push image url to rich editor.
    var range = $scope.quillEditor.getSelection();
    var imagePosition = 0;
    if (range) {
        imagePosition = range.index;
    }
    $scope.quillEditor.insertEmbed(imagePosition, 'image', url);
}

[KillerCodeMonkey]

Try to Pass the Source 'user' to your content insertion

Cristiian notifications@github.com schrieb am Mo., 25. Feb. 2019, 18:45:

Hello, I'm trying to upload the image to the server, it works, but I cannot refresh the scope until I press a key in the editor, tried $apply(), $timeout, with no success, do you have any suggestion?

$scope.editorCreated = function (editor) { //get editor instance after editor created $scope.quillEditor = editor;

// quill editor add image handler
editor.getModule('toolbar').addHandler('image', () => {
    selectLocalImage();
});

}; function selectLocalImage() { const input = document.createElement('input'); input.setAttribute('type', 'file'); input.click(); input.onchange = function () { // file type is only image. if (/^image\//.test(input.files[0].type)) { saveToServer(input.files[0]);

    } else {
        console.warn('You could only upload images.');
    }
};

} // @param {File} file function saveToServer(file) { //upload on server insertToEditor(base_url + "public/img/logo.jpg"); } function insertToEditor(url) { // push image url to rich editor. var range = $scope.quillEditor.getSelection(); var imagePosition = 0; if (range) { imagePosition = range.index; } $scope.quillEditor.insertEmbed(imagePosition, 'image', url); }

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ng-quill/issues/128#issuecomment-467107648, or mute the thread https://github.com/notifications/unsubscribe-auth/ACKOYF156dSBHy4Dt1CEgH-08VHm1I5bks5vRCEugaJpZM4PIox_ .

[toxaq]

Source as 'user' worked for me.