Forum Discussion
how to create one-click direct download links on Image column in Sharepoint List
Hi!
you can use view formatting json for this:
https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-formatting
Example code for creating this button and download image:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "button",
"style": {
"flex-direction": "column",
"width": "80px",
"border": "none",
"border-radius": "3px",
"margin": "10px 0"
},
"attributes": {
"class": "ms-bgColor-themePrimary"
},
"children": [
{
"elmType": "a",
"txtContent": "Download",
"style": {
"color": "white",
"text-decoration": "none",
"padding": "12px 0px 12px 0px"
},
"attributes": {
"target": "_blank",
"href": "= @currentWeb + '/_layouts/15/download.aspx?UniqueId=' + [$UniqueId]"
}
}
]
}
thanks NicolasKheirallah, for taking time to help me.
But it's downloading some other file with extension ".000". for examples its downloading file "94.000".
How do I set it to the image column in my list?Change to instead :
"href": "=@currentWeb+'/_layouts/15/download.aspx?sourceurl='+[$FileRef]"
Here is a finished code 🙂 create a random field for downloading and use format column
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "a", "txtContent": "Download", "style": { "background-color": "gray", "text-decoration": "none", "color": "white", "font-size": "14px", "padding-left": "5px" }, "attributes": { "target": "_blank", "href": "=@currentWeb+'/_layouts/15/download.aspx?sourceurl='+[$FileRef]" } }NicolasKheirallah I believe OP is using Image type column in SharePoint list and not images document library.
Anyways, Thank you very much for the hint to use sourceurl parameter in download page URL.
yunus96 Below JSON should work for you in case of image column in SharePoint list:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "button", "style": { "border-radius": "5px", "margin": "5px 0px", "padding": "0px" }, "attributes": { "class": "ms-bgColor-themePrimary" }, "children": [ { "elmType": "a", "txtContent": "Download", "style": { "text-decoration": "none", "padding": "10px 0px", "width": "100%" }, "attributes": { "href": "=@currentWeb + '/_layouts/15/download.aspx?sourceurl=' + @currentField.serverRelativeUrl", "target": "_blank", "class": "ms-fontColor-white" } } ] }For more information, check this: Download Image from SharePoint Image column using JSON formatting
Related Read: SharePoint Online: Download files from document library using JSON formatting
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
yunus96 Unfortunately, download attribute is not supported in JSON formatting. So, you will not be able to download the image directly on click.
You can use below JSON to open the image in new tab. Then you can use right click on image and use Save image as... to download it:
{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "button", "style": { "border-radius": "5px", "margin": "5px 0px", "padding": "0px" }, "attributes": { "class": "ms-bgColor-themePrimary" }, "children": [ { "elmType": "a", "txtContent": "Download", "style": { "text-decoration": "none", "padding": "10px 0px", "width": "100%" }, "attributes": { "href": "@currentField.serverRelativeUrl", "target": "_blank", "class": "ms-fontColor-white" } } ] }Similar JSON sample: Download File Button
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
