how to create one-click direct download links on Image column in Sharepoint List

[yunus96]

Hi there,
I've a sharepoint list by name "Employee Directory", this list have a column by name "Photo" where we store employee photo. I want this photo to be downloadable by just one click.
Is there a way to download photo by just clicking on it?

@RezaDorrani  

[#2]

@yunus96 

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]"
      }
    }
  ]
}

[#3]

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?

[#4]

@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.

[#5]

@yunus96 

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]"
  }
}

[#6]

@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.