Ngx-quill: Image Upload in Ionic 4

[ThomasOliver545]

Hi, I am not able to upload an Image to my server with Ionic 4. The editor itself show up correctly:

I added this to my html:
<quill-editor (onEditorCreated)="EditorCreated($event)" ></quill-editor>

and this to my component.ts:
EditorCreated(quill) { const toolbar = quill.getModule('toolbar'); toolbar.addHandler('image', this.imageHandler.bind(this)); this.editor = quill; }

but in my ImageHandler I only get an empty "formdata"
@KillerCodeMonkey If you need more information please tell me :=)

[KillerCodeMonkey]

In General quilljs converts Images to base64 Strings. If you want to Upload
the real file to your Server You Need to implement your own Image Handler
or custom Image Upload.

So this is Not an issue If ngx-quill, more a limitation of the Default
quilljs Editor.

Greets

ThomasKi93 [e-mail] schrieb am So., 11. Aug. 2019, 17:14:

Hi, I am not able to upload an Image to my server with Ionic 4.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/485?email_source=notifications&email_token=AARI4YG2QWGYT764MITLXPLQEAUENA5CNFSM4IK4AYZKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HESYIVA,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AARI4YHL5FXGKDUDUDWOPRLQEAUENANCNFSM4IK4AYZA
.

[ThomasOliver545]

Hi @KillerCodeMonkey
It would also be great if I could save the Base64 String, but it seems it doesn't work with ionic (4)?

[KillerCodeMonkey]

Eeehm i never checked it If the Default quilljs Image Module works for
mobile.

You could check If it is working with plain quilljs or ngx-quill on mobile
devices?

ThomasKi93 [e-mail] schrieb am So., 11. Aug. 2019, 17:35:

Hi @KillerCodeMonkey https://github.com/KillerCodeMonkey
It would also be great if I could save the Base64 String, but it seems it
doesn't work with ionic (4)?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/485?email_source=notifications&email_token=AARI4YGHS5NFCBTJJCZ6P5LQEAWS5A5CNFSM4IK4AYZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4BDELI#issuecomment-520237613,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AARI4YBCFDH5CMBF4AKWRBLQEAWS5ANCNFSM4IK4AYZA
.

[ThomasOliver545]

@KillerCodeMonkey
Actually I am not understanding, why it is not working in Ionic.
All I can tell you is, that I think that i configured it correctly and it is not working as it should.
So as far as I see, it is not working with ngx-quill n ionic 4

[KillerCodeMonkey]

In General there is no real image Upload with quilljs. It is an inline
Image in base64.

If you want a real file upload You have to implement it on your own or
google for it

Bengt Weiße [e-mail] schrieb am So., 11. Aug. 2019, 17:36:

Eeehm i never checked it If the Default quilljs Image Module works for
mobile.

You could check If it is working with plain quilljs or ngx-quill on mobile
devices?

ThomasKi93 [e-mail] schrieb am So., 11. Aug. 2019,
17:35:

Hi @KillerCodeMonkey https://github.com/KillerCodeMonkey
It would also be great if I could save the Base64 String, but it seems it
doesn't work with ionic (4)?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/485?email_source=notifications&email_token=AARI4YGHS5NFCBTJJCZ6P5LQEAWS5A5CNFSM4IK4AYZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4BDELI#issuecomment-520237613,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AARI4YBCFDH5CMBF4AKWRBLQEAWS5ANCNFSM4IK4AYZA
.

[ThomasOliver545]

Yeah, like i wrote in my first comment, I did this, but I am not receiving the base64 String, so i could upload it to my server

[KillerCodeMonkey]

What so You expect when You add an Image to the Editor content?

When i use my Ionic 4 example live demo, i can choose an Image and it is
placed in the Editor. After that the ngModel or formControl gets the
content and You can store the Editor content

Bengt Weiße [e-mail] schrieb am So., 11. Aug. 2019, 17:36:

Eeehm i never checked it If the Default quilljs Image Module works for
mobile.

You could check If it is working with plain quilljs or ngx-quill on mobile
devices?

ThomasKi93 [e-mail] schrieb am So., 11. Aug. 2019,
17:35:

Hi @KillerCodeMonkey https://github.com/KillerCodeMonkey
It would also be great if I could save the Base64 String, but it seems it
doesn't work with ionic (4)?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/485?email_source=notifications&email_token=AARI4YGHS5NFCBTJJCZ6P5LQEAWS5A5CNFSM4IK4AYZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4BDELI#issuecomment-520237613,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AARI4YBCFDH5CMBF4AKWRBLQEAWS5ANCNFSM4IK4AYZA
.

[ThomasOliver545]

But I don't want to story the whole "article" including the image base 64 in my database.
I want to include only the string with the link to the image in the "article", so my db is not blowing up.

Do you know what i mean?

[KillerCodeMonkey]

Yep and thats where You Need to implement a custom Image Handler ;).

Check Out quilljs documentation for that. But i think there are already
some thirdparty modules to achieve this.

Or You could listen to the onContentChanged Output, there You get the new
delta, containung the latest changes and the Indexes in the content.

There You can Grab the Image, Upload IT and replace IT in the content.

Bengt Weiße [e-mail] schrieb am So., 11. Aug. 2019, 17:42:

What so You expect when You add an Image to the Editor content?

When i use my Ionic 4 example live demo, i can choose an Image and it is
placed in the Editor. After that the ngModel or formControl gets the
content and You can store the Editor content

Bengt Weiße [e-mail] schrieb am So., 11. Aug. 2019,
17:36:

Eeehm i never checked it If the Default quilljs Image Module works for
mobile.

You could check If it is working with plain quilljs or ngx-quill on
mobile devices?

ThomasKi93 [e-mail] schrieb am So., 11. Aug. 2019,
17:35:

Hi @KillerCodeMonkey https://github.com/KillerCodeMonkey
It would also be great if I could save the Base64 String, but it seems
it doesn't work with ionic (4)?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/485?email_source=notifications&email_token=AARI4YGHS5NFCBTJJCZ6P5LQEAWS5A5CNFSM4IK4AYZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4BDELI#issuecomment-520237613,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AARI4YBCFDH5CMBF4AKWRBLQEAWS5ANCNFSM4IK4AYZA
.

[ThomasOliver545]

I am sorry, but whether if I used
https://www.npmjs.com/package/quill-image-uploader
or
https://www.npmjs.com/package/quill-image-uploader

or a custom one, I am not getting it to work with Ionic.

And I also can't find a working example with google.
Have you tried this?

[KillerCodeMonkey]

Nope. But it looks straight forward. This is how You use any other quill
Module.

Never tried IT. Did You get some Error using it?

ThomasKi93 [e-mail] schrieb am So., 11. Aug. 2019, 18:04:

I am sorry, but whether if I used
https://www.npmjs.com/package/quill-image-uploader
or
https://www.npmjs.com/package/quill-image-uploader

or a custom one, I am not getting it to work with Ionic.

And I also can't find a working example with google.
Have you tried this?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/485?email_source=notifications&email_token=AARI4YCK6JQOHBFDO5A44ZTQEAZ7LA5CNFSM4IK4AYZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4BDVEQ#issuecomment-520239762,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AARI4YFZYRHW5J4DIS3T5D3QEAZ7LANCNFSM4IK4AYZA
.

[ThomasOliver545]

So with this https://www.npmjs.com/package/quill-image-uploader
where do i add the
const quill = new Quill(editor, {...})
It can't be provided in component and not in module?
Do you ahve any hint?

[KillerCodeMonkey]

You do Not Need this Part, because ngx-quill is doing it for You.

Just Register the Module and then You can Pass the config of the Module to
ngx-quill modules property. Just Checkout the ngx-quill-example Repo there
You can See how to use external modules e.g. Image resize module, quill
mention.

ThomasKi93 [e-mail] schrieb am So., 11. Aug. 2019, 18:13:

So with this https://www.npmjs.com/package/quill-image-uploader
where do i add the
const quill = new Quill(editor, {...})
It can't be provided in component and not in module?
Do you ahve any hint?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/485?email_source=notifications&email_token=AARI4YDHU27CYMPY62FIJJTQEA3CNA5CNFSM4IK4AYZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4BD2BI#issuecomment-520240389,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AARI4YAJ44SYDALK7P3SZXDQEA3CNANCNFSM4IK4AYZA
.

[ThomasOliver545]

Ok.
I now added these:

import Quill from 'quill';
import { ImageUpload } from 'quill-image-upload';

Quill.register('modules/imageUpload', ImageUpload);

....

 modules = {}

  constructor() {
    this.modules = {
      'imageUpload': 'http://localhost:3000/api/v1/article/image/upload'
    }
   }

to my component.

But after looking into https://github.com/KillerCodeMonkey/ngx-quill-example/blob/master/src/app/emoji/emoji.component.ts
I still don't know how to get it working
Sorry, maybe I am just missing the forest through the trees ;:D

[KillerCodeMonkey]

In the readme of the Module, You can See, that you should Pass the Key an
"imageUploader" key with an object with an Upload handler to the modules.

You can so this with ngx-quill by Passing this object to the [modules]
property documented in the ngx-quill readme.

ThomasKi93 [e-mail] schrieb am So., 11. Aug. 2019, 18:24:

Ok.
I now added these:
`import Quill from 'quill';
import { ImageUpload } from 'quill-image-upload';

Quill.register('modules/imageUpload', ImageUpload);`

to my component.

But after looking into
https://github.com/KillerCodeMonkey/ngx-quill-example/blob/master/src/app/emoji/emoji.component.ts
I still don't know how to pass the config?
Sorry, maybe I am just missing the forest through the trees ;:D

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/485?email_source=notifications&email_token=AARI4YDQMCSVZ6WRXFSSQJLQEA4MHA5CNFSM4IK4AYZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4BEASI#issuecomment-520241225,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AARI4YGUYUSCHCEFI5442TDQEA4MHANCNFSM4IK4AYZA
.

[KillerCodeMonkey]

any updates?

[ThomasOliver545]

Hi, I will check it this evening and will post the result here :)

[KillerCodeMonkey]

i will close this for now. but feel free to let me know about your process or solution

[dds-du]

Hey,brother,I resolved the same thing according to your code and some others issue's code.
This is my code:
html:

<quill-editor 
                (onEditorCreated)="EditorCreated($event)"
                (onContentChanged)="changed($event)"
            >

script:

EditorCreated(editor){
        let that = this
        /**
       * Step1. select local image
       *
       */
        function selectLocalImage() {
          const input = document.createElement('input');
          input.setAttribute('type', 'file');
          input.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/x-icon');
          input.click();

          // Listen upload local image and save to server
          input.onchange = () => {
            const file = input.files[0];

            // file type is only image.
            if (/^image\//.test(file.type)) {
              saveToServer(file);
            } else {
              console.warn('You could only upload images.');
            }
          };
        }

        /**
         * Step2. save to server
         *
         * @param {File} file
         */
        function saveToServer(files: File) {
            let formData = new FormData();
            formData.append('pathName', 'forage');
            formData.append('file', files);
            that.httpService.postBlob('/service/sys/file/uploadFile', formData)
            .subscribe(event=>{
                if(event.type==4){
                    let res = event.body
                    console.log(res)
                    if(res && res.code == 0){
                        //this.imgSrc = res.data
                        insertToEditor(res.data);
                    }
                }
            })
        }

        /**
         * Step3. insert image url to rich editor.
         *
         * @param {string} url
         */
        function insertToEditor(url: string) {
          // push image url to rich editor.
          const range = editor.getSelection();
          editor.insertEmbed(range.index, 'image', url);
        }
        console.log(editor)
        editor.getModule('toolbar').addHandler('image', () => {
          selectLocalImage();
        });
    }

the 'HttpService' is my local class,you could change it to your own code
@ThomasKi93

[KillerCodeMonkey]

thanks for sharing :)

[dds-du]

No problem.

[WUKS87]

@dds-du @KillerCodeMonkey How to handle the case when user remove image? I would like to remove that image from server.

I used/modified the code from above (@dds-du), image is uploading to Firebase storage.

[KillerCodeMonkey]

i would move that logic to the backend.

just diff old and new content on save. Just remove/add images.

[WUKS87]

When added to ngx-quill images are uploaded to Firebase Storage, then I retrieve URL and show image in editor.
I will use like you said difference between old/new content and parse images to figure which to remove from storage.
Thank you guys.