How To: Display the images attached to a list item inline on the display view

Forms SharePoint Online
1

I have a form that allows users to attach images. I want to display the images in the display view of the form (not just list the links) so if they want to print the form, the images will print.

What is the best way to do that?

2

Hello @smithme,

To display the attached image on the display form, you need to add Image control and set the source to the URL of the attached image. Please find more information about the control here.
image

Note that for each attached image should be a separate Image control.

Please see below the code sample, which will display the first attached image in the Image Control.
To apply the code, please replace {List URL} with the link to the list and check the internal names of the control and field.

fd.spRendered(function() {

      var listLink = '{List URL}';
      
      //getting the current item ID
      var itemID = fd.itemId;

      //getting the name of the first attached file
      var fileName = fd.field('Attachments').value[0].FileName;

      //setting the source of the Image control to the URL of the first attached fiel
      fd.control('Image1').source = listLink + '/Attachments/' + itemID + '/' + fileName;

});
1 Like
3

How would you do this if you have a variable number of images attached to a list item?

4

This is what I finally settled on:

(Where {.imgs} is simply a div element in an HTML control.)

fd.spRendered(function() {
    var listLink = '{myurl}/Lists/{mylist}/Attachments/';
    var itemID = fd.itemId;

    var img = '';
    for (var i = 0; i < fd.field('Attachments').value.length; i++) {
        img += '<img style="display:block; width:600px; margin-bottom:12px;" src="';
        img += listLink + itemID + '/' + fd.field('Attachments').value[i].FileName;
        img += '">';
    }

    $('.imgs').html(img);
});
2 Likes
5

@smithme,

This is a great solution to display multiple images. It will be useful for other users.

Thank you!

1 Like
6

Your post really helped me to implement the same functionality in my project, thanks! Also, a useful tip you can use is to dynamically get the list URL and name to be able to reuse this snippet easily as follows:

listLink = fd.webUrl + fd.listUrl + "/Attachments/";

1 Like
7

I hate to ask a dumb question but where do we insert this code? In the JS, CSS buttons? Please help. Thanks

8

Hello @jbrinson,

That is a good question)

You need to add JavaScript code to the JavaScript editor, Current Form tab.
image

If you decide to use the approach suggested by @smithme

You also need to add HTML control to the form and add the code below to the control content:
image

<div class="imgs"></div>
1 Like
9

I dont understand what you mean by this. Do I put in something in the brackets other than ".imgs"?

10

Hello @jbrinson,

This is a class name of the div element:

11

This is a great solution and I am trying to make it work on edit form, it does work on display form and I changed value[i].Filename to value[i].Name but it does not display the image.

fd.spRendered(function() {

var listLink = fd.webUrl + fd.listUrl + "/Attachments/";
var itemID = fd.itemId;

var img = '';
for (var i = 0; i < fd.field('Attachments').value.length; i++) {
    img += '<img style="display:block; width:600px; margin-bottom:12px;" src="';
    img += listLink + itemID + '/' + fd.field('Attachments').value[i].Name;
    img += '">';
}

$('.imgs').html(img);

});

12

Hello @aseem,

When you attach a file to an item, it is not yet uploaded to SharePoint. The file is saved only after the form is submitted.

That means that this code will work only when you attach a file and submit the form.

13

It is working on edit form after the attachment field is ready:

fd.field('Attachments').ready(function(field)

Thanks.

1 Like
14

Is there a way to set a max width here?

15

Hey @Crander47, welcome to the community!

You can set the max-width attribute instead of width in the CSS of the div like this:

style="display:block; max-width:300px; margin-bottom:12px;"

Let me know if that works for you.

1 Like
16

Yes that worked thank you