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("./common-upload.ashx?use=dext"));
}
DEXTUploadX5 acts as a sender to send files. DEXTUpload.NET Pro, on the other hand, acts as a receiver to receive files on the server side.
This example is handled by the generic handler (common-upload.ashx) for file upload processing.
According to the RFC 1867 protocol, data sent to multipart/form-data must be received in POST method. In the ProcessRequest method of the common_upload class, use the FileUpload class of DEXTUpload.NET Pro to perform server-side upload processing.
Please refer to the DEXTUpload.NET Pro product manual and samples for detailed function or description of DEXTUpload.NET Pro.
# Server-side
// Use the FileUpload class to handle file uploads on the server.
// It is recommended to use using statement in FileUpload class.
using (var dext = new DEXTUpload.NET.FileUpload())
{
var sb = new StringBuilder();
// You can get uploaded file list object by using GetFileElements method.
foreach (var element in dext.GetFileElements("DEXTUploadX5_FileData"))
{
if (!element.IsEmpty)
{
// Save the file.
element.Save();
sb.AppendFormat("{0}\n", element.FileName);
}
}
context.Response.ContentType = "text/plain";
context.Response.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.
}
Example