Show new image after upload

Question

Quick question, using the Baqend SDK in React, I'm saving profile images using the id of an object saved in the database as the name.

But in order to get the image to update in the user's browser after it is uploaded, I'm modifying state and adding &updated=true to the end of the file.url as it is returned by Baqend.

The save image code:

  uploadLogo(event) {
    event.preventDefault();
    const name = this.props.match.params.id+"logo";
    const file = event.target.files[0];
    const img = new db.File({ name: name, data: file, type: 'blob' });
    img.upload({force: true}).then((file) => {
      db.Companies.load(this.props.match.params.id).then(company => {
        this.setState({
          logo: file.url+"?updated=true"
        });
        company.logo = file.url;
        return company.update();
      },
      (error) => {
        alert(error);
      });
    });
  }

Is this the correct approach with React and the Baqend SDK? Are there going to be any side-effects on this if I'm loading a bunch of images by URL that look like this: https://remarkable-apple-95.app.baqend.com/v1/file/www/cce9830b-48eb-422e-830d-72ae28571480logo?BCB&updated=true

I would imagine url parameters like this are just ignored? The only person that is going to load the image with ?updated=true after it is the one person that updates the logo and only immediately after he updates it.

Also what is the ?BCB being added in file.url doing?

Answer 1

Your example looks good so far.

But you should not add additional query parameters at all, as they cause cache misses in the CDN. The BCB (Baqend Cache Buster) is actually what you are trying to archive with the ?upload=true parameter. The SDK adds those cache busters automatically if an image was changed previously. The BCB ensures that the fresh image is fetched from the server and is only cached with revalidation headers until the old image is expired in the browser cache. Our CDN caches are aware of this special cache buster and rewrite the image request back to the original URL to ensure cache hits in the CDN. Note that our CDN caches are instantly invalidated if the content is changed.

This staleness information is propagated to other clients as well via a Bloom filter. That ensures that other clients won't take the image out of their local cache and therefore see the new image too.