Fixed a issue that images could not be downloaded

[stevecorey365]

Q	A
Bug fix?	yes
New sample?	no
Related issues?	no

What's in this Pull Request?

Updating the Readme file. In order for the download URL to be complete, attachments need to be disabled on the list. Otherwise, the serverRelativeURL in the expression resolves to a blank string. This PR just adds that note to the Readme.

[tecchan1107]

Thanks for the pull request @stevecorey365 🙏✨

After seeing your pull request, I checked the behavior of the Image column and it seems that the serverRelativeUrl can be retrieved or not depending on where the image is stored. I am currently asking if this is a bug in the following issue regarding this phenomenon. https://github.com/SharePoint/sp-dev-docs/issues/9411

I think I will add a note on my part as to why attachments needs to be disabled and then I will merge it in.

[Fedes365]

@stevecorey365 and @tecchan1107

Tried with both attachments enabled and disabled but it didn't work. I have the suspect it's by design, also due to a recent Lists app change documented here, about new images added to a list.

Here is what happened:

1. if attachments are enabled, Microsoft Lists/SharePoint stores each image in the Attachments folder, renaming each file with a special file name. Using just serverRelativeUrl or using getThumbnailImage operator will not make the download button work.
2. if attachments are disabled, Microsoft Lists/SharePoint stores each image in "SiteAssets" folder. Using just serverRelativeUrl or using getThumbnailImage operator will not make the download button work.

A possible solution?

I think it depends on how we want do deal with images.

From my findings, if attachments are enabled in a list, a download button should have the following code, where "YOUR-LIST-NAME" has to be replaced with your actual list name in the address bar, including special characters encoding (eg. white spaces encoded with %20):

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "button", "style": { "border-radius": "5px", "margin": "5px 0px", "padding": "0px", "border": "none", "display": "=if(getThumbnailImage([$Image], 2000, 2000 )=='','none','')" }, "attributes": { "class": "ms-bgColor-themePrimary" }, "children": [ { "elmType": "a", "style": { "text-decoration": "none", "padding": "12px 0px", "width": "100%" }, "attributes": { "href": "= @currentWeb + '/_layouts/15/download.aspx?sourceurl=' + @currentWeb+'/Lists/**YOUR-LIST-NAME**/Attachments/' + [$ID] + '/' + [$Image.fileName]", "target": "_blank", "class": "ms-fontColor-white ms-fontSize-m" }, "children": [ { "elmType": "span", "style": { "display": "inline-block", "padding": "0 4px" }, "attributes": { "iconName": "Download" } }, { "elmType": "span", "txtContent": "Download" } ] } ] }

On the other hand, if we want to disable the attachments feature, then here is a code sample that worked for me:

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "button", "style": { "border-radius": "5px", "margin": "5px 0px", "padding": "0px", "border": "none", "display": "=if(getThumbnailImage([$Image], 2000, 2000 )=='','none','')" }, "attributes": { "class": "ms-bgColor-themePrimary" }, "children": [ { "elmType": "a", "style": { "text-decoration": "none", "padding": "12px 0px", "width": "100%" }, "attributes": { "href": "= @currentWeb + '/_layouts/15/download.aspx?sourceurl=' + [$Image.serverUrl]+[$Image.serverRelativeUrl]", "target": "_blank", "class": "ms-fontColor-white ms-fontSize-m" }, "children": [ { "elmType": "span", "style": { "display": "inline-block", "padding": "0 4px" }, "attributes": { "iconName": "Download" } }, { "elmType": "span", "txtContent": "Download" } ] } ] }

[stevecorey365]

In my tests as I was about to record a youtube video on this solution, disabling attachments did make the JSON work, but I had to re-upload those images so they got moved into the correct location. Deleting the list items and recreating would work as well, I'm sure.

[Fedes365]

Tested again in another list from scratch, with attachments disabled, and now serverRelativeUrl worked fine.

If attachments are enabled, then the other code alternative could help.

[tecchan1107]

Hi @stevecorey365 and @Fedes365 ! Sorry for the late reply🙇‍♂

Referring to @Fedes365 's code, I tried to change the value of href based on the value of serverRelativeUrl. I think that this way, it is not necessary to disable attachment, and it can be used for any lists.

Sample Code (Click to open/close)

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "button", "style": { "border-radius": "5px", "margin": "5px 0px", "padding": "0px", "border": "none", "display": "=if([$Image],'','none')" }, "attributes": { "class": "ms-bgColor-themePrimary" }, "children": [ { "elmType": "a", "style": { "text-decoration": "none", "padding": "12px 0px", "width": "100%" }, "attributes": { "href": "=@currentWeb+'/_layouts/15/download.aspx?sourceurl='+if([$Image.serverRelativeUrl],[$Image.serverRelativeUrl],substring(@currentWeb,0,indexOf(@currentWeb,'sharepoint.com'))+'sharepoint.com'+substring([$FileRef],0,lastIndexOf([$FileRef],'/'))+'/Attachments/'+[$ID]+'/'+ [$Image.fileName])", "target": "_blank", "class": "ms-fontColor-white ms-fontSize-m" }, "children": [ { "elmType": "span", "style": { "display": "inline-block", "padding": "0 4px" }, "attributes": { "iconName": "Download" } }, { "elmType": "span", "txtContent": "Download" } ] } ] } ```

Instead of adding the list requirements to the README, how about fixing it to change it to the above code? Also, I would be glad if you could try this when you have time.

[tecchan1107]

I noticed that in the above code, if the item is in a folder, the image cannot be downloaded😢

The image can be downloaded by writing the listing name in the code as follows. It may still be necessary to edit the list name in the code based on the list...

Sample Code (Click to open/close)

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "button", "style": { "border-radius": "5px", "margin": "5px 0px", "padding": "0px", "border": "none", "display": "=if([$Image],'','none')" }, "attributes": { "class": "ms-bgColor-themePrimary" }, "children": [ { "elmType": "a", "style": { "text-decoration": "none", "padding": "12px 0px", "width": "100%" }, "attributes": { "href": "=@currentWeb+'/_layouts/15/download.aspx?sourceurl='+if([$Image.serverRelativeUrl],[$Image.serverRelativeUrl],@currentWeb+'/Lists/**YOUR-LIST-NAME**/Attachments/'+[$ID]+'/'+[$Image.fileName])", "target": "_blank", "class": "ms-fontColor-white ms-fontSize-m" }, "children": [ { "elmType": "span", "style": { "display": "inline-block", "padding": "0 4px" }, "attributes": { "iconName": "Download" } }, { "elmType": "span", "txtContent": "Download" } ] } ] } ```

[stevecorey365]

I tested @Fedes365 's code, and also found it works with and without attachments. I also tested it with folders (after enabling folders on the list) and it still worked, but only a list where attachments are disabled.

@tecchan1107 I'm not sure if there's a way to solve the issue when attachments are enabled and an image is in a folder. Should the JSON file be duplicated, and the (attachments+folders) code with hardcoded list name be placed in that file? Or should the readme include a note about that scenario, and the fix. I'm not sure how we handle something like that in the pnp repo. I'll follow your recommendation.

Also, can the existing PR include new files, or should I submit a new PR?

Hi @stevecorey365 and @Fedes365 ! Sorry for the late reply🙇‍♂

Referring to @Fedes365 's code, I tried to change the value of href based on the value of serverRelativeUrl. I think that this way, it is not necessary to disable attachment, and it can be used for any lists.

Sample Code (Click to open/close) Instead of adding the list requirements to the README, how about fixing it to change it to the above code? Also, I would be glad if you could try this when you have time.

[tecchan1107]

@stevecorey365

can the existing PR include new files, or should I submit a new PR?

Before answering the above question, please allow me to confirm again about the fix. For the issue of "unable to download images in the image column," my opinion is that it would be better to fix the code as follows, which is consistent with your idea? (The following code will download the image even if the item was in a folder)

Sample Code (Click to open/close)

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "button", "style": { "border-radius": "5px", "margin": "5px 0px", "padding": "0px", "border": "none", "display": "=if([$Image],'','none')" }, "attributes": { "class": "ms-bgColor-themePrimary" }, "children": [ { "elmType": "a", "style": { "text-decoration": "none", "padding": "12px 0px", "width": "100%" }, "attributes": { "href": "=@currentWeb+'/_layouts/15/download.aspx?sourceurl='+if([$Image.serverRelativeUrl],[$Image.serverRelativeUrl],@currentWeb+'/Lists/**YOUR-LIST-NAME**/Attachments/'+[$ID]+'/'+[$Image.fileName])", "target": "_blank", "class": "ms-fontColor-white ms-fontSize-m" }, "children": [ { "elmType": "span", "style": { "display": "inline-block", "padding": "0 4px" }, "attributes": { "iconName": "Download" } }, { "elmType": "span", "txtContent": "Download" } ] } ] } ```

[stevecorey365]

@tecchan1107 Yes, my opinion is that one code example would address all scenarios.

[Fedes365]

I'm happy to read this conversation to find the best solution. For me it's a great opportunity to improve my skills and learn something new! 👍🎉

[tecchan1107]

@stevecorey365 Thanks for the reply! Regarding the code fix, can you include it in this pull request? If you make a fix to this pull-requested branch on GitHub or in Visual Studio Code, it will be reflected in the pull request.

[stevecorey365]

@tecchan1107 Done! I also updated the README to inform users of the list name placeholder present in the JSON

[tecchan1107]

@stevecorey365 Merged! Thank you very much! And sorry for the delay🙇‍♂

@Fedes365 Thank you for all your help!