Does quill support image upload?

[forpizinmind]

Hi, Quill is an excellent editor!! May I know whether quill support image upload?any demo server side script? Many thanks.

[alexeckermann]

Would I be right in thinking that this would be a module? Since the server side, upload presentation and execution varies wildly from application to application.

Could it be a third-party module that we include rather than the core project deciding how uploads should be handled? Then its up to the developer to pick which one will work for them.

After using ckeditor for a long time I really like how simple quill is and would hate to see it turn into a behemoth like ckeditor.

[jhchen]

The hosting files part is definitely outside of Quill's scope but I think it could do more than it currently does. For example, one possibility is you just supply Quill with a server endpoint for uploads but the UI for drag and drop and choosing a file for upload could be handled by Quill (it would be organized as a module but one of the officially supported ones). A guide or example on using imgur or s3 for this could be provided as well.

[nburwell]

:+1: to have a supported module for the UI. I'm looking to move over to Quill and we already have server-side image upload support (for a custom plugin to Ext's HTMLEditor) and would love to have that support in QuillJS too!

[getup8]

I think this is available?

https://github.com/quilljs/quill/blob/develop/src/modules/image-tooltip.js

[alexcroox]

That's more of an image import from remote URL than image upload.

[swim]

Here's some basic integration with the Dropzone.js library https://github.com/swim/quill-dropzone - please note; this does not handle any server side code.

[jhchen]

I'm deleting all +1s so the comments can be easier to find. Please use the reaction feature to show support.

[lms-sam]

@getup8 page is missing https://github.com/quilljs/quill/blob/develop/src/modules/image-tooltip.js

[ycjcl868]

request entity will be too large when using Base64 encoding the image,

[MarcGodard]

Images should just be handled with a callback function.

onImage(data) {
     return server.upload(data)
           .then(imageUrl => {
                  return imageUrl
     })
}

[daslicht]

Images should just be handled with a callback function.

onImage(data) {
     return server.upload(data)
           .then(imageUrl => {
                  return imageUrl
     })
}

how does that work together with the default image upload from the snow theme ? please

[MarcGodard]

@daslicht This is my code, lots there that you do not need, but it should be easy to figure out.

let Image = Quill.import('formats/image')
    Image.className = 'img-responsive'
    Quill.register(Image, true)

    quill.getModule('toolbar').addHandler('image', () => {
      const input = document.createElement('input')
      input.setAttribute('type', 'file')
      input.setAttribute('accept', 'image/*')
      input.click()

      input.onchange = () => {
        const file = input.files[0]
        const reader = new window.FileReader()
        reader.readAsDataURL(file)

        reader.addEventListener('load', () => {
          let imageUpload = new Upload({
            uri: reader.result,
            type: file.type,
            size: file.size,
            fileName: file.name,
            source: 'text editor'
          })
          imageUpload
            .save()
            .then(data => {
              const range = quill.getSelection()
              quill.insertEmbed(range.index, 'image', env.siteUrl + '/api/upload/' + data.fileName)
            })
        }, false)
      }
    })

[kyrofa]

What about when the image is deleted? That needs to be handled somehow server-side as well.

[MarcGodard]

@kyrofa I just don't deal with that yet. Space is cheap. I do track when images were last used, so worst case if space gets tight, I can just delete images that haven't been accessed in years.

[sucrose]

Have you guys seen https://github.com/quilljs/quill/blob/9a77567fe356d384074df7479c33ceac509d9351/modules/uploader.js ?

[ydang204]

I face another issue after handling upload images to the server instead of generating a base64 string. I have 1 input to create title of news and quill to create the body. After changing the way save the image, I can not type on the title input twice

[sucrose]

I face another issue after handling upload images to the server instead of generating a base64 string. I have 1 input to create title of news and quill to create the body. After changing the way save the image, I can not type on the title input twice

Sounds like you have a front-end GUI bug, try opening a new ticket or review your console for any errors.

[codecret]

I face another issue after handling upload images to the server instead of generating a base64 string. I have 1 input to create title of news and quill to create the body. After changing the way save the image, I can not type on the title input twice

did you solve it , can we upload our image to a cloud server like cloudinary or firebase then use it in our rich text (in the same order)

[devmaxime]

I face another issue after handling upload images to the server instead of generating a base64 string. I have 1 input to create title of news and quill to create the body. After changing the way save the image, I can not type on the title input twice

did you solve it , can we upload our image to a cloud server like cloudinary or firebase then use it in our rich text (in the same order)

I have made a server-side script to upload to Firebase Storage as I was looking for the same answer you never found out here.

In your function that receive the content from quill editor (server-side)

```
const imageRegex = /<img src="data:image\/[^;]+;base64,([^"]+)"[^>]*>/g;
    let match;
    let updatedContent = content;

    // Extract all base64 images
    const matches = [];
    while ((match = imageRegex.exec(content)) !== null) {
        matches.push(match);
    }

    if (matches.length === 0) {
        return content;
    }

    // Process each base64 image and replace it with the uploaded image URL
    for (const match of matches) {
        const base64Image = match[1];
        checkImageSize(base64Image); // Check image size before processing
        const imageUrl = await uploadImageToStorage(base64Image);
        updatedContent = updatedContent.replace(match[0], `<img src="${imageUrl}" />`);
    }
```

If you need it as well, here is my uploadImageToStorage function

```
const uploadImageToStorage = async (base64Image: string): Promise<string> => {
    try {
        const buffer = Buffer.from(base64Image, 'base64');
        const fileName = `articles/${Date.now()}.jpg`;
        const file = admin.storage().bucket().file(fileName);

        await file.save(buffer, {
          contentType: 'image/jpeg',
        });

        // Return the public URL of the uploaded file
        return `https://storage.googleapis.com/${admin.storage().bucket().name}/${fileName}`;
    } catch (error) {
        logger.error('Error uploading image to storage:', error);
        throw new Error('Error uploading image to storage: ' + error);
    }
};
```