Quill upload image to server aws s3

quill_image_upload_to_server_aws_s2.js

// Check whether quill content is empty
function isQuillEmpty(quill) {
    if ((quill.getContents()['ops'] || []).length !== 1) {
        return false
    }

    return quill.getText().trim().length === 0
}

// Delta to HTML
function deltaToHTML(delta) {
    var tempQuill = new Quill(document.createElement('div'));
    tempQuill.setContents(delta);
    return tempQuill.root.innerHTML;
}

// Copy sanitize from link.js
function sanitize(url, protocols) {
    var anchor = document.createElement('a');
    anchor.href = url;

    var protocol = anchor.href.slice(0, anchor.href.indexOf(':'));
    return protocols.indexOf(protocol) > -1;
}

// do upload
async function uploadToServer(imageBlob) {
    var imageToUpload = tempImage.find(item => item.blob === imageBlob);

    var formData = new FormData();
    formData.append('image', imageToUpload.file);

    var res = await axios({
        url: '/s3',
        method: 'POST',
        data: formData,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    });

    return res.data;
}

// import existing image class
var ParchmentImage = Quill.import('formats/image');

// Overwrite static sanitize from image class
// data base64 too long, use blob instead (only for preview)
class KlsejournalImage extends ParchmentImage {
    static sanitize(url) {
        return sanitize(url, ['http', 'https', 'data', 'blob']) ? url : '//:0';
    }
}

// Append blob & save local file
function imageHandler() {
    var input = document.createElement('input');

    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.click();

    input.onchange = () => {
        var [file] = input.files;

        if (/^image\//.test(file.type)) {
            var range = this.quill.getSelection();
            var blob = URL.createObjectURL(file);

            this.quill.insertEmbed(range.index, 'image', blob);
            this.quill.setSelection(range.index + 1);

            tempImage.push({ blob, file });
        } else {
            alert('You could only upload images.');
        }
    }
}

 // Changing the level to error.
  Quill.debug('error');
// Register the new image class
Quill.register(KlsejournalImage);

// Initialize Quill editor
var editor = new Quill('#editor', {
    placeholder: 'What do you want to talk about?',
    theme: "snow",
    modules: {
        toolbar: {
            container: [
                ["link", "image"],
            ],
            handlers: {
                image: imageHandler
            }
        },
    }
});

// submit post
var btnPost = document.getElementById('submit-post')
btnPost.addEventListener('click', async function(e) {
    if (isQuillEmpty(editor)) {
        alert('Cannot submit empty post!');
        return false;
    }

    var delta = editor.getContents();

    for (var i = 0; i < delta.ops.length; i++) {
        var insert = delta.ops[i].insert;

        var has = Object.prototype.hasOwnProperty;

        if (has.call(insert, 'image')) {
            var imageUrl = await uploadToServer(insert.image);
            insert.image = imageUrl;
        }
    }

    var html = deltaToHTML(delta);

    axios.post('/posts', { content: html })
        .then((res) => {
            window.location.reload();
        });
});