www.dextsolution.com
DEXTUPLOAD
X5
menu toggleProduct description > Uploading files

Uploading files

Normally, to transfer files from the browser, set the type attribute of the input element to 'file'. You must set the method attribute of the form element to 'post' and the enctype attribute to multipart/form-data because you need to send in POST format. 

<form action="..." method="post" enctype="multipart/form-data">
    <input type="file" name="file1"/>
    <input type="submit" value="Submit"/>
</form>

When the user selects a file and clicks the 'Submit' button, the browser encodes the file data into a multi-part format and transmits it to the server.

To upload using pure HTML only, you need to create an input element equal to the number of files to be uploaded. In HTML5, you can select multiple files for a single element, or you can filter using MIME settings. However, there are some interface elements that are still inconvenient to use, not all browsers support the same problem.

The main steps for using DEXTUploadX5 are as follows:

Declaring the JavaScript library files

To use the DEXTUploadX5 component, you must include the dextuploadx5-configuration.js and dextuploadx5.js files in the page.

<script src="path/dx5/dextuploadx5-configuration.js"></script>
<script src="path/dx5/dextuploadx5.js"></script>
Using the dextuploadx5-configuration.js file

This script source declares a JavaScript object that contains a component configuration called dextuploadx5Configuration.

The authkey property of this object allows you to set the authentication key of the issued trial license key or the commercial license. (See "Domain License"for more information .)

The productPath property sets the web path where the product is located. If the path is not correct, the component will not start correctly.

The dextuploadx5-configuration.js script file must be included on every page where DEXTUploadX5 is used and must be declared before the dextuploadx5.js file.

# dextuploadx5-configuraiton.js
win.dextuploadx5Configuration = {	
    // You must have an authentication key string to use the component.	
    authkey: "jn+xziPdVh6f5KN17uFHdY95XEvB7o...skip...2YjGiLl92zWiXAyO2FdI9r5XGfwxQ=",
  
    // The productPath property is the location of the product resource.
    // Make sure to set the full path including the schema (http, https) (do not enter it as a relative path)
    // Example productPath: "http://www.sample.com/dx5/"
    productPath: location.origin + "/dx5/"
};
Creating components

When the browser reads the dextuploadx5.js script file, a dx5 object that manages DEXTUploadX5 is automatically created. dx5 is a JavaScript object that creates and manages components and can be used as a scope on the page.

To create a component, you need a container element that contains the component, and at the end of the page you can create the component using the dx5.create function. (Alternatively, you can call the dx5.create function after all the DOM elements have been loaded.)

The size of a component is based on the size of the container that holds the component. Therefore, you must specify the size of the container. 

<div id="dext5-container" style="width:500px; height:300px;"><!-- container element --></div>
<script>
  // Give the component a DOM ID with the id attribute.
  // The parentId is specified the container ID. 
  dx5.create({ id: "dext5", parentId: "dext5-container" });
</script>

If "DEXTUploadX5 component loading failed!" Message pops up, there is a problem with the productPath setting in dextuploadx5-configuration.js, so make sure the path is correct.

Linking Events

The product internally generates events before and after the start of a specific activity. If the component is loaded, it calls the onDX5Created callback function, and if an error occurs during use, it is set to call the onDX5Error function. It is not possible to use the product only by linking events, but in order to implement complex and diverse functions, events must be used appropriately. An event is not registered as a DOM event, but can be caught only by generating a callback function with a named name. 

// Create a function named onDX5Error so that when the component encounters an error, it calls the onDX5Error function.
function onDX5Error(id, code, msg) {
  ...
}

// Create the onDX5Created function as follows: The component is loaded (created) and then called.
function onDX5Created(id) {
  ...
}

If the onDX5Error callback function is not declared, you can not check errors occured in DEXTUploadX5.

Setting button events

DEXTUploadX5 does not have a built-in button to add and upload files in the component screen. With the exception of some features, all of the major buttons use external HTML elements. To upload a file, you need a button to add a file and a button to start uploading, and you need to use a script to link component functionality. 

<button type="button" onclick="addTo('component-id');">Add</button>
<button type="button" onclick="uploadFrom('component-id');">Upload</button>
<script>
function addTo(id) {
  dx5.get(id).openFileDialog();
}

function uploadFrom(id) {
  var dx = dx5.get(id);
  if (dx.hasUploadableItems()) {
    dx.setUploadURL("http://domain/uploadpath");
    dx.upload("AUTO");
  } else {
    alert("No files to upload.");
  }
}
</script>

For some functions, it provides automatic binding at the time of component loading without using complex scripts like above.

<button id="btn-add-files" type="button" ">Add</button>
<button id="btn-upload" type="button">Upload</button>
<script>
  dx5.create({
    ...,
    // When the component is created, the add-file and the upload-file features to automatically connect. 
    btnFile: "btn-add-files", btnUploadAuto: "btn-upload"
  });
</script>

The automatic binding feature is very convenient, but may not be suitable for implementing complex functions.

Server-Side processing

To upload a file, you need to use pure HTML or a client component such as DEXTUploadX5, and the server needs an additional implementation to store the file data sent from the client to a specific location on the server. There are server platforms that have the skills or capabilities to handle file uploads; ASP.NET, PHP, and Java Platforms such as the Spring Web Framework can handle uploaded files by default, but because technologies such as ASP, Java Servlets, or JSP can not handle files, It is essential.

Our server components

  • ASP: DEXTUpload Professional
  • ASP.NET: DEXTUpload.NET Professional
  • Java Servlet(JSP)/Spring: DEXTUploadNJ
  • PHP, Nodejs, Python, Ruby: N/A

Most DEXTUploadX5 features are server-agnostic, but features such as large uploads, file downloads, and file opening require integration with your own server components. The server-side code depends on your language, platform, and the components you are using, so you should additionally consult the documentation or samples of the components that support your environment.

Processing the response data from the server

The web returns the response information to the client for the request sent to GET and POST. When the file is uploaded, the result is returned as response data. This response data can be obtained with the getResponses function of the component. 

// onDX5UploadCompleted function is a callback function that is called when the upload is completed (server-side file upload processing is completed).
function onDX5UploadCompleted(id) {  
  // Check the response data. 
  alert(dx5.get(id).getResponses(0));
}

After completing the process of "Adding > Uploading > Server-side processing > Returning response data", the uploading of the file is finished, and screen switching (page change) does not occur unlike pure HTML uploading.

Copyright ⓒ DEXTSolution Inc. All rights reserved