TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-24 06:35:49 +03:00
Code Issues Projects Releases Wiki Activity

Added image upload progress to Koenig-Lexical-Editor (#15852)

Browse Source 
ref https://github.com/TryGhost/Team/issues/2237

- Adds an upload progress function, to be used with Koenig-Lexical.
This commit is contained in:
Ronald Langeveld 2022-11-21 10:52:37 +07:00 committed by GitHub
parent 0c2a62f47c
commit c70a1f262d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ghost/admin/app/components/koenig-lexical-editor.js
View File

@ -109,21 +109,24 @@ export default class KoenigLexicalEditor extends Component {
}
ReactComponent = () => {
const [uploadProgressPercentage] = React.useState(0); // not in use right now, but will need to decide how to handle the percentage state and pass to the Image Cards
const [uploadProgress, setUploadProgress] = React.useState(0);
// const uploadProgress = (event) => {
// const percentComplete = (event.loaded / event.total) * 100;
// setUploadProgressPercentage(percentComplete);
// };
const uploadProgressHandler = (event) => {
const percentComplete = (event.loaded / event.total) * 100;
setUploadProgress(percentComplete);
if (percentComplete === 100) {
setUploadProgress(0);
}
};
async function imageUploader(files) {
function uploadToUrl(formData, url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', url);
// xhr.upload.onprogress = (event) => {
// uploadProgress(event);
// };
xhr.upload.onprogress = (event) => {
uploadProgressHandler(event);
};
xhr.onload = () => resolve(xhr.response);
xhr.onerror = () => reject(xhr.statusText);
xhr.send(formData);
@ -146,7 +149,7 @@ export default class KoenigLexicalEditor extends Component {
<KoenigComposer
initialEditorState={this.args.lexical}
onError={this.onError}
imageUploadFunction={{imageUploader, uploadProgressPercentage}} >
imageUploadFunction={{imageUploader, uploadProgress}} >
<KoenigEditor onChange={this.args.onChange} />
</KoenigComposer>
</Suspense>