TinyMCE image_upload_handler hangs with Cloud Storage

I am trying to get tinyMce to upload an image to Cloud Storage when composing an email from within my app. I am developing with Angular 18, @angular/fire 18 modular (Firestore, Storage, Functions, Auth).

Everything seems to work ok. The image is uploaded, and I get an image url, but the image dialog doesn't dismiss, and I am not seeing any errors in the console.

this is my code:

images_upload_handler: (blobInfo) => {
const file = blobInfo.blob();
const filePath = `${Date.now()}-${blobInfo.filename()}`;

// Initialize Firebase Storage and create a reference to the file path
const storage = getStorage();
const storageRef = ref(storage, filePath);

// Start the file upload
const uploadTask = uploadBytesResumable(storageRef, file);

// Return a Promise that resolves with the download URL once the upload completes
return new Promise<string>((resolve, reject) => {
uploadTask.on(
'state_changed',
(snapshot) => {
// Optional: log or handle the upload progress if needed
const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log(`Upload progress: ${progress}%`);
},
(error) => {
// Handle unsuccessful uploads
console.error('Upload failed:', error);
reject('Image upload failed');
},
async () => {
// Get the download URL after the upload completes
try {
const downloadURL = await getDownloadURL(storageRef);
resolve(downloadURL);
} catch (error) {
console.error('Failed to retrieve download URL:', error);
reject('Failed to retrieve download URL');
}
}
);
});
},


I have even just used the code from tinymce's github example, and i get the same result: https://github.com/EbukaPeter55/Angular-TinyMCE/blob/master/src/app/app.component.ts

images_upload_handler: (blobInfo) => {
const file = blobInfo.blob();
const filePath = `${Date.now()}-${blobInfo.filename()}`;
const ref = this.storage.ref(filePath);
const task = this.storage.upload(filePath, file);

const promise = new Promise<string>((resolve, reject) => {
task
.snapshotChanges()
.pipe(
finalize(() =>
ref
.getDownloadURL()
.pipe(last())
.subscribe((url) => {
resolve(url);
})
)
)
.subscribe((_) => {
// do nothing
});
});
return promise;
},
};


I can't see why this is happening or how to call dismiss dialog when the image is uploaded and I receive the downloadUrl.

can anyone shed some light as to what may be the issue please?

Continue reading...