OpenClinica User Manual/ShowingAnImage

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 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 Example picture upload