Uploading a file with the simplest method

Explanation

When you create a component using the dx5.create function, if you specify the ID of the button element(input [type = button]) to the btnUploadAuto property, it automatically connects the event that the upload function is called.

<button id="btn-upload">Upload</button>
<script>
dx5.create({
	...
	// linking the button to perform the upload 
	btnUploadAuto: "btn-upload"
});
</script>

To upload a file, you need to set the server-side web path to handle the upload.

The file upload path can be set before uploading, but is typically specified in the onDX5Created callback function.

function onDX5Created(id) {
	var dx = dx5.get(id);
	// dx5.canonicalize is an utility function that returns the absolute path (including http and https) for a given relative path.
	dx.setUploadURL(dx5.canonicalize("./simple-upload.do"));
}

DEXTUploadX5 acts as a sender to send files. DEXTUploadNJ, on the other hand, acts as a receiver to receive files on the server side.

This sample is handled by the servlet (CommonFileUpload class) for file upload processing and is mapped to common-upload.do in web.xml.

According to the RFC 1867 protocol, data sent to multipart/form-data must be received in POST method. In the doPost method of the CommonFileUpload class, use the FileUpload class of DEXTUploadNJ to perform server-side upload processing.

Please refer to the DEXTUploadNJ product manual and samples for detailed function or description of DEXTUploadNJ.

# Server-side					
						
FileUpload dextnj = null;
		
try {
	// Create a FileUpload object that takes an HTTP request object and a configuration object as arguments. 
	dextnj = new FileUpload(request, env);
	
	// Store all the file data part from the client as a temporary file.
	// Temporary save location is set by Environment#setTempRepository method. 
	dextnj.prepare();
	
	// You can use the FileUpload#getFileItem method to call by form name, but you can get the collection object using the getFileItems method.
	List<FileItem> items = dextnj.getFileItems();
	
	// A buffer for writing response data.
	StringBuffer sb = new StringBuffer();
	
	for (FileItem next : items) {
		if (next.isEmpty() == false) {
			// If the item is the correct file, saves(copy or move) the file from a temporary location to target.
			// If there is no directory path given as an argument, the target will be the path set by the Environment#setDefaultRepository method.
			next.save();
			
			// Writing the location of the saved file to the response data buffer. 
			sb.append(String.format("A: %1$s\n", next.getLastSavedFilePath()));
		}
	}
	
	// Creating response data. 
	response.setCharacterEncoding("UTF-8");
	response.setContentType("text/plain");
	response.getWriter().write(sb.toString());

} catch (Exception e) {
	// If there is a problem, you must raise an error.
	// If you do not want to handle exceptions, you must send the HTTP status code as an error by using "response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);".
	throw new ServletException(e);
} finally {
	// Remove resources.
	// All temporary files that have not been deleted are deleted.
	if (dextnj != null) dextnj.close();
}

DEXTUploadX5 is not a browser. Therefore, communication between the server and DEXTUploadX5 can only be sent and received via response data.

DEXTuploadX5 calls the onDX5Error callback function only if the response data has an error in the HTTP status code.

When the upload is successfully completed, the onDX5UploadCompleted callback function is called.

function onDX5UploadCompleted(id) {
  // Invoked when the upload is complete.
}

Explanation

Example