Preview form attachment before saving

  • 12 August 2016
  • 6 replies
  • 9 views

Badge +6

Hey,

Is there a way to preview/ open a selected attachment BEFORE the user actually submits the form?

For the time being I can only see the name of the file to-be-uploaded, and optionally delete it.

We have a very nit-picky client, and they would really like to have this preview functionality... any suggestions?


6 replies

Badge +6

I'm talking about this issue:

189512_pastedImage_0.png

Is there a way (either use an alternative Nintex control or javascript code) to preview the "text.pdf" file before the page is saved?

Badge +11

Hi Themos K,

I can understand that client is picky but how much effort it is to open the file before attaching it? I don't think there is a functionality to preview it as such on the form.

Badge +6

They claim that since they can preview an attached document in Outlook, they should be able to do it here as well!

I'll try to come up with an alternative solution, e.g. use ajax to create a temporary link to the file in the user's hard disk and display it after the file is attached...

Badge +6

Here's what I ended up with:

NWF$('.nf-attachmentsRow').change(function () {

    setTimeout(function () {

        NWF$('[id^="fileupload"]').not(':last').each(function () {

            var path = this.value;

            var filename = path.substring(path.lastIndexOf('\') + 1, path.length);

            if (NWF$('.nf-attachmentsRow [href*="' + filename + '"]:contains("Preview")').length > 0) {

                return;

            }

            NWF$('.nf-attachmentsRow [href*="' + filename + '"]:contains("Delete")').after(

                '<img width="5" src="/_layouts/15/NintexForms/images/spacer.gif">'

                + '<img src="/_layouts/15/NintexForms/images/rect.gif">'

                + '<img width="5" src="/_layouts/15/NintexForms/images/spacer.gif">'

                + '<a class="ms-addnew" href="' + path + '", target="_blank")">Preview</a>');

        });

    }, 1);

});

Works perfectly for previewing attached PDFs, but unfortunately due to JS restrictions it doesn't allow the browser to access any other files on the local storage (e.g. .txt/.doc/.xls) sad.png

Does anyone have any ideas/workarounds?

Userlevel 6
Badge +13

So now they want to preview any file through the form before they actually attach it???

Badge +6

Yep exactly!!

I posted the code for creating a dynamic href link to the file:\ on the user's drive, but the browser itself does not allow me to click it...

The user either has to right click > save the file, or copy the link address and manually paste it to a new tab!

I would have been satisfied with the standard browser prompt for Open/Save as...

Reply