Home

SharePoint Online site asset file caching

%3CLINGO-SUB%20id%3D%22lingo-sub-454200%22%20slang%3D%22en-US%22%3ESharePoint%20Online%20site%20asset%20file%20caching%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-454200%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20guys%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBuilding%20an%20SPFx%20webpart%20for%20a%20modern%20team%20site%20on%20which%20the%20user%20can%20upload%20an%20image%20and%20crop%20it%20afterwards.%20Source%20image%20as%20well%20as%20the%20cropped%20image%20is%20stored%20as%20file%20in%20the%20site%20assets%20library.%20This%20is%20done%20via%20pnp%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3Epublic%20ensureSiteAssetsLibrary(siteUrl%3A%20string)%3A%20Promise%20%7B%0A%20%20%20%20let%20web%3A%20Web%20%3D%20new%20Web(siteUrl)%3B%0A%20%20%20%20return%20web.lists.ensureSiteAssetsLibrary()%3B%0A%7D%0A%0Apublic%20async%20uploadImage(siteUrl%3A%20string%2C%20fileName%3A%20string%2C%20blob%3A%20Blob)%3A%20Promise%20%7B%0A%20%20%20%20let%20siteAssetsLibrary%20%3D%20await%20this.ensureSiteAssetsLibrary(siteUrl)%3B%0A%20%20%20%20const%20shouldOverwrite%20%3D%20true%3B%0A%20%20%20%20return%20siteAssetsLibrary.rootFolder.files.add(fileName%2C%20blob%2C%20shouldOverwrite)%3B%0A%7D%3C%2FPRE%3E%3CP%3EWe%20are%20referencing%20the%20img%20src%20directly%20via%20url%3A%3C%2FP%3E%3CDIV%20class%3D%22highlight%20highlight-source-js%22%3E%26nbsp%3B%3C%2FDIV%3E%3CPRE%3Econst%20fileName%20%3D%20%22someImage.jpg%22%3B%0Alet%20siteAssetsUrl%20%3D%20this._context.pageContext.site.absoluteUrl%20%2B%20%22siteassets%2F%22%3B%0Alet%20fileUrl%20%3D%20%60%24%7BsiteAssetsUrl%7D%24%7BfileName%7D%60%3B%0A%2F%2FCan%20be%20something%20like%3A%0A%2F%2Fhttps%3A%2F%2Ffoo.sharepoint.com%2Fsites%2FMyModernSite%2Fsiteassets%2FsomeImage.jpg%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EDue%20to%20the%20crop%20functionality%20the%20same%20image%20gets%20overwritten%20over%20and%20over%20again.%20When%20referencing%20to%20it%20there%20is%20some%20unexpected%20behaviour%3A%20Hitting%20F5%20and%20refreshing%20the%20latest%202%20or%203%20versions%20change%20up%20each%20other%20randomly.%20When%20accessing%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Ffoo.sharepoint.com%2Fsites%2FMyModernSite%2Fsiteassets%2FsomeImage.jpg%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Ffoo.sharepoint.com%2Fsites%2FMyModernSite%2Fsiteassets%2FsomeImage.jpg%3C%2FA%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Edirectly%20in%20the%20browser%20(with%20client%20caching%20deactivated%20through%20DevTools%20in%20Chrome)%2C%20it%20is%20not%20always%20the%20latest%20version%20of%20the%20file.%20Just%20hitting%20F5%20repeatedly%20and%20the%20image%20changes...%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhat%20kind%20of%20caching%20is%20going%20on%20in%20the%20site%20assets%3F%20What%20would%20be%20the%20best%20way%20to%20truly%20overwrite%20a%20file%20without%20having%20its%20history%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAppreciate%20any%20help%2C%20thank%20you!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Epnp%2Fsp%20version%3A%201.2.8%3CBR%20%2F%3EEnvironment%3A%20SharePoint%20Online%3CBR%20%2F%3EModern%20team%20site%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-454200%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESite%20Assets%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Highlighted
MijoBarbaric
Occasional Visitor

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

 

Related Conversations
Extentions Synchronization
ChirmyRam in Discussions on
3 Replies
Tabs and Dark Mode
cjc2112 in Discussions on
35 Replies
How to Prevent Teams from Auto-Launch
chenrylee in Microsoft Teams on
29 Replies
Security Community Webinars
Valon_Kolica in Security, Privacy & Compliance on
9 Replies