PDF preview on form

[AlexStenAlexSten]

Hi,
I'm trying to create a form, in a document library, with the preview of the PDF attachment.
I have used an html control with the iframe tag pointing to a fixed document.

Can you help to build the iframe syntax dynamically, so I can pass file path and name as a parameter?

That's the instruction I'm using now:
<iframe src="http://sptest.it/test/documents/DDT/Doc1.pdf" height="800" width="800"></iframe>

thanks,
Alessandro

[Nikita Kurguzov]

Dear Alessandro,
Are you using SharePoint Online or On-Premises? Also, have you ever used Microsoft Flow? This might lead us towards providing an opportunity for you to convert PDF to images, so let me know, please.

[AlexStenAlexSten]

Hi Nikita,
I'm using Sharepoint 2013 on Premises and no, not used yet Microsoft Flow.

However, I have now found a solution to pass the url as a variable, using.
I'm only struggling to get the full path of the document from the FileLeafRef field.
if I use
var vFile = fd.field('FileLeafRef').value();
I get only the name of the document.

With "_spPageContextInfo.webAbsoluteUrl" I get the url, but without folder.

Still trying....

[Nikita Kurguzov]

Okay, I understand now, let me see what we can do. If I get everything correctly, you want to preview an attachment to the document, not the document itself, is that right?

[AlexStenAlexSten]

Ops, no, let me explain correctly.
I have a document list, to store PDF invoices.
When I edit an item, I'd want to have the preview of the document itself on the same edit form, so I can see the content and edit the fields on the form.
I have added on the form a table with an html control to create the iframe.
Below a screenshot.

The code in the iframe is:
<iframe name="preview_frame" id="preview_frame" src="about:blank" frameborder="1" scrolling="yes" height="1000" width="800"></iframe>

In the javascript editor:
var url ='http://sptest.it/test/documents/DDT/Doc1.pdf';
$('#preview_frame').prop('src', url);

I don't know yet how to get the full path of the item, as they are stored all in different folders.
Hope this is more clear now.
thanks

[Nikita Kurguzov]

Dear Alex,
That's a great solution you came up with to display PDF on the Form! We will gladly help you get the URL of the file with JavaScript, it's relatively easy to do on the form.

All you need to have is the Name field on the Form, so the file name can be accessed. Then you can use the following code to build the full URL of the file:

Code: Select all

//this function is used to get root folder parameter, where the document is stored
var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

//your domain:
var domain = 'http://sptest.it/';

//this will get full path to the file, but without the domain:
var rootFolder = getUrlParameter('RootFolder');

//here we access the Name field to get file name:
var fileName = fd.field('FileLeafRef').value();

//an extension of the file, PDF in this case:
var extension = '.pdf';

//full path to the file:
var path = domain + rootFolder + '/' + fileName + extension;

//simply give iframe path as src
$('#preview_frame').attr('src', path);

[AlexStenAlexSten]

hi Nikita,
thank you very much for your help.

I just tried it and It work well, apart the folder.
var rootFolder = getUrlParameter('RootFolder');
this instruction return "undefined" in my form.
A little step more to fix and we did it

[Nikita Kurguzov]

Dear Alex,
If the previous code doesn't work, try this instead:

Code: Select all

//this function is used to get root folder parameter, where the document is stored
$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return decodeURI(results[1]) || 0;
    }
}

//your domain:
var domain = 'http://sptest.it';

//this will get full path to the file, but without the domain:
var rootFolder = decodeURIComponent($.urlParam('RootFolder'));

//here we access the Name field to get file name:
var fileName = fd.field('FileLeafRef').value();

//an extension of the file, PDF in this case:
var extension = '.pdf';

if (fileName.indexOf(extension) == -1){
	fileName += extension;
}

var path = domain + rootFolder + '/' + fileName;

//simply give iframe path as src
$('#preview_frame').attr('src', path);

[AlexStenAlexSten]

Thanks again Nikita.
rootFolder return "null" now, with the last code.
I'm tryinig to find a solution to get it properly.

Using another approach... It would be possible to get this info from the hidden field "FileRef"?
I tried to retrieve this value with simple javascript, but also here with no success yet.

[Nikita Kurguzov]

Dear Alex,
Can you send me a URL of the form when you have it opened in the browser? It should contain all the necessary information which should be retrievable.