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

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.

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

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);
	}
}

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.set_opacity(0.5);
	}
};

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

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

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

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);
}

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;
};

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

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');
}