File Upload JS extension in Intelligent Advisor

As discussed briefly in an earlier article about 21A, the monthly update of Oracle Intelligent Advisor 21A produced some really nice new features, and the File Upload JS extension that is going to be discussed in this article was part of that update.

Let’s frame the content – the standard application let’s a user of an interview add files to their submission. The basic control is called an upload group, and can comprise a variety of settings and concepts:

  1. The file(s) can be associated with global or any other entity in the interview to allow, for example, for each family member to upload files in the same interview.
  2. The extensions permitted can be defined and the size of the file upload can be defined.
  3. The ability to re-download the file you just uploaded can be switched on or off.
  4. The files can be prefixed with static or dynamic prefixes when they are submitted to a connected application for processing.
  5. Normal read-only, required visibility rules can be defined for this type of control and the question text can be of course modified to suit the context.

So now we know what it does as standard, what can we do with the File Upload JS extension (and why?)

The extension offers the following new methods for the control object when it is a file upload.

  • getUploads() – retrieves metadata in an array of objects
  • removeUpload(index) – allows you to remove an object from the list retrieved with getUploads()
  • addFiles(files) – allows you to programmatically add a file, using the File object and FileList (see Mozilla documentation)
  • add() – triggers showing the standard add file dialog.

Probably most of us can imagine what happens when you use getUploads(). The object that is returned in the code for the File Upload JS extension (assuming there are some files already loaded into the File Upload Group), looks like this:

File Upload JS extension - example object array

In the example above I have added three files (including the same file twice, which you can detect by reviewing the name property of the object, and the size property (which is not in this picture). The complete set of object properties are as follows:

  • name : just the name, not the path
  • mimeType : if the file type is identified
  • size : in bytes
  • ObjectURL : a Blob URL containing the Base64 encoded file
  • isNew: true/ false

As you can imagine, the object index (0,1,2) is what is used to remove an attached file with the File Upload JS extension.

The most interesting capability, I think, is the addFiles(file) method. This allows us to send a File directly to the upload control. For example, if you implement a drag and drop container (like a canvas in HTML5 or indeed a DataTransfer from a direct drag and drop). Then the file(s) can be added to the upload in code.

Here is a simple example, with an HTML Canvas allowing the user to drag and drop an image onto it:

This is something like the following code for a File Upload JS extension (you can download the sample project for free, the link is at the bottom of the article).

var myFileData = []
OraclePolicyAutomation.AddExtension({
	customUpload: function (control, interview) {
		if (control.getProperty("name") == "xUpload2") {
			let mycanvas,
			caption;
			return {
				mount: function (el) {
					//console.log("Starting customUpload Mount");
					const screen = interview.currentScreen();

					mycanvas = document.createElement("canvas");

					var finishedCanvas = makeCanvas(mycanvas, interview, el);
					el.appendChild(finishedCanvas);

					var canvas = document.getElementById("dragdrop-canvas"),
					context = canvas.getContext("2d"),
					img = document.createElement("img"),
					mouseDown = false,
					brushColor = "rgb(0, 0, 0)",
					hasText = true,
					clearCanvas = function () {
						if (hasText) {
							context.clearRect(0, 0, canvas.width, canvas.height);
							hasText = false;
						}
					};
					context.fillText("Drop an image onto the canvas", 180, 220);

					img.addEventListener("load", function () {
						clearCanvas();
						context.drawImage(img, 0, 0);
					}, false);

					canvas.addEventListener("dragover", function (evt) {

						evt.preventDefault();

					}, false);

					canvas.addEventListener("drop", function (evt) {

						var files = evt.dataTransfer.files;
						if (files.length > 0) {
							var file = files[0];
							if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
								var reader = new FileReader();
								reader.onload = function (evt) {
									img.src = evt.target.result;
								};
								reader.readAsDataURL(file);
							}

							control.addFiles(files);
						}

						//evt.preventDefault();

					}, false);

					//console.log("Ending customUpload Mount");
				},
				update: function (el) {
					// console.log("Starting customUpload Update");

					// console.log("Ending customUpload Update");
				},
				unmount: function (el) {
					//console.log("Starting customUpload UnMount");
					//console.log("Ending customUpload UnMount");
				}
			}
		}
	}
})
function makeCanvas(mycanvas, interview, el) {
	mycanvas.setAttribute("title", "Drag Drop Canvas");
	mycanvas.setAttribute("id", "dragdrop-canvas");
	mycanvas.setAttribute("width", "500");
	mycanvas.setAttribute("style", "border:  1px solid red;");
	mycanvas.setAttribute("height", "440");
	return mycanvas;
}

Of course this is just the start of building exciting and user friendly interfaces with the customUpload extension. We’ve updated the Code Generator to include this new extension and the Online Store includes a free example Project using 21A Monthly Update 1 for you to play with.

PS : I can recommend this book as an excellent JavaScript primer (I have the previous edition – affiliate link) :

Richard Napier

Author: Richard Napier

Richard Napier joined Siebel Systems in 1999 and took up the role of managing the nascent Siebel University in Southern Europe. He subsequently was Director of Business Development and Education for InFact Group (now part of Business & Decisions) for 8 years. He now runs Intelligent Advisor IT Consulting OÜ. Owner of intelligent-advisor.com, he also is Co-Founder of the Siebel Hub.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Worldwide
Logo by Southpaw Projects LLC