×

Please give details of the problem

Skip to content

File Preview

The idea is to allow you to preview the content of the files you've attached to the File Upload widget. Keep in mind that this will only work with plain text (.txt), images or pdf files (won't work with any Word or Excel document for instance).

  • So, first of all, you add a file upload widget to your web interface.

    file_upload_widget

  • Below or next to your file upload widget, you should add an hidden HTML widget and set its id as id_files_preview for example.

    html_widget

  • Then create an hidden Javascript widget (that you can put wherever you want in your webform, at the bottom of it for example) that listens to the variable of your file upload widget (let's call this variable file_upload_var).

    js_widget

  • Finally put the following code into your JS widget :

If you are planning on only uploading images in the widget, then use :

var preview_html_files ="";
for(f=0;f<JSON.parse(RMPApplication.get("file_upload_var")).length;f++){
     var preview_html_files = preview_html_files + "<img src="+JSON.parse(RMPApplication.get("file_upload_var"))[f].url+" alt='File preview' title='File preview' width='400px' onClick='window.open(\""+JSON.parse(RMPApplication.get("file_upload_var"))[f].url+"\",\"_blank\");'><br>"
}

id_files_preview.setHtml(preview_html_files);
id_files_preview.setVisible(true);

If you are thinking on uploading PDFs or txt files :

var preview_html_files = "";
for(f=0;f<JSON.parse(RMPApplication.get("file_upload_var")).length;f++){
     var preview_html_files = preview_html_files + "<iframe src='"+JSON.parse(RMPApplication.get("file_upload_var"))[f].url+"' width='100%' height='400px'></iframe><br>"
}

id_files_preview.setHtml(preview_html_files);
id_files_preview.setVisible(true);

And here's the result :

preview