title: Electron with Vue, how to sync displaying images after saving it into user data folder
body: <p>my first post here :) </p>
  
  <p>I'm working on Electron app with Vue, and I'm facing a problem with displaying photos on Vue front. I have been working with Vue for almost a year, but It's my first approach to Node.js and Electron.</p>
  
  <p>My app is remote controlled by custom CMS. I have JSON file with different data types inside, some textarea, image, video etc. Every 5 second I'm fetching data from CMS to look for changes in structure, if there is a new image for example, I'm downloading it from provided link in JSON file, storing locally in AppData and then displaying it at apps front. And there starts the problem:</p>
  
  <p>Everytime when I'm uploading a new photo, link to local data is transfered to front faster, than it's stored in files. This results in "broken image" being displayed in app, whenever I'm refreshing app with my helping function, image is displayed propetly. But I kinda feel it's some kind of hack, not expected behaviour. </p>
  
  <p>So, I'm fetching the data every 5 sec by IpcMain like this:</p>
  
  <pre><code>ipcMain.on("get-content", (event, arg) =&gt; {
    getContent()
      .then(response =&gt; {
        const downloadedContent = Buffer.from(JSON.stringify(response.data));
        new Promise((resolve, reject) =&gt; {
          fs.readFile(path.resolve(`${app.getPath("userData")}/content.json`), (err, data) =&gt; {
            if (checksum(downloadedContent) !== checksum(data)) {
              resolve(true);
             // Here i'm checking, if the content checksum has changed //
            }
            if (err) {
              console.log(err);
              reject(err);
            }
          });
        }).then(data =&gt; {
            downloadContent(response.data, event);
            // Here i'm sending to next helper function ///
        })
      })
  </code></pre>
  
  <p>The helper function which maintains all data storage:</p>
  
  <pre><code>const downloadContent = (response, event) =&gt; {
    let location = path.resolve(`${app.getPath("userData")}/content.json`);
    let content = JSON.stringify(response);
    fs.writeFile(location, content, err =&gt; {
      if (err) throw err;
    });
  // Write content.json to AppData user files //
    response.forEach(element =&gt; {
      if (element.type === "image") {
        let fileLocation = path.resolve(`${userDataPath}/img/${element.hash[0]}.jpeg`);
            if (!fs.existsSync(fileLocation)) {
              const file = fs.createWriteStream(fileLocation);
                http.get(element.translations, image =&gt; {
                  image.pipe(file);
                  file.on('finish', function () {
                    file.close(() =&gt; {
                      event.reply("get-content", response);
                      // Here i'm sending the IpcMain response with the new link to image, which is stored in AppData ///
                    });
                  });
                })
            }
  </code></pre>
  
  <p>Whenever I'm doing <strong>event.reply("get-content", response);</strong> it's send faster, than file is stored in user data. But according to docs, 'finish' is the last call, so it should fire after storing data, Am I right? And to be clear, in <strong><em>forEach</em></strong> I have a lot of different data objects, but I'm storing one image on the time. </p>
  
  <p>How to make this call at least "kinda" sych to receive data from IpcMain after image is stored? I have tried Promise.all, async/await but nothing worked.</p>
  
  <p>If you need more code or data, fell free to ask, I'll do my best to provide more info.</p>
  
  <p>Thanks in advance!</p>