www.dextsolution.com
DEXTUPLOAD
X5
Reference > dx5 object

# dx5 Methods

## canonicalize

- Version 1.0.0.0 or later

- Explanation

  Returns the full path of the given relative path.

  It is a kind of utility which is made for sample work irrespective of the DEXTUploadX5 component. The path starting with "/", "./", or "../" is changed to a path starting with the schema and returned.

  If an invalid path value is given, it is recommended to use it only for reference purposes, since an invalid whole path may be returned.

      //If the current URL is "http://abc.com/path1/path2/current.html", "http://abc.com/path1/abc/resource.txt" is returned.
      var full = dx5.canonicalize("../abc/resource.txt");

- Uses

      fullURL = dx5.canonicalize(relativeURL);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  relativeURL | String | The URL starting with "/", "./", "../"

- Return

  Full path starting with schema

## create

- Version 1.0.0.0 or later

- Explanation

  Create a component.

      <div id="dext5-container" style="width:500px; height:300px;"><!-- container --></div>
      <button id="btn-add-files" type="button">Add files</button>
      <script>
          dx5.create({
              // Give the component a DOM ID with the 'id' attribute. This DOM ID is what distinguishes the component.
              // The "parentId" property Specifies the ID of the container.
              id: "dext5", parentId: "dext5-container",
              // The component does not have a button, so you have to create the button element yourself.
              // Create the "button" or "input[type=button]", if specified, a button is automatically created to which the file add function is connected.
              btnFile: "btn-add-files"
          });
      </script>
      <script>
          function onDX5Error(id, code, msg) {
              // Called when an error occurs while using the component.
          }
          function onDX5Created(id) {
              // When the component is created using the "dx5.create" method, the onDX5Create callback function is called.
              // You can get the component object using the "dx5.get" method in the callback function.
              var dx = dx5.get(id);
          }
      </script>

  From version 3.3.0.0, when creating a component, if a component with the same id exists, it removes the existing component so that it is not duplicated.

- Uses

      dx5.create({ /* options */ });

- Parameters

  The following table describes the properties and values ​​of the JSON parameter object that the "create" method requires.

  Name | Explanation
  --- | ---
  style | This property determines the basic GUI appearance of the component. Takes the values 'list', 'tile', 'single', and 'grid', with the default being 'list'. 'grid' was added in version 3.2.0.0.
  progressType | Determines the GUI appearance of the upload/download progress window for the component. "0", "1", "2", "3" and the default value is "0". If you are uploading via ORAF, you can only use the '0' or '3' progress window because you cannot see the upload status of each file. The "3" progress window format has been added since version 2.3.0.0 to be used when performing the file download operation and when the size of the file is unknown.
  id | [Required] ID of DEXTUploadX5 component. The "id" property value of the "object" HTML element used when the component is created, and the dx5 object identifies the component with this ID.
  parentId | [Required] DEXTUploadX5 ID of the parent element in which the component is to be created. The "id" property value of the container element that contains the "object" HTML element used when the component is created.
  lang | You can specify values ​​such as "en", "ko", "ja", "zh", ..., which defaults to the browser default language charset. The product uses Korean resources by default, so if you want to use a charset in a language other than Korean, you need 'dextuploadx5-svg-message-{charset}.txt' written in that language.
  width | The width of the component. It uses CSS format, the default is "100%". It is recommended that the width of a component be dependent on the width of the container without using the "width" property.
  height | The height of the component. It uses CSS format, the default is "100%". It is recommended that the height of a component be dependent on the height of the container without using the "height" property.
  path | The location of the DEXTUploadX5 component. If this value is not specified, it follows the value of "dextuploadx5Configuration.productPath" in the "dextuploadx5-configuration.js" file.
  btnFile | Set the ID of the button element to connect the file selection dialog. If you specify an ID such as "button" or "input[type=button]"" element, the file add function will be automatically binded.
  btnFolder (Version 3.7.0.0 or later) | Set the ID of the button element to connect the folder selection dialog. If you specify an ID like "button" or "input[type=button]"" element, the folder add function will be automatically binded.
  btnSelectAll | Set the ID of the button element to use all files selection function. If you specify an ID such as "button" or "input[type=button]"" element, the function to select all files will be automatically binded.
  btnUnselectAll | Sets the ID of the button element that will be used to unselect all files. If you specify an ID such as "button" or "input[type=button]"" element, the function to unselect selected file will be automatically binded.
  btnDeleteSelected | Sets the ID of the button element to be used to delete the selected files. If you specify an ID such as "button" or "input[type=button]"" element, the function to delete the selected files will be automatically binded.
  btnDeleteAll | Sets the ID of the button element to be used for the all files deletion function. If you specify an ID such as "button" or "input[type=button]"" element, the function to delete all files will be automatically binded.
  btnDeleteChecked | Set the ID of the button element to use the checked files delete function. If you specify an ID such as "button" or "input[type=button]"" element, the function to delete checked files will be automatically binded.
  btnRevokeAll | Set the ID of the button element that will be used to restore deleted virtual files. If you specify an ID such as "button" or "input[type=button]"" element, the function to revoke all deleted virtual files will be automatically binded.
  btnUploadAuto | Sets the ID of the button element that will be used to upload files. If you specify an ID like "button" or "input[type=button]"" element, the function to upload all local files that have not yet been uploaded is automatically connected.
  btnUploadChecked | Sets the ID of the button element that will be used to upload files. If you specify an ID such as "button" or "input[type=button]"" element, the function to upload all checked local files will be automatically binded.
  btnUploadSelected | Sets the ID of the button element that will be used to upload files. If you specify an ID such as "button" or "input[type=button]"" element, the function to upload all selected local files will be automatically binded.
  btnDownloadAuto | Set the ID of the button element that will be used to download the file. By specifying an ID, such as ‘button’ or ‘input[type=button]’, the function to download all virtual files will be automatically linked.
  btnDownloadChecked | Set the ID of the button element that will be used to download files. If you specify an ID such as ‘button’ or ‘input[type=button]’, the function to download all checked virtual files will be automatically linked.
  btnDownloadSelected | Set the ID of the button element that will be used to download files. If you specify an ID such as ‘button’ or ‘input[type=button]’, the function to download all selected virtual files will be automatically linked.
  btnStopDownloading | Set the ID of the button element to use the function to stop file downloads. If you specify an ID such as ‘button’ or ‘input[type=button]’, the function to stop downloads will be automatically linked.
  btnDownloadCompressedAuto | Set the ID of the button element to use the compressed download function. If you specify an ID such as ‘button’ or ‘input[type=button]’, the function to download virtual files as a single compressed file will be automatically linked.
  btnDownloadCompressedChecked | Set the ID of the button element to use the compressed download function. If you specify an ID such as ‘button’ or ‘input[type=button]’, the function to download checked virtual files as a single compressed file will be automatically linked.
  btnDownloadCompressedSelected | Set the ID of the button element to use the compressed download function. When you specify an ID, such as a ‘button’ or ‘input[type=button]’ element, the function to download selected virtual files as a single compressed file is automatically linked.
  btnStopCompressWaiting | Set the ID of the button element to use the function to stop compressed downloads. By specifying an ID, such as a ‘button’ or ‘input[type=button]’ element, the function to stop compressed downloads is automatically linked.
  btnOpenDownloadDialogOfHD | Set the ID of the button element that will be used to open the dialog box for setting the download path for the HD application. By specifying an ID for an element such as ‘button’ or ‘input[type=button]’, the function for setting the download path for the HD application is automatically linked.
  btnDownloadToHDAuto | Set the ID of the button element that will be used to download files using the HD application. Specify an ID such as ‘button’ or ‘input[type=button]’ to automatically link the function that downloads virtual files using the HD application.
  btnDownloadToHDChecked | Set the ID of the button element that will be used to download files using the HD application. By specifying an ID, such as ‘button’ or ‘input[type=button]’, the function to download virtual files in the checked state using the HD application will be automatically linked.
  btnDownloadToHDSelected | Set the ID of the button element that will be used to download files using the HD application. By specifying an ID, such as a ‘button’ or ‘input[type=button]’ element, the function to download selected virtual files using the HD application will be automatically linked.
  btnStopUploading | Set the ID of the button element that will be used to stop uploading files. If you specify an ID like "button" or "input[type=button]"" element, the function to stop uploading will be automatically binded.
  loadWaitingTime (supported since version 2.1.2.0) | Sets the time to wait between creating and loading components. The default value is 10000ms(10 seconds), if you want to wait longer than this, you can set it in milliseconds (1/1000 second). Until version 3.6.1.0, it was 3000 ms (3 seconds).
  events (supported since version 3.10.0.0) | It is used to register individual handlers to handle events that occur in the product. The product handles events by calling global event handlers with names starting with 'onDX5~', but you can specify at component creation time that individual components can register and use their own handlers as needed. You declare a global event handler and an individual event handler in duplicate: Both event handlers are called. They are called in the following order: individual handler, then global handler. For events whose return values are affected, only the return value of the last event handler called will be affected.
      dx5.create({
          ...
          events: {
              created:                    /* onDX5Created */,
              error:                      /* onDX5Error */,
              beforeItemsAdd:             /* onDX5BeforeItemsAdd */,
              itemAdding:                 /* onDX5ItemAdding */,
              itemsAdded:                 /* onDX5ItemsAdded */,
              beforeItemsDelete:          /* onDX5BeforeItemsDelete */,
              itemDeleting:               /* onDX5ItemDeleting */,
              itemsDeleted:               /* onDX5ItemsDeleted */,
              itemSelect:                 /* onDX5ItemSelect */,
              itemCheck:                  /* onDX5ItemCheck */,
              itemDoubleClick:            /* onDX5ItemDoubleClick */,
              uploadBegin:                /* onDX5UploadBegin */,
              uploadItemStart:            /* onDX5UploadItemStart */,
              uploadItemEnd:              /* onDX5UploadItemEnd */,
              uploadStopped:              /* onDX5UploadStopped */,
              uploadCompleted:            /* onDX5UploadCompleted */,
              downloadBegin:              /* onDX5DownloadBegin */,
              downloadItemStart:          /* onDX5DownloadItemStart */,
              downloadItemEnd:            /* onDX5DownloadItemEnd */,
              downloadStopped:            /* onDX5DownloadStopped */,
              downloadCompleted:          /* onDX5DownloadCompleted */,
              preview:                    /* onDX5Preview */,
              itemsToHDFinish:            /* onDX5ItemsToHDFinish */,
              columnDataBinding:          /* onDX5ColumnDataBinding */,
              compressWaitingBegin:       /* onDX5CompressWaitingBegin */,
              compressWaitingCompleted:   /* onDX5CompressWaitingCompleted */,
              compressWaitingStopped:     /* onDX5CompressWaitingStopped */,
              dragAndDrop:                /* onDX5DragAndDrop */,
          }
      });

## delete

- Version 3.3.0.0 or later

- Explanation

  Delete the DEXTUploadX5 component. Even if the object to be deleted does not exist, no error occurs.

      // Delete the component whose ID is "dext5".
      dx5.delete( "dext5" );

- Uses

      success = dx5.delete(id);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  id | String | ID of the DEXTUploadX5 component to be deleted

- Return

  It is true if the target exists and has been deleted, otherwise it is false.

## get

- Version 1.0.0.0 or later

- Explanation

  To use the generated DEXTUploadX5 component, you must use the "dx5.get" method to get the component object.

      <div id="dext5-container" style="width:500px; height:300px;"><!-- container --></div>
      <button id="btn-add-files" type="button">Add files</button>
      <script>
          dx5.create({ mode: "multi", id: "dext5", ... });
      </script>
      <script>
          function onDX5Error(id, code, msg) {
              // Called when an error occurs while using the component.
          }
          function onDX5Created(id) {
              // When the component is created using the "dx5.create" method, the "onDX5Create" callback function is called.
              // Once the component is created, you can get the component using the "dx5.get" method.
              var dx = dx5.get(id);
          }
      </script>

- Uses

      component = dx5.get(id);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  id | String | This is the ID of the DEXTUploadX5 component. The "id" attribute value of the "object" HTML element used when the component is created, and the "dx5" object identifies the component with this ID.

- Return

  The component object corresponding to the given id.

## isHDAvailable(Support discontinued)

- Version 2.3.5.0 or later and earlier than 4.4.0.0

- Explanation

  This method is used to check whether an HD application is installed and communicating with a web page.

  If a successful response is obtained by calling the method, the callback function registered with the success parameter is called, and if it fails, the callback function registered with the fail parameter is called.

      function checkHDInstalled() {
          dx5.isHDAvailable(function (ver) {
              // If successful, the string representing the version can be obtained as a parameter.
              alert(ver);
          }, function (code, msg) {
              // If it fails, we can get the failure code and message.
              alert(code + ": " + msg);
          });
      }

  The isHDAvailable function indicates the state in which an HD application can be used. It is not possible to know whether an HD application is currently running.

  If the response fails, the following additional error information may be displayed on the browser console.

      # Chrome
      POST http://localhost:35959/DEXTUploadX5_HDS net::ERR_CONNECTION_REFUSED

      # FF
      Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:35959/DEXTUploadX5_HDS. (Reason: CORS request did not succeed).

      # Opera
      POST http://localhost:35959/DEXTUploadX5_HDS net::ERR_CONNECTION_REFUSED

- Uses

      dx5.isHDAvailable(success, fail);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  success | function | Callback function called when HD is available
  fail | function | Callback function that is called when HD is not available

## isHDRunning(Support discontinued)

- Version 2.3.5.0 or later and earlier than 4.4.0.0

- Explanation

  This method is used to check whether the HD application program is currently running.

  If a successful response is obtained by calling the method, the callback function registered with the success parameter is called, and if it fails, the callback function registered with the fail parameter is called.

      function checkHDRunning() {
          dx5.isHDRunning(function (ver) {
              // If successful, the string representing the version can be obtained as a parameter.
              alert(ver);
          }, function (code, msg) {
              // If it fails, we can get the failure code and message.
              alert(code + ": " + msg);
          });
      }

  The isHDRunning function only checks whether the current HD application is running. Therefore, it is not known whether the HD application is installed.

  If the response fails, the following additional error information may be displayed on the browser console, and the message may differ depending on whether HD is installed.

      # Chrome
      POST http://localhost:35959/DEXTUploadX5_HDM 404 (Not Found)
      Access to XMLHttpRequest at 'http://localhost:35959/DEXTUploadX5_HDM' from origin 'http://(omission)' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

      # FF
      Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:35959/DEXTUploadX5_HDM. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

      # Opera
      Failed to load resource: the server responded with a status of 404 (Not Found)
      Access to XMLHttpRequest at 'http://localhost:35959/DEXTUploadX5_HDM' from origin 'http://(omission)' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

- Uses

      dx5.isHDRunning(success, fail);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  success | function | Callback function that is called when the HD application is running
  fail | function | Callback function to be called if the HD application is not running