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 controller(FileServiceController class) for file upload processing and is mapped to common-upload.do.

According to the RFC 1867 protocol, data sent to multipart/form-data must be received in POST format. In the commonupload method of the FileServiceController class, the server side upload processing is performed using the VO class having the file information processed in DEXTUploadNJMultipartResovler.

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

# Server-side					
						
@RequestMapping(value = {"/service/common-upload.do", "/service/upload-oraf.do"}, method = RequestMethod.POST)
public void commonupload(DEXTUploadX5Request x5, HttpServletResponse response) throws IOException {
	
  // The DEXTUploadX5Request is a VO class that has form data by Spring model binding.
	
  FileItem item = null;
  StringBuffer sb = new StringBuffer();

  for (MultipartFile file : x5.getDEXTUploadX5_FileData()) {

    item = (FileItem)file;

    if (item.isEmpty() == false) {
      item.save();

      // Writing the location of the saved file to the response data buffer.
      sb.append(String.format("F:%1$s\n", item.getFilename()));
    }
  }

  response.setCharacterEncoding("UTF-8");
  response.setContentType("text/plain");
  response.getWriter().write(sb.toString());
}

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