FileUpTransfer

Introducing FileUpTransfer

The FileUpTransfer object provides the function to upload files that the user creates or has to the server storage. As the web came out, file transfer was an important issue, but since it was difficult to perform the desired operation with the basic functions of HTML, various third-party services came out. Services for processing large files or for uploading multiple files at once are sometimes provided.

Example

It is used when uploading attachments while writing on the bulletin board or adding attachments when writing emails.

Difference with FileUpload Component

The FileUpload component is the component that provides the basic UI and has limitations in implementing drag-and-drop or other types of interfaces. In order to solve such a limitation, the FileUpTransfer object is provided as Invisible Object to implement the function of creating the necessary UI in the project and selecting and transferring files.

Since there is already a project using FileUpload component applied, FileUpload component maintains its current state, and it is recommended to use FileUpTransfer object.

Uploading Selected File

Select the file in the file selection dialog box or upload the added file by drag and drop to the specified server.

Example

Clicking the [open] button displays the file selection dialog box. Select the file and close the file selection dialog box to add the file list to the Grid component. You can add files by selecting the file in Windows Explorer and dragging and dropping it onto the Grid component area.

If you click the [upload] button with the file list added, then the file is transferred to the server and the transfer result is displayed in the TextArea component.

sample_fileuptransfer_01.xfdl

Core features used in the example

datatype, filelist

This is the property that is added to the DragEventInfo, GridDragEventInfo, ListViewDragEventInfo, MenuDragEventInfo objects. When selecting the file in Windows Explorer and dragging and dropping it, the datatype property value is processed as "file", and the selected file list can be checked in the filelist property value.

addFile

Adds file information in the form of the VirtualFile object. The added file information can be checked in the filelist property of the FileUpTransfer object.

upload

Transmits files in the POST method.

How to implement an example

1

Place 2 Button components on the screen, and place the Grid component and the TextArea component under the Button component.

2

Add the Dataset object and create two columns, which are 'name' and 'size'.

3

Bind the Dataset object to the Grid component.

4

Place the Static component in the same size and location as the Grid component.

The Static component should be placed under the Grid component. You can place the Static component first and then the Grid component on it, or you can place the Static component later and change the order using the menu [Design> Arrange> Send Backward].

The Static component placed behind the Grid component serves to indicate to the user that the file can be dragged and dropped.

5

Select FileUpTransfer from the toolbar and add it to the screen. FileUpTransfer is displayed in the Invisible Object area.

6

Write the onclick event function of the [open] Button component as follows.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.FileDialog00.open('Nexacro N', FileDialog.MULTILOAD);
};

7

Write the onclose event function of the FileDialog object as follows.

The way to add files is divided into the file selection dialog box and drag-and-drop, so the part that processes the added files is separated by the function called addFileList.

this.FileDialog00_onclose = function(obj:nexacro.FileDialog,e:nexacro.FileDialogEventInfo)
{
	this.addFileList(e.virtualfiles);
};

this.addFileList = function(filelist)
{
	for (var i = 0, len = filelist.length, vFile; i < len; i++)
	{
		vFile = filelist[i];
		vFile.addEventHandler("onsuccess", this.FileList_onsuccess, this);
		vFile.addEventHandler("onerror", this.FileList_onerror , this);
		
		vFile.open(null, 1);
	}
}

8

Write the drag, drop related event function of the Grid component as follows.

Adjust the transparency property so that the Static component behind is visible when the user enters the Grid component area by selecting and dragging the file in the Windows Explorer. Return the transparency to its original state when out of the Grid component area or the drop action is processed.

this.Grid00_ondragenter = function(obj:nexacro.Grid,e:nexacro.DragEventInfo)
{
	if(e.datatype == "file")
	{
		this.Grid00.opacity = 0.5;
	}
};

this.Grid00_ondragleave = function(obj:nexacro.Grid,e:nexacro.DragEventInfo)
{
	this.Grid00.opacity = 1;
};

this.Grid00_ondrop = function(obj:nexacro.Grid,e:nexacro.GridDragEventInfo)
{
	this.Grid00.opacity = 1;
	if(e.datatype == "file")
	{
		this.addFileList(e.filelist);
	}
};

In the ondrop event function, transmit the filelist property to the addFileList function.

9

Write the onsuccess, onerror event functions of the VirtualFile object as follows.

Display the file name and file size in the Dataset object in the onsuccess event function, and add the file information by executing the addFile method of the FileUpTransfer object.

this.FileList_onsuccess = function(obj:nexacro.VirtualFile, e:nexacro.VirtualFileEventInfo)
{
	switch (e.reason)
	{
		case 1:
			obj.getFileSize();
			break;
		case 9:
			var nRowIdx = this.Dataset00.addRow();
			this.Dataset00.setColumn(nRowIdx, 0, obj.filename);
			this.Dataset00.setColumn(nRowIdx, 1, this.cutFileSize(e.filesize));
			this.FileUpTransfer00.addFile(obj.filename, obj);
			break;
	}
}

this.FileList_onerror = function(obj:nexacro.VirtualFile, e:nexacro.VirtualFileErrorEventInfo)
{
	trace("errortype: "+e.errortype);
	trace("errormsg: "+e.errormsg);
	trace("statuscode: "+e.statuscode);
}

10

Add the function that displays the file size in an appropriate unit as shown below.

The code was referenced from the link below.

https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications#Example_Showing_file(s)_size

this.cutFileSize = function(filesize)
{
	var sOutput = filesize + " bytes";
	for (var aMultiples = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], nMultiple = 0, nApprox = filesize / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) 
	{
		sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple];
	}
	return sOutput;
};

11

Write the onclick event function of the [upload] Button component as follows.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.TextArea00.value = "";
	this.FileUpTransfer00.upload('http://edu.tobesoft.com/developer_guide/N_V24/Service/fileupload.jsp');
};

The code used in the server was referenced from the link below.

http://www.tutorialspoint.com/jsp/jsp_file_uploading.htm

The applied code can be checked from the link below.

https://github.com/TOBESOFT-DOCS/sample_Nexacro_N_V24/blob/master/Service/fileupload.jsp

12

Write the onprogress, onsuccess, onerror event functions of the FileUpTransfer object as follows.

this.FileUpTransfer00_onprogress = function(obj:nexacro.FileUpTransfer,e:nexacro.FileUpTransferProgressEventInfo)
{
	this.fn_addlog(e.loaded+"/"+e.total);
};

this.FileUpTransfer00_onsuccess = function(obj:nexacro.FileUpTransfer,e:nexacro.FileUpTransferEventinfo)
{
	this.fn_addlog(e.code);
	this.fn_addlog(e.message);
};

this.FileUpTransfer00_onerror = function(obj:nexacro.FileUpTransfer,e:nexacro.FileUpTransferErrorEventInfo)
{
	this.fn_addlog(e.errormsg);
	this.fn_addlog(e.statuscode);
};

this.fn_addlog = function(strMessage)
{
    this.TextArea00.insertText(strMessage + '\n');
}

Files larger than 5MB in the code in the server are error-processed. However, you can see that the onprogress event is processed, regardless of the file size.

When testing in the local or other domain environments, the preflight request is made to check the privilege and accesses the domain specified by the upload method parameter twice. For more information, please refer to the link below.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

13

Run QuickView (Ctrl + F6) to check the result. Try to upload and add files with the file selection dialog box or drag and drop.