Temporarily save image, and only upload on create?

[Devalo]

Hi, The editor kind of work the way I want it to, except when embedding images. When adding an image, I would like to store the image temporarily (locally) until the user saves the document. On save, the document gets uploaded to a storage, and the data object should update the blog url's.

This would be the place to add images temporarily. As of now, I'm just storing them in storage right away.

  const uploadImageCallback = (file) => {
    return new Promise((resolve, reject) => {
      const storage = firebase.storage();
      const storageRef = storage.ref(file.name);

      // const localStorage = URL.createObjectURL(file);

      storageRef.put(file).then(() => {
        storageRef.getDownloadURL().then((url) => {
          resolve({ data: { link: url }});
        });
      });
      // resolve({ data: { link: localStorage }});
    });
  }

This would be the place to save the document. The function gets triggered by a button.

  const saveToDb = async () => {
     await db.collection('testArticle').add({
      article: convertToRaw(articleContent.getCurrentContent()),
    }); 
  }

How can I go about doing something like this? I cant seem to figure a way to actually let me upload images without filling the storage with unused image. If the user adds an image, and deletes it in the editor, it will still be in storage. Therefore, it would be much better to temporarily add it, and upload it when the user clicks 'save document'.

Does anyone have any pointers?

Regards Stephan Bakkelund Valois

[KellyChen1]

I have the same question. Did you find a solution?

[sai6855]

i too have same issue