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 answersheet 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 recipients'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 
11 string ExistedFolderName = getNameFromResourceUniqueId(ImageFolderResourceId) + "\\"+ userinfo[USER_NAME];
12 array ExistedFolder = Folder_getFolderByName(ExistedFolderName);
13 
14 if (ExistedFolder == empty) 
15 {
16 newFolder = Folder_new(userinfo[USER_NAME],FolderTemplateResourceId ,ImageFolderResourceId); 
17 Folder_save(newFolder);
18 }
19 else 
20 {
21 newFolder = ExistedFolder ;
22 }
23 array permissions = {{userId , "FullControl"}};
24 updateUserPermission(newFolder[FOLDER_RESOURCE_ID], permissions);
25 string guid = getResourceGuid(newFolder[FOLDER_RESOURCE_ID]);
26 return getResourceIdFromGuid(guid);

Step 3: Set up the questionnaire

(You can see the questionnaire whose resource id is 45405 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 : Add the following script to the questionnaire

Paste this code below into Javascript tab of the questionnaire

  1 /*---------------------------------------------------------------------------------------------------------------
  2 	Server info
  3 ---------------------------------------------------------------------------------------------------------------*/
  4 var ServerInfo =
  5 {
  6    "rootPath" : window.location.protocol+"//"+window.location.host
  7 }
  8 
  9 
 10 /*---------------------------------------------------------------------------------------------------------------
 11 	ResourceType enumeration
 12 ---------------------------------------------------------------------------------------------------------------*/
 13 var ResourceType =
 14 {
 15    "Folder":"Folder"
 16 };
 17 
 18 
 19 //
 20 // IFrame
 21 //
 22 function IFrame(parentElement)  
 23 {  
 24    // Create the iframe which will be returned  
 25    var iframe = document.createElement("iframe");  
 26   
 27    // If no parent element is specified then use body as the parent element  
 28    if(parentElement == null)  
 29       parentElement = document.body;  
 30   
 31    // This is necessary in order to initialize the document inside the iframe  
 32    parentElement.appendChild(iframe);  
 33 
 34    // Get the document object of the IFrame
 35    iframe.getDocument = function()
 36    {
 37       // Depending on browser platform get the iframe's document, this is only  
 38       // available if the iframe has already been appended to an element which  
 39       // has been added to the document  
 40 
 41       var doc;
 42 
 43       if(this.contentDocument)  
 44          // Firefox, Opera  
 45          doc = this.contentDocument;  
 46       else if(this.contentWindow)  
 47          // Internet Explorer  
 48          doc = this.contentWindow.document;  
 49       else if(this.document)  
 50          // Others?  
 51          doc = this.document;
 52 
 53       // If we did not succeed in finding the document then throw an exception  
 54       if(doc == null)  
 55          throw "Document not found, append the parent element to the DOM before creating the IFrame";
 56 
 57       return doc;
 58    }
 59 
 60    // Set iframe source
 61    iframe.setSource = function(src)
 62    {
 63       // Set the source
 64       this.src = src;
 65 
 66       // Initialize the iframe's document
 67       this.doc = this.getDocument();
 68  
 69       // Open and close the iframe's document, this will allow us to manipulate
 70       // the iframe's contents by script
 71       iframe.doc.open();  
 72       iframe.doc.close();  
 73    }
 74   // Set iframe source
 75    iframe.setWidth = function(width)
 76    {
 77       // Set the width
 78       this.width = width;
 79    }	
 80   // Set iframe source
 81    iframe.setHeight = function(height)
 82    {
 83       // Set the height
 84       this.height = height;
 85    }
 86 
 87    // Initiate the iframe's document property
 88    iframe.doc = iframe.getDocument();
 89   
 90    // Open and close the iframe's document, this will allow us to manipulate
 91    // the iframe's contents by script
 92    iframe.doc.open();  
 93    iframe.doc.close();  
 94   
 95    // Return the iframe, now with an extra property iframe.doc containing the  
 96    // iframe's document  
 97    return iframe;  
 98 }
 99 
100 /*---------------------------------------------------------------------------------------------------------------
101 	AttachmentList question control
102 ---------------------------------------------------------------------------------------------------------------*/
103 function ImageList(elementContainer, width,height)
104 {
105    this._elementContainer = elementContainer;
106 this._iframe = new IFrame(this._elementContainer);
107 $(this._iframe)
108 .attr("id", "ImageListIFrame")
109 .bind("load",
110 	function()
111 	{
112 		if(this.src == '')
113 			return;
114 $('#ImageListIFrame').contents().find('#Imagesxtoolbar_Item_1').hide();
115 $('#ImageListIFrame').contents().find('#Imagesxtoolbar_Item_2').hide();
116 $('#ImageListIFrame').contents().find('#Imagesxtoolbar_Item_3').hide();
117 	});
118 if (width != null)
119    this._iframe.setWidth(width);
120 if (height != null)
121    this._iframe.setHeight(height);
122 }
123 
124 ImageList.path = "{rootPath}/Common/Resources/View/ContainerPage.aspx?tabtype=Images&type={type}&id={id}&isportal=false";
125 
126 
127 ImageList.prototype =
128 {
129    createImageListUrl: function(type, id)
130    {
131       return ImageList.path
132          .replace("{rootPath}", ServerInfo.rootPath)
133          .replace("{type}", type)
134          .replace("{id}", id);
135    },
136    
137    setFolderId: function(FolderId)
138    {
139       $(this._iframe)
140          .attr("src", this.createImageListUrl(ResourceType.Folder, FolderId));
141    },
142 
143    getImages: function()
144    {
145       var Name = 1;
146       var nameList = new Array();
147 
148       with(this._iframe.contentWindow)
149       {
150 
151 
152          var grid = getCGExecuter().getGridUtilities().getGrid(__gridClientId);
153 
154          for (var rowIndex = 0; rowIndex <grid.Rows.length; rowIndex ++)
155          {
156             nameList.push(grid.Rows.rows[rowIndex].getCell(Name).getValue());
157 
158          }
159       }
160 
161       return nameList;
162    },
163    getGUIDs: function()
164    {
165       var Name = 2;
166       var nameList = new Array();
167       
168       with(this._iframe.contentWindow)
169       {
170 
171 
172          var grid = getCGExecuter().getGridUtilities().getGrid(__gridClientId);
173          var guidtext;
174          for (var rowIndex = 0; rowIndex <grid.Rows.length; rowIndex ++)
175          {
176            guid = grid.Rows.rows[rowIndex].getCell(Name).getValue();
177             nameList.push(jQuery.trim(guid.split('<a')[0]));
178 
179          }
180       }
181 
182       return nameList;
183    }
184 }
185 
186 /*---------------------------------------------------------------------------------------------------------------
187 	End JAVA_SCRIPT of QUESTIONNAIRE
188 ---------------------------------------------------------------------------------------------------------------*/

Step 3.3 : Create the question for showing the upload form

Paste this code below into Javascript tab of that question

 1 /*-------------------------------------------------------------------------
 2 	Set initial information for the uploading image
 3 -------------------------------------------------------------------------*/
 4 quest.onInit = function()
 5 {
 6 	quest.ImageList = new ImageList($("#attachmentContainer").get(0), "800px","400px" );
 7 	quest.ImageList.setFolderId('{{D_Current_Folder_Id}}');
 8         $("#attachmentContainer").append($("<input name='QUESTION.D_Image_Guid' type='hidden'>"));
 9 }
10 
11 /*-------------------------------------------------------------------------
12 	- Validate the question. Automaticaly called.
13 	- You must upload at least 1 image
14 -------------------------------------------------------------------------*/
15 function questioncheck()
16 {
17    // Subscription form valid variable
18 	var valid = true;
19     ErrorMessages.getInstance().clearErrorMessages();
20 	var list = quest.ImageList.getImages();
21 	if (list.length < 1)
22 	{
23 		ErrorMessages.getInstance().showErrorMessage('You must upload at least 1 image.');
24 		valid = false;
25 	}
26    // Return result of validation
27     var getGuid = quest.ImageList.getGUIDs();
28    $("input[name$='QUESTION.D_Image_Guid']").val(getGuid);
29    return valid;
30 }
31 
32 /*---------------------------------------------------------------------------------------------------------------
33 	End JAVA_SCRIPT of QUESTION Insert_Image
34 ---------------------------------------------------------------------------------------------------------------*/