Showing an image file

Introduction

OpenClinica allows us to upload a file to the system. This file is only accessible through a link, it is not shown on the page. In this how-to we will see how we can show image files automatically.

Where to store the uploaded files

In datainfo.properties there is an attribute called 'attached_file_location'. This specifies where the uploaded files will be stored on the server. If we leave this item blank the default location will be used: /usr/local/tomcat/<study_name>.data/.

Challenge with default upload location

The default upload location is not in the root of the OpenClinica web application. Tomcat can therefore not access it, when we use a <img> tag. There are two ways around this.

Change the default location
Use a reverse proxy to serve images

Change the default location

When we want to store files in a place that is visible to Tomcat we change the line in datainfo.properties to:

attached_file_location=/usr/local/tomcat/webapps/<study_name>/attached_files/

Don't forget to change the <study_name> placeholder into something meaningful for your system.

Use a reverse proxy to serve images

Use OpenClinica_User_Manual/UsingAReverseProxy to install Nginx as a reverse proxy. Add this line to the https server configuration of Nginx

location ~ ^/studies/attached_files/(.*)$ {
    #don't forget to change <study_name>
    alias /usr/local/tomcat/<study_name>.data/attached_files/$1;
}

Now images will be served directly by Nginx. If you use a lot of images, this is the preferred configuration.

Code to add to the Excel CRF definition

Read OpenClinica_User_Manual/StylingWithJQuery for a better understanding of the code below. Put the code in LEFT_ITEM_TEXT.

<script>
  jQuery(document).ready(function($) { 
    function showPicture(pIDSelector,pCSSMapInput) {     	
        // find the link to the picture
        var vPath = location.pathname; 
        // are we only viewing the data?
        if (vPath.search('ViewSectionDataEntry') > 0) {
            // yes, we are   
	    var picLink = $(pIDSelector).parent().next().find('a').attr('href');
        } else {
            // no, we are editing
            var picLink = $(pIDSelector).parent().parent().find('div').find('a').attr('href');
        }
        // accept only png and jpg files
        if (picLink.indexOf(".png") > 0 || picLink.indexOf(".jpg") > 0) {
            var vCSS = ""
	    for (css in pCSSMapInput) {
	      vCSS = vCSS + css + ":" + pCSSMapInput[css] + ";"; 
	    }
            //choose one of vUploadLocation, depending on your configuration (delete the other)
            // change <study_name> to a valid name for your installation
	    var vUploadLocation = '<study_name>.data'; 
	    var vUploadLocation = '<study_name>';
	    
            var picSrc = picLink.substr(picLink.search('attached_files'));
            $(pIDSelector).parent().parent().before('<tr><td><img style="' +  vCSS + ' " alt="pic" src="/' + vUploadLocation + '/' + picSrc + '"></td></tr>');
        }
    }
    //add your items here, note that the id must be the same as that of the span in the row that specifies the file upload.
    showPicture('#pic1',{'width':'200px'});		
});
</script>
//add a span with an named id to LEFT_ITEM_TEXT in the row that specifies the file upload.
<span id="pic1">left item text for my picture</span>

The picture will be inserted before the standard buttons for replacing or removing a file. The picture is not immediately visible. It will be shown after you save the page and reopen it again.

Example