Hi guys,
Building an SPFx webpart for a modern team site on which the user can upload an image and crop it afterwards. Source image as well as the cropped image is stored as file in the site assets library. This is done via pnp:
public ensureSiteAssetsLibrary(siteUrl: string): Promise {
let web: Web = new Web(siteUrl);
return web.lists.ensureSiteAssetsLibrary();
}
public async uploadImage(siteUrl: string, fileName: string, blob: Blob): Promise {
let siteAssetsLibrary = await this.ensureSiteAssetsLibrary(siteUrl);
const shouldOverwrite = true;
return siteAssetsLibrary.rootFolder.files.add(fileName, blob, shouldOverwrite);
}We are referencing the img src directly via url:
const fileName = "someImage.jpg";
let siteAssetsUrl = this._context.pageContext.site.absoluteUrl + "siteassets/";
let fileUrl = `${siteAssetsUrl}${fileName}`;
//Can be something like:
//https://foo.sharepoint.com/sites/MyModernSite/siteassets/someImage.jpg
Due to the crop functionality the same image gets overwritten over and over again. When referencing to it there is some unexpected behaviour: Hitting F5 and refreshing the latest 2 or 3 versions change up each other randomly. When accessing https://foo.sharepoint.com/sites/MyModernSite/siteassets/someImage.jpg directly in the browser (with client caching deactivated through DevTools in Chrome), it is not always the latest version of the file. Just hitting F5 repeatedly and the image changes...
What kind of caching is going on in the site assets? What would be the best way to truly overwrite a file without having its history?
Appreciate any help, thank you!
pnp/sp version: 1.2.8
Environment: SharePoint Online
Modern team site
