function selectLocalImage() {
const input = document.createElement('input');
input.setAttribute('type', 'file');
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(file) {
const fd = new FormData();
fd.append('image', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', '', true);
xhr.onload = () => {
if (xhr.status === 200) {
// this is callback data: url
const url = document.getElementById('result').value;
insertToEditor(url);
}
};
xhr.send(fd);
}
/**
* Step3. insert image url to rich editor.
*
* @param {string} url
*/
function insertToEditor(url) {
// push image url to rich editor.
const range = editor.getSelection();
editor.insertEmbed(range.index, 'image', url);
}
// quill editor add image handler
editor.getModule('toolbar').addHandler('image', () => {
selectLocalImage();
});