SharePoint List - Picture or Documents display within a colums

Question

Hello,

Could one use a JSON code to enable the option of uploading images and documents in a SharePoint list and display them directly within a column as files? Not just as an attachment with a paperclip. Thank you!

Answer 1

Hi @Martin, Heidi (SE GP T SP PS),

Glad your problem is solved.

If it's convenient, please click "Accept Answer" and kindly upvote it. By doing so, it will benefit all community members who are having this similar issue. Your contribution is highly appreciated. :-)

Answer 2

@Hi @Martin, Heidi (SE GP T SP PS),

From the picture, it looks like you have a lot of errors in your JSON code because of the red curve underneath them.

You can see that in my case there is no error and no red downward curve.

I checked the JSON I provided and it's fine. I am providing it again here.

First make sure you are formatting the column not the view.

Secondly you can click on the part with the red underlined curve to see if there is an error message or delete the JSON and re-add it.

Third, you can create a new list and see if other lists have the same problem.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "='https://tenant.sharepoint.com/sites/Karley11/Lists/List3/Attachments/'+[$ID]+'/'+[$FileName]"
      },
      "style": {
        "position": "relative",
        "top": "50%",
        "left": "50%",
        "width": "48px",
        "height": "auto",
        "margin-left": "-50%",
        "margin-top": "0%"
      }
    }
  ]
}

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

Hi @Martin, Heidi (SE GP T SP PS),

Thank you for posting in this community.

For Picture, we can create and JSON format an image type column implementation to display image type attachments. This only applies if you are uploading only one image attachment for an item.

1.Create an image type column.

2.Since JSON formatting can't get the file name of the attached file, you need to create another column to record the file name of the attached file. In my test it calls FileName. In the src please replace your column name.

3.Select the image column and use the JSON below.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "='https://yourtenant.sharepoint.com/yourListURL/ListName/Attachments/'+[$ID]+'/'+[$FileName]"
      },
      "style": {
        "position": "relative",
        "top": "50%",
        "left": "50%",
        "width": "48px",
        "height": "auto",
        "margin-left": "-50%",
        "margin-top": "0%"
      }
    }
  ]
}

Please change your src parameter.

If you are not sure about the address in front of your src, you can edit an item and click on the Attachments to determine the address in front of the src.

4.Here is the result in my test:

For document, we are unable to display the contents of document attachments in columns as this is not conducive to security. For example, the content of certain documents requires permissions to view them.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 4

@Ling Zhou_MSFT
Good morning,

Thank you very much! Unfortunately it does not work for me. What am I doing wrong?

This is the result:

This my code: