Dynamic New-UDImage

PowerShell Universal Universal Dashboard
1 
Product: PowerShell Universal
Version: 2.1.2

Hi, as part of a larger stepper I have a step that changes one photo for another. The photos are stored on-disk in a Published Folder, and there’s a preview of the photo displayed on the page pointing to the URL of the Published Folder. When uploading the new photo, it should make a copy of the existing file as a cop, write the new uploaded image to the same path, and sync the New-UDImage to show the new photo. Doesn’t seem to be refreshing though. Even with a button specifically for forcing that region to refresh it keeps the same old photo as the preview. Also, I have tried opening another tab and navigating directly to the photo URL. Refreshing the tab after uploading the photo does show the new photo.

It is part of a larger stepper, but doesn’t seem to work by itself either. Here’s the code I have:

New-UDDynamic -Id 'dynPhoto' -Content { New-UDImage -Id 'thumbnailPhoto' -Url "/ADPhotos/username.jpg" -Width 150 }
New-UDButton -Text 'Refresh photo' -OnClick { Sync-UDElement -Id 'dynPhoto' }

New-UDUpload -Id 'photo' -Text 'Photo' -Accept '.jpg, .png' -Variant 'outlined' -OnUpload {
    $FilePath = "C:\Universal\PublishedFolders\ADPhotos\username.jpg"
    $newFilePath = "C:\Universal\PublishedFolders\ADPhotos\username.$((Get-Date).ToString('MM-dd-yyyy_HH-mm-ss')).jpg"
    Move-Item -Path $FilePath -Destination $newFilePath

    $bytes = [System.Convert]::FromBase64String(($Body | ConvertFrom-Json).Data)

    [System.IO.File]::WriteAllBytes($FilePath, $bytes)

    Start-Sleep -Seconds 3
    Sync-UDElement -Id 'dynPhoto'
}

Any workarounds?

Thanks!

2

This could be react weirdness. You can try to remove the Id to force it to create a random ID when the dynamic reloads.

New-UDDynamic -Id 'dynPhoto' -Content { New-UDImage -Url "/ADPhotos/username.jpg" -Width 150 }

This also could be some weird browser caching thing. You can try to add a random number to the end of the URL during load to prevent caching.

New-UDDynamic -Id 'dynPhoto' -Content { New-UDImage -Id 'thumbnailPhoto' -Url "/ADPhotos/username.jpg?t=$(Get-Random)" -Width 150 }
1 Like
3

Adding the random number to the end of the URL did the trick. Never would have thought of that. Thank you very much!

1 Like