www.dextsolution.com
DEXTUPLOAD
X5
Reference > component

## getWithCredentials

- Version 2.2.0.0 or later

- Explanation

  Returns whether the server can attempt to make a request with credentials such as cookies, authentication headers, and TLS client credentials.

- Uses

      isWith = component.getWithCredentials();

- Return

  True if credentials are available, false otherwise.

## setWithCredentials

- Version 2.2.0.0 or later

- Explanation

  Cookies, authentication headers, TLS client credentials, and whether or not a request can be made to the server.

  To share a domain cookie, you must call the setWithCredentials method with the parameter set to true, as well as the server's CORS settings.

  If set to true, the target server can not specify the value of the Access-Control-Allow-Origin header as '*', but must explicitly record what it allows. You also need to set the Access-Control-Allow-Credentials header to true.

      function onDX5Created(id) {
          var dx = dx5.get()
          // Set to share credentials.
          dx.setWithCredentials(true);
      }

- Uses

      component.setWithCredentials(isWith);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  isWith | String | Set true to share credentials in a cross-domain request, false otherwise.

## enableResumingUpload

- Version 1.0.0.0 or later

- Explanation

  When uploading, set whether or not to use continuation. In the context of uploading files, continuation refers to the option to continue uploading the same file to the server halfway through, even after canceling the upload completely or closing the browser, rather than aborting the upload and retrying it again.

  - Because it only works with chunked file uploads, it only supports 'EXTS' and 'AWSS3' methods.
  - If you clear your browser cache, the file will be uploaded from the beginning, even if it's in a consecutive state.
  - Amazon S3 only allows you to keep your files for up to 7 days.

      function onDX5Created(id) {
        var dx = dx5.get(id);
        // Use the large file upload.
        dx.setUploadMode("EXTS");
        // Set the upload block unit to 10MB.
        dx.setUploadBlockSize(10 * 1024 * 1024);
        // Do not use resume-upload.
        dx.enableResumingUpload(false);
      }

- Uses

      component.enableResumingUpload(enable);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  enable | Boolean | If true, use resume-upload. The default value is true.

## isUsingProgressDialog

- Version 1.0.0.0 or later

- Explanation

  Returns whether to use the product's own progress window.

  You can use the useProgressDialog function to disable the default progress window in DEXTUploadX5.

  Instead, the getUploadStatus function can be used to get upload progress information in a script.

      // Do not use the default progress window.
      dx.useProgressDialog(false);
      // Because the progress window is not visible, use getUploadStatus function to get upload progress information.
      var status = dx.getUploadStatus();
      // Name: status.currentName
      // Total speed: status.totalSpeed
      // Number of uploads completed: status.completeCount
      // Total number: status.totalCount
      // Current file transfer rate: status.currentRate
      // Transferred size of current file: status.currentSendSize
      // Size of the current file: status.currentSize
      // Transfer time of the current file: status.currentTime
      // Time remaining of the current file: status.remainedCurrentTime
      // Total file transfer rate: status.totalRate
      // Size transferred: status.totalSendSize
      // Size of the entire file: status.totalSize
      // Transfer time of the entire file: status.totalTime
      // Remaining time of the entire file: status.remainedTotalTime

- Uses

      using = component.isUsingProgressDialog();

- Return

  true, false

## isWheelEnabled

- Version 3.1.0.0 or later

- Explanation

  Returns whether to use the mouse wheel-scrolling.

  The default is true.

- Uses

      using = component.isWheelEnabled();

- Return

  true, false

## setWheelEnabled

- Version 3.1.0.0 or later

- Explanation

  Enable or disable the mouse wheel-scrolling.

  The default is true.

  The mouse wheel-scrolling function is only considered the desktop browser and is not supported in the mobile environment.

      // Disable the mouse wheel-scrolling.
      dx.setWheelEnabled(false);

- Uses

      component.setWheelEnabled(enable);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  enable | Boolean | Whether to use the mouse wheel-scrolling

## createColumn

- Version 3.2.0.0 or later

- Explanation

  The 'createColumn' method adds a custom column in a'GRID' style component. The 'createColumn' method should be applied prior to the code that adds virtual files.

      var dx = dx5.get(id);
      dx.createColumn({ key: "col01", display: "Column 1" });
      dx.createColumn({ key: "col02", display: "Column 2", width: 150, position: 2, valueAlign: "right" });
      dx.createColumn({
          key: "col03", display: "Column 3", width: 100, type: "list", items: [
              { display: "Banana", value: "A" },
              { display: "Apple", value: "B" },
              { display: "Melon", value: "C" },
              { display: "Kiwi", value: "D" },
              { display: "Grape", value: "E" }
          ]
      });
      // The 'creatColumn' method should be called before the 'dx.addVirtualFile' and 'dx.addVirtualFileList' methods.

  Custom columns can be expressed at a simple level of HTML, so you can display an image such as an icon as the column value or use a button.

      dx.createColumn({
          key: "grade", display: "Grade", width: 80, itemAlign: "left", type: "list", items: [
              { display: "<img src='http://.../class_a.gif' /><span>A Grade</span>", value: "A" },
              { display: "<img src='http://.../class_b.gif' /><span>B Grade</span>", value: "B" },
              { display: "<img src='http://.../class_c.gif' /><span>C Grade</span>", value: "C" },
              { display: "<img src='http://.../class_d.gif' /><span>D Grade</span>", value: "D" },
              { display: "<img src='http://.../class_e.gif' /><span>E Grade</span>", value: "E" },
              { display: "<img src='http://.../class_f.gif' /><span>F Grade</span>", value: "F" },
              { display: "<img src='http://.../class_g.gif' /><span>G Grade</span>", value: "G" },
              { display: "<img src='http://.../class_h.gif' /><span>H Grade</span>", value: "H" },
              { display: "<img src='http://.../class_i.gif' /><span>I Grade</span>", value: "I" },
              { display: "<img src='http://.../class_j.gif' /><span>J Grade</span>", value: "J" }
          ]
      });

- Uses

      component.createColumn({ /* option */ });

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  key | String | This is the name of the custom column and the name of the meta-data. The key is used as the name of the meta-data, so only English and numeric combinations can be used. The name 'name, size, op' cannot be used.
  dispaly | String | This is the header name of the custom column.
  width | Number | The width of the custom column. The default is 50px.
  type | String | As a way to define custom columns, you can select two methods,'text' and'list'.
  items | Array | Indicates items to be used when the custom column type is 'list'. The'list' type does not express the same effect as a drop-down list on the component screen, but only provides a function of selecting the matching item for the actual value. Set the items property in the following way.
      dx.createColumn({
          key: "columnKey", display: "Column Name", width: 150, type: "list", items: [
              { display: "Banana", value: "A" },
              { display: "Apple", value: "B" },
              { display: "Melon", value: "C" },
              { display: "Kiwi", value: "D" },
              { display: "Grape", value: "E" }
          ]
      });
  position | Number | Indicates the location where custom columns are added, starting from 2.
  headerAlign | String | This indicates the horizontal alignment ('left','center','right') of the header name. The default is'center'.
  itemAlign | String | This indicates the horizontal alignment ('left','center','right') of the content of the item. The default is'center'.

## deleteColumn

- Version 3.2.0.0 or later

- Explanation

  The deleteColumn method deletes the custom column from the 'GRID' style component.

      var dx = dx5.get(id);
      dx.deleteColumn("col1");
      dx.deleteColumn("col2");
      dx.deleteColumn("col3");

- Uses

      component.deleteColumn(key);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  key | String | This is the name of the custom column and the name of the meta-data. The key is used as the name of the meta-data, so only English and numeric combinations can be used. The name 'name, size, op' cannot be used.

## setColumnVisible

- Version 3.2.1.0 or later

- Explanation

  Shows and hides a specific column in the 'GRID' style component.

      var dx = dx5.get(id);
      ...
      // Hides the "size" column.
      dx.setColumnVisible("size", false);
      // Show the "size" column.
      dx.setColumnVisible("size", true);

- Uses

      component.setColumnVisible(key, visible);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  key | String | The column's name(=key) to be shown or hidden The name of the size column is 'size' and the name of state column is 'op'. The 'setColumnVisible' method can't be applied to the filename column.
  visible | Boolean | True to show a column, false otherwise.

## setEnableDeletionByKey

- Version 3.3.0.0 or later

- Explanation

  You can turn on/off the ability to delete items with the keyboard.

      // Set the keyboard to prevent deletion of items.
      dx.setEnableDeletionByKey(false);

- Uses

      component.setEnableDeletionByKey(byKey);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  byKey | Boolean | If set to false, items cannot be deleted using the keyboard. The default is true.

## setUploadByOrder

- Version 3.3.0.0 or later

- Explanation

  When uploading, you can set the items arranged on the screen to be uploaded in order. If you don't use the setUploadByOrder method, uploading proceeds in the order in which files were added.

      // Set to upload items in sort order.
      dx.setUploadByOrder(true);

- Uses

      component.setUploadByOrder(byOrder);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  byOrder | Boolean | If set to true, uploads are performed in sort order. The default is false.

## isChecksumEnable

- Version 3.4.0.0 or later

- Explanation

  Returns whether a hash is generated for integrity check.

- Uses

      useChecksum = component.isChecksumEnable();

- Return

  Whether to generate hashes, default is false

## setChecksumEnable

- Version 3.4.0.0 or later

- Explanation

  Set whether to generate hashes for integrity check. If set to true, the file's hashes are transmitted to the server when the file is uploaded, so the server can perform integrity check by comparing it with the hash information.

  Since DEXTUploadX5 alone cannot perform integrity check, DEXTUploadNJ version 2.6.0 must be used as a server component. And this function only applies to the extension-upload (when the upload mode is 'EXTS').

      // Turn on the generating hash.
      dx.setChecksumEnable(true);

- Uses

      component.setChecksumEnable(enable);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  enable | Boolean | Whether to generate hashes

## setCustomFilter

- Version 3.5.0.0 or later

- Explanation

  Sets up a custom filter function.

  Custom filter is a function that allows the user to define a function that can limit file items without using the function provided by the product.

      /**
       * Rejects if the file name exceeds 10 digits excluding the extension name of it.
       * @param file the File(Blob) object
       * @return If true, allow, false if deny.
       */
      function rejectFilesWithLongName(file) {
          if (file.name.length > 10) return false;
          else return true;
      }

      function onDX5Created(id) {
          var dx = dx5.get(id);
          ...
          // Registers the custom filter function.
          dx.setCustomFilter(rejectFilesWithLongName);
      }

- Uses

      component.setCustomFilter(filter);

- Parameters

  Name | Type | Explanation
  --- | --- | ---
  filter | Function | The custom filter function that returns a boolean value