Upload images in questionnaire

Introduction

We have a client who wants respondents to be able to upload images in a questionnaire

Solution

When the recipient open the answer sheet to answer, we will create the new folder whose name is recipient's name under the questionnaire then store the images that the he uploads in the image tab of this new created folder.

How to do it

Requirement

• The user template of the recipients must have the navigation access to open the Image tab of the Folder and upload the images in this image tab.

Step 1: Preparation

• In the group list, create the group containing the recipients and grant the needed navigation accesses to this group

• In the folder list, create the folder containing all the recipient's folder.

• Check the folder template resource id that the folder will use.

Step 2: Create the new folder for the recipient

(You can see the script in the workflow whose resource id is 45408 in cg.catglobe.com)

 1 array para = Workflow_getParameters();
 2 number userId = para[0];
 3 
 4 number ImageFolderResourceId = 45406;
 5 number FolderTemplateResourceId = 2071;
 6 
 7 array newFolder ;
 8 number userResourceId = User_getResourceIdFromUserId(userId);
 9 array userinfo = User_getUserByResourceId(userResourceId);
10 string ExistedFolderName = getNameFromResourceUniqueId(ImageFolderResourceId) + "\\"+ userinfo[USER_NAME];
11 array ExistedFolder = Folder_getFolderByName(ExistedFolderName);
12 
13 if (ExistedFolder == empty) 
14 {
15 newFolder = Folder_new(userinfo[USER_NAME],FolderTemplateResourceId ,ImageFolderResourceId); 
16 Folder_save(newFolder);
17 }
18 else 
19 {
20 newFolder = ExistedFolder ;
21 }
22 array permissions = {{userId , "FullControl"}};
23 updateUserPermission(newFolder[FOLDER_RESOURCE_ID], permissions);
24 string guid = getResourceGuid(newFolder[FOLDER_RESOURCE_ID]);
25 return getResourceIdFromGuid(guid);

Step 3: Set up the questionnaire

(You can see the questionnaire whose resource id is 1219174 in cg.catglobe.com)

Step 3.1 : Create the dummy question for storing the folder id

We will call the workflow in step 2 to get the new created folder id of recipient

Step 3.2 : Create the question for showing the upload form (a number question)

Paste this code below into Javascript tab of that question

 1 Question.bind('afterShowQuestion', function(question, answerSheet, element) {
 2 
 3     $('.cg-ui-input').hide();
 4     var folderid = '{{D_Current_Folder_Id}}';
 5 
 6     $.getScript("../../Script/ServerMethods/ServerMethods.js", function(){
 7         $.getScript("../../Script/XmlParser/xmlp.js", function(){
 8             ServerMethods.registerMethod(new Method(TYPE_ARRAY,'GetImageInfo',false,null,'~/Common/Resources/View/ImagesTab.ascx',new Parameter(TYPE_INT, 'imagepk')));
 9             openImagedialog();
10         });
11     });
12 //openImagedialog FUNCTION
13 	function openImagedialog() {
14         window.getActiveDialog = function(body) {
15             var imagepkCallback = function(imagepk) {
16                 Question.attr('answer', parseInt(imagepk));
17                 $(parent.document).find('.ui-widget-overlay').remove();
18                 $(parent.document).find('.ui-dialog').remove();            
19             };
20             return {
21                 show: function() {},
22                 papa: {             
23                     resourceTree_AddResource: imagepkCallback
24                 }
25             };
26           };
27 	};
28 	var virtualAppHost = window.location.origin;
29     var url = virtualAppHost + "/Common/ResourceExplorer/EditImagePage.aspx?afn=Images/Resources&parenttype=6" +
30 		"&parentid=" + folderid;
31 	var $dialog = $('<div></div>')
32                .html('<iframe style="border: 0px; " src="' + url + '" width="100%" height="100%"></iframe>')
33                .dialog({
34                    	autoOpen: false,
35                    	modal: true,
36                    	height: 190,
37                    	width: 463,
38                  	title: "Add new image"
39                });
40 	$dialog.dialog('open');
41   
42 });

Source

Questionnaire Resource Id on cg.catglobe.com site: 1219174