Hi All,
I have up and going the file upload using websockets, no worries.
I have a textarea that is using Quilljs (html editor)
It has the ability to upload an image to the server then not use a base64 image but a link to the file on the server.
The working code from B4J is..
The code that is needed to work is here..
I am having trouble setting up the POST routine.
I do want to add to this and do an automatic resize on the image to restrict the file upload size.
Thanks in advance
Tom
I have up and going the file upload using websockets, no worries.
I have a textarea that is using Quilljs (html editor)
It has the ability to upload an image to the server then not use a base64 image but a link to the file on the server.
The working code from B4J is..
B4X:
<form id="form1" action="filehelper" method="post" enctype="multipart/form-data">
<label for="file">Choose file (max size 1M):</label>
<input type="file" name="file1">
<input type="submit" name="submit" value="Submit">
</form>The code that is needed to work is here..
HTML:
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();
});I do want to add to this and do an automatic resize on the image to restrict the file upload size.
Thanks in advance
Tom