www.dextsolution.com
DEXTUPLOAD
X5
menu toggleReference > 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

  • Version 2.3.5.0 or later

  • 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

  • Version 2.3.5.0 or later

  • 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
Copyright ⓒ DEXTSolution Inc. All rights reserved