INNORIX Platform | Web Transfer Status and Results

Implementation Methods

You do not need to build the transfer control yourself. In the management console (Devices), select the device and folder that will send or receive files. Code connected to that location is then generated, and developers can add the code to a page and connect it to existing business logic. A single control handles both uploads and downloads, with TransferMode used to define its purpose. File reception is handled by the agent on the selected device, so there is no need to build a separate server-side script to receive uploads.

Overview

What Is Web Embedding?

Web embedding renders a file transfer control inside a specific element on a web page (for example, <div id="file_control">) and connects transfers through the create(options) call generated by the Code Generator. The generated code contains the target device and folder information, and the control splits files into slices in the browser and transfers them in parallel across multiple sessions. Because the device agent handles file reception, even files ranging from several GB to tens of GB, which are difficult to handle reliably with standard browser uploads, can be transferred without a server-side script.

Common Setup

Include resources — Include the control resource script in the page <head>.

html

<script src="./innorix.js"></script>

Container element — Add an empty element where the control will be rendered.

html

<div id="file_control"></div>

Insert generated code — Add the create() call generated by the Code Generator and match config.el to the container element.

html

<script>
  const config = create({
    TransferMode: 'upload',
    width: 800,
    height: 400,
    agent: 'false',
    custom: { product: 'webpages', subproduct: 'codegenerator' }
  });

  config.el = '#file_control';
</script>

Target device and folder — The storage location and file reception are handled using the device and folder information embedded in the generated code and by the agent on that device. To change the path, regenerate the code in the management console instead of editing the code directly.

Purpose	Where to Specify	Handled By
Upload destination folder	Management console `Devices` → select folder → `Generate`	Device agent
Download target	Select folder or file → `Generate`	Device agent
Transfer monitoring	Management console `Runs` · `Activity Log`	Platform

Key Elements

Purpose	Value / Item
Create control	`create(options)`
Specify render target	`config.el = '#file_control'`
Transfer direction	`TransferMode: 'upload'` · `'download'`
Pass business data	`config.custom`
Ready / completion events	`notifyReadyEvent` · `uploadCompletedEvent` · `downloadCompletedEvent`

The control renders its own file-add and transfer buttons. Developers only need to choose where the control appears and connect it to business logic through custom values and callbacks.

Basic Flow

In the management console Devices, select the target device and folder → generate code with Generate
Include innorix.js on the page + add a container element
Paste the generated create() code → match config.el to the element
(Upload) Add files in the control → transfer → save to the folder (received by the agent)
(Download) Display the list using code generated for the target folder or file → transfer

Choose an Implementation Method

Description

Use TransferMode to define the transfer direction handled by the control. The direction is determined by what you select when generating the code. Selecting a folder defaults to upload and can also include download, while selecting a file generates download-only code.

Direction by Generated Target

Selected Target	Available Generated Code	`TransferMode`
Folder	Upload · Download	`'upload'` / `'download'`
File (multiple selection supported)	Download only	`'download'`

Example

To provide both upload and download on the same page, generate the code twice and add each one separately, using different element IDs and config.el values.

html

<div id="upload_control"></div>
<div id="download_control"></div>

<script>
  const uploadConfig = create({
    TransferMode: 'upload',
    width: 800, height: 400, agent: 'false',
    custom: { product: 'webpages', subproduct: 'codegenerator' }
  });
  uploadConfig.el = '#upload_control';

  const downloadConfig = create({
    TransferMode: 'download',
    width: 800, height: 400, agent: 'false',
    custom: { product: 'webpages', subproduct: 'codegenerator' }
  });
  downloadConfig.el = '#download_control';
</script>

Processing Flow

Select a folder or file in the management console to determine the direction
The generated code's TransferMode fixes the direction as upload or download
If two or more controls are placed on one page, assign different element IDs and config.el values

Upload UI

Description

The upload control renders its own file and folder add areas and transfer button. Files can be added through browse (file selection), folder selection, or the drop zone (drag and drop). After files are added, start the transfer using the control's transfer button. The destination is the folder embedded in the generated code.

Options

Option	Value	Description
`TransferMode`	`'upload'`	Upload-only control
`enableDropZone`	boolean	Allow drag-and-drop attachment
`addFolder`	boolean	Allow folder-level attachment
`width` · `height`	number	Control display size

Example

html

<div id="file_control"></div>

<script>
  const config = create({
    TransferMode: 'upload',
    width: 800,
    height: 400,
    agent: 'false',
    enableDropZone: true,
    addFolder: true,
    custom: { product: 'webpages', subproduct: 'codegenerator' }
  });

  config.el = '#file_control';
</script>

Processing Flow

Generate upload code (TransferMode: 'upload') and insert it into the page
Add items using the control's browse, folder add, or drop zone
Use the control's transfer button → split into slices and transfer in parallel sessions to the target folder (received by the agent)

Download UI

Description

The download control connects to the folder or files selected when the code is generated. Selecting a folder creates a screen for downloading the files in that folder, while selecting files limits downloads to those specific files. The target list is determined at generation time rather than being specified in client-side code.

Generation Types

Generation Type	Selected Target	Purpose
Folder download	Folder	Screen for downloading the files in a folder
File download	File (multiple selection supported)	Screen for downloading only the selected files

Example

html

<div id="download_control"></div>

<script>
  const downloadConfig = create({
    TransferMode: 'download',
    width: 800,
    height: 400,
    agent: 'false',
    custom: { product: 'webpages', subproduct: 'codegenerator' }
  });

  downloadConfig.el = '#download_control';
</script>

Processing Flow

In the management console explorer, select a folder or files → generate download code
Insert the generated code into the page → match config.el to the container
The control receives the target in parallel slices; if specific files were selected, only those files are displayed

Paths and Policies

This section covers where files are actually stored or retrieved and the policies that determine which files can be transferred and in what quantities. The storage location is determined by the device folder selected when the code is generated, while file type, count, and size limits are set through control options and transfer policies in the management console. No server-side script is required.

Storage Path

Description

The upload destination folder and download source location are determined by the device folder selected when the code is generated. Folder information is included in the generated code and should not be modified. Because the path exists only on the device, it is not exposed to the client. File reception and retrieval are handled by the agent on that device.

Where to Specify

Target	How to Specify	Processing
Upload destination folder	`Devices` → select server → `Browse` → select folder → `Generate`	Folder information included in code; agent stores files
Download source	Select folder or file → `Generate`	Target information included in code; agent streams files
Separate transfer units	Management console transfer policy (folder rules)	Platform

Change the Path

If the folder or device changes, regenerate the code in the management console instead of editing the code.

Situation	Action
Change target folder	Select the new folder and regenerate
Change target device	Regenerate from the new device
Change from upload to download	Change the direction and regenerate

Processing Flow

Upload: the agent writes slices to the folder selected when the code was generated
Download: the agent checks the source at the target location embedded in the code and streams it
Path changes are handled by regenerating code in the management console, not by editing the code

File Policies

Description

Limit the types, number, and size of files that can be transferred through control options. You can specify allowed or blocked extensions, file count limits, and maximum individual or total size. The control's guidance text also changes to reflect the configured conditions. These client-side restrictions are intended to filter invalid files early in the UI. Requirements that must always be enforced should also be configured in the management console's transfer policies by the IT engineer.

Options

Option	Type	Description
`allowType`	string[]	List of allowed extensions (for example, `['zip','pdf']`)
`denyType`	string[]	List of blocked extensions (for example, `['exe','bat']`)
`maxFileCount`	number	Maximum number of files per upload
`maxFileSize`	number	Maximum size per file (bytes)
`maxTotalSize`	number	Maximum total size (bytes)

Example

const config = create({
  TransferMode: 'upload',
  width: 800,
  height: 400,
  agent: 'false',
  allowType: ['tar', '7z', 'rar', 'zip'],   // Allowed extensions
  maxFileCount: 1,
  maxFileSize: 10737418240,                  // 10 GB
  custom: { product: 'webpages', subproduct: 'codegenerator' }
});

config.el = '#file_control';

Using allowType is generally easier to manage for extension restrictions. With denyType, the list must be expanded whenever new extensions appear.

Processing Flow

Define the extension policy using either allowType or denyType
Set quantity and size limits using maxFileCount · maxFileSize · maxTotalSize
Apply any mandatory requirements again in the management console's transfer policies

Access Permissions

Description

The control includes the page session cookie with transfer requests, while operator and context values entered on the page are passed with the transfer through custom. Because custom values are recorded in transfer history, you can later identify which operator uploaded a file. However, because these values are created in the browser, do not use them to make authorization decisions. Information that must be recorded reliably should be verified against the server session before it is stored.

Items

Item	Description
`custom`	Object containing business and identification values passed with the transfer
Session cookie	Automatically included by the control in requests (`document.cookie`)
Transfer history	Management console record where `custom` values are stored
Transfer policy (management console)	Defines file access scope by user or system

Example

Pass values entered on the page with the transfer:

html

<input id="name" placeholder="John Doe">
<input id="contact" placeholder="+84 912 345 678">

<script>
  const config = create({
    TransferMode: 'upload',
    width: 800, height: 400, agent: 'false',
    custom: { product: 'webpages', subproduct: 'codegenerator' }
  });

  config.el = '#file_control';

  document.querySelector('#uploadBtn').addEventListener('click', function () {
    // Pass values entered on the page with the transfer
    config.custom.uploader = document.querySelector('#name').value;
    config.custom.contact  = document.querySelector('#contact').value;
  });
</script>

Processing Flow

Add operator and context values to custom and pass them with the transfer
The control sends the request with the session cookie, and the values are recorded in transfer history
Actual access permissions are determined by the management console transfer policy and server-session verification

Expiration and Security

Description

Strengthen security through encryption in transit and access policies in the management console. The control provides options to encrypt transfer data and metadata, while enforced policies such as expiration and blocking are managed through the management console's transfer policies. To preserve session-based access, the control sends requests with credentials included.

Options and Policies

Target	Option / Where to Configure	Description
Transfer data encryption	`useEncrypt: true`	Encrypt file data during transfer
Metadata encryption	`useEncryptMeta: true`	Encrypt metadata such as file names
Access expiration / blocking	Management console transfer policy	Restrict or expire access based on conditions
Session-based access	Session cookie included automatically	Maintain the session across origins

Example

Encrypted transfer:

const config = create({
  TransferMode: 'upload',
  width: 800,
  height: 400,
  agent: 'false',
  useEncrypt: true,
  useEncryptMeta: true,
  custom: { product: 'webpages', subproduct: 'codegenerator' }
});

config.el = '#file_control';

Processing Flow

If transfer security is required, enable encrypted transfer with useEncrypt · useEncryptMeta
Configure enforced policies such as expiration and blocking in the management console's transfer policies
Maintain and verify the accessing principal through requests that include the session cookie

Web Page Integration

This section covers the complete process of generating code in the management console and adding that code to an actual page to connect uploads and downloads. It is divided into code generation, upload integration, download integration, and UI configuration such as view and size.

Generate Code

Description

In Devices, select the server that will send or receive files and open the file explorer with Browse.

In the explorer, select the target folder (or file), then click Generate.

In the INNORIX Code Generator, choose the transfer direction, generate the code, and either copy it with Copy to Clipboard or download it with Download as File.

Generated Code Structure

The generated code consists of the control creation call and the render-target assignment.

html

<div id="file_control"></div>

<script>
  const config = create({
    TransferMode: 'upload',
    width: 800,
    height: 400,
    agent: 'false',
    custom: {
      product: 'webpages',
      subproduct: 'codegenerator'
    }
  });

  config.el = '#file_control';
</script>

Item	Description
`TransferMode`	`'upload'` or `'download'`
`width` · `height`	Control display size
`agent`	Whether to use the agent installation method
`custom`	Request classification and business values
`config.el`	Selector for the element where the control is rendered

The target folder and device information are included in the generated code. Do not modify that portion. To change the path, regenerate the code in the management console. The config.el value must match the element ID on the page.

Processing Flow

Devices → select server → open the explorer with Browse
Select target folder or file → Generate → choose transfer direction
Obtain the code with Copy to Clipboard or Download as File

Connect Uploads

Description

Paste the generated upload code where you want the control to appear. When the page opens, the control is displayed and files can be added and uploaded directly to the folder embedded in the code. You do not need to build a separate server-side script to receive uploads. The generated code connects directly to the selected device folder, and the agent on that device handles file reception.

Checklist

Check	What to Verify
Control resource	`innorix.js` is included on the page
Render target	The element referenced by `config.el` actually exists
Transfer direction	`TransferMode: 'upload'` is set
Target folder	The device and folder selected during generation are correct

Page Example

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Build File Upload</title>
    <script src="./innorix.js"></script>
</head>
<body>
    <h1>INNORIX Web-based Upload</h1>

    
    <div id="file_control"></div>

    <script>
      const config = create({
        TransferMode: 'upload',
        width: 800,
        height: 400,
        agent: 'false',
        custom: { product: 'webpages', subproduct: 'codegenerator' }
      });

      config.el = '#file_control';
    </script>
</body>
</html>

When the page opens, the control is displayed and you can add files and upload them directly to the specified folder.

Processing Flow

Paste the generated upload code where the control should appear
Confirm that innorix.js is included and the element referenced by config.el exists
Add and transfer files from the control → the agent stores them in the folder

Connect Downloads

Description

Download code is generated by selecting a folder or file in the explorer. A folder download creates a screen for downloading the files in that folder. To allow only specific files to be downloaded, select those files instead. Files support download only, so the direction is assigned automatically. The generated code uses the same structure as upload code, with only the TransferMode changed.

Client Integration

html

<div id="download_control"></div>

<script>
  const downloadConfig = create({
    TransferMode: 'download',
    width: 800,
    height: 400,
    agent: 'false',
    custom: { product: 'webpages', subproduct: 'codegenerator' }
  });

  downloadConfig.el = '#download_control';
</script>

Selecting Download in the INNORIX Code Generator generates download code.

When added to the page, the download screen is displayed along with the file list.

To provide both upload and download on the same page, generate the code twice and add each one separately, using different element IDs and config.el values.

html

<div id="upload_control"></div>
<div id="download_control"></div>

Processing Flow

In the explorer, select a folder (list download) or files (specific files) and generate code
Insert the generated code into the page and match config.el to the container
If upload and download controls are placed together, assign different element IDs and config.el values

UI Settings

Description

Configure the control's view, size, and additional UI through options. You can enable or disable the display size, drop zone, transfer window, QR code, status icons, and other elements. Because the control renders its own file-add and transfer buttons, the page only needs to define the control location and any supplemental buttons, such as those used to set custom values.

Options

Option	Value	Description
`width` · `height`	number	Control display size
`enableDropZone`	boolean	Drag-and-drop area
`showTransferWindow`	boolean	Show transfer progress window
`showGraph` / `useSmoothGraph`	boolean	Show progress graph
`showQrCode`	boolean	Show QR code for mobile integration
`showTransferStatusIcon`	boolean	Show status icon
`hideClientPath`	boolean	Hide client path
`transferWindowTitle`	string	Transfer window title

Example

html

<div id="file_control"></div>

<script>
  const config = create({
    TransferMode: 'upload',
    width: 800,
    height: 400,
    agent: 'false',
    enableDropZone: true,
    showTransferWindow: true,
    showQrCode: true,
    hideClientPath: true,
    transferWindowTitle: 'INNORIX',
    custom: { product: 'webpages', subproduct: 'codegenerator' }
  });

  config.el = '#file_control';
</script>

Processing Flow

Configure the control appearance using width · height and display options
Enable optional UI such as enableDropZone · showTransferWindow as needed
Place only the control location and any buttons used to set custom values on the page

Status and Results

This section covers how to display transfer progress and receive completion or failure results through callbacks for follow-up processing. The control renders its own progress UI and notifies key lifecycle points through callbacks in the creation configuration.

Progress Status

Description

During a transfer, progress and speed are displayed in the control's transfer window and graph. Display elements can be enabled or disabled through options, and control readiness can be detected with notifyReadyEvent. It is best to keep the transfer button disabled until the control is ready.

Options and Callbacks

Option / Callback	Description
`showTransferWindow`	Show progress window
`showGraph`	Show progress graph
`useSmoothGraph`	Smooth graph rendering
`showTransferStatusIcon`	Show status icon
`notifyReadyEvent`	Callback when control initialization is complete

Example

const config = create({
  TransferMode: 'upload',
  width: 800, height: 400, agent: 'false',
  showTransferWindow: true,
  showGraph: true,
  useSmoothGraph: true,
  custom: { product: 'webpages', subproduct: 'codegenerator' },

  notifyReadyEvent: function () {
    // Control is ready — enable the transfer button
    document.querySelector('#uploadBtn').disabled = false;
  }
});

config.el = '#file_control';

Processing Flow

Configure the UI with progress display options (showTransferWindow · showGraph, etc.)
Confirm readiness in notifyReadyEvent, then allow user interaction
During the transfer, the control automatically updates progress and speed

Completion Results

Description

When an upload or download finishes, the uploadCompletedEvent or downloadCompletedEvent callback is called. Use the result passed to the callback to identify completed files and run follow-up logic, such as registering them with a business system or refreshing the screen. Completion callbacks run in the browser, so they will not be called if the user closes the window. For long-running transfers involving tens of GB, do not rely on these callbacks alone; cross-check completion using the transfer history in the management console.

Completion Callbacks

Callback	When It Runs
`uploadCompletedEvent`	Entire upload completed
`downloadCompletedEvent`	Entire download completed

Example

const config = create({
  TransferMode: 'upload',
  width: 800, height: 400, agent: 'false',
  custom: { product: 'webpages', subproduct: 'codegenerator' },

  uploadCompletedEvent: function (result) {
    // Send completed uploads to the business system
    fetch('/api/submissions', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        uploader: document.querySelector('#name').value,
        files: result
      })
    });
  },

  downloadCompletedEvent: function (result) {
    console.log('download completed', result);
  }
});

config.el = '#file_control';

Processing Flow

Register uploadCompletedEvent · downloadCompletedEvent in the creation configuration
When the transfer completes, receive the result through the callback argument → connect it to business logic
For long-running transfers, cross-check completion in the management console transfer history

Result Events

Description

The control notifies readiness, completion, and error points throughout the transfer lifecycle through callbacks. Readiness and completion are connected directly through callbacks in the creation configuration, while transfer failures are received through the error callback.

Event Callbacks

Callback	When It Runs
`notifyReadyEvent`	Control ready
`uploadCompletedEvent`	Upload completed
`downloadCompletedEvent`	Download completed
`transferErrorEvent`	Transfer error

Example

const config = create({
  TransferMode: 'upload',
  width: 800, height: 400, agent: 'false',
  custom: { product: 'webpages', subproduct: 'codegenerator' },

  notifyReadyEvent:        function ()       { /* Ready */ },
  uploadCompletedEvent:    function (result) { /* Upload completed */ },
  downloadCompletedEvent:  function (result) { /* Download completed */ },
  transferErrorEvent:      function (error)  { /* Transfer error */ }
});

config.el = '#file_control';

Processing Flow

Connect readiness, completion, and error points through callbacks in the creation configuration
Use the results passed through callback arguments to update the UI and records
Handle retry guidance and business-logic branching in the error callback

Error Handling

Description

Transfer failures are reported through transferErrorEvent. The control automatically recovers from temporary errors according to its retry and auto-recovery policies, and stops the transfer if the allowed error count is exceeded. Conditions that must force a block are managed through transfer policies in the management console.

Options and Callback

Target	Option / Callback	Description
Transfer error callback	`transferErrorEvent`	Reports transfer failure
Retry count	`retryCount` (default 5)	Number of retries after failure
Retry interval	`retryDelay` (default 3 seconds)	Delay between retries
Maximum allowed errors	`maxErrorCount`	Stop transfer when exceeded
Access blocking / expiration	Management console transfer policy	Conditional denial or expiration

Example

const config = create({
  TransferMode: 'upload',
  width: 800, height: 400, agent: 'false',
  retryCount: 5,
  retryDelay: 3,
  maxErrorCount: 9999,
  custom: { product: 'webpages', subproduct: 'codegenerator' },

  transferErrorEvent: function (error) {
    console.log('transfer error', error);
  }
});

config.el = '#file_control';

Processing Flow

Set the automatic retry policy for temporary errors using retryCount · retryDelay
If retries do not recover the transfer, report the failure through transferErrorEvent
Stop when maxErrorCount is exceeded; enforce hard blocks through transfer policies

Large File Transfers

This section covers slice-based parallel sessions, resume from interruption, automatic retries, and integrity verification for reliably transferring files from several GB to tens of GB. These features are enabled and tuned through options in the generated create() configuration, while reception and verification are handled by the device agent.

Large File Transfers

Description

The control splits files into slices (chunks) and transfers them in parallel across multiple sessions, using high-speed mode to increase throughput. Tune the slice size and session count to match the network environment. Because the agent handles storage and assembly, no server-side script is required.

Options

Option	Default	Description
`sliceSize`	`2097152` (2 MB)	Slice size (bytes)
`uploadSliceSize` · `downloadSliceSize`	`0` (= `sliceSize`)	Direction-specific slice size
`sessionCount`	`15`	Number of parallel sessions
`uploadSessionCount` · `downloadSessionCount`	`0` (= `sessionCount`)	Direction-specific session count
`highSpeedMode` / `isHighSpeed`	`true`	High-speed transfer
`largeAccelerator`	`false`	Large-file acceleration

Example

const config = create({
  TransferMode: 'upload',
  width: 800, height: 400, agent: 'false',
  isHighSpeed: true,
  sliceSize: 2097152,          // 2 MB slices
  uploadSessionCount: 16,      // 16 parallel sessions
  downloadSessionCount: 16,
  custom: { product: 'webpages', subproduct: 'codegenerator' }
});

config.el = '#file_control';

Processing Flow

Split the file into sliceSize slices
Transfer slices in parallel using sessionCount (or the direction-specific session count)
Optimize throughput with high-speed mode and acceleration options; the agent stores and assembles the file

Resume Interrupted Transfers

Description

If a transfer is interrupted by a network disconnect or the browser window closing, it resumes from the point after the last slice already stored. Uploads resume based on the slice offset, while downloads use range requests to continue the remaining portion. Duplicate-handling policies determine whether to resume, overwrite, or take another action. Resume-point tracking and file assembly are handled by the agent.

Options

Option	Value	Description
`resumeType`	`overwrite` · `relay` · `nosend` · `numbering` · `confirm`	Upload resume behavior
`uploadDuplicate`	boolean / policy	Upload duplicate handling
`downloadDuplicate`	`resume`, etc.	Download duplicate / resume handling
`resumeCondition`	boolean	Use resume conditions
`attachIncompleteFiles`	boolean	Reattach incomplete files
`autoRecovery`	boolean	Automatic recovery
`enableAutoReattach`	boolean	Automatic reattachment (reconnection)

Example

const config = create({
  TransferMode: 'upload',
  width: 800, height: 400, agent: 'false',
  resumeType: 'relay',           // Resume from the saved point
  downloadDuplicate: 'resume',
  autoRecovery: true,
  attachIncompleteFiles: true,
  enableAutoReattach: true,
  custom: { product: 'webpages', subproduct: 'codegenerator' }
});

config.el = '#file_control';

Processing Flow

During transfer, the agent tracks completion points for each slice
After an interruption, resume from the slice after the last completed slice
Use resumeType · downloadDuplicate policies to determine whether to resume or overwrite

Automatic Retry

Description

Slices that encounter temporary network errors are automatically retried using the configured count and interval. If retrying succeeds, the transfer continues. If the allowed error count is exceeded, the transfer stops.

Options

Option	Default	Description
`retryCount`	`5`	Number of retries after a slice failure
`retryDelay`	`3`	Retry interval (seconds)
`maxErrorCount`	`9999`	Maximum cumulative allowed error count
`autoRecovery`	`true`	Enable automatic recovery
`timeout.minSeconds`	`60`	Minimum socket timeout (seconds)
`timeout.bytes` / `timeout.seconds`	`0`	Timeout calculation per byte

Example

const config = create({
  TransferMode: 'upload',
  width: 800, height: 400, agent: 'false',
  retryCount: 5,
  retryDelay: 3,
  maxErrorCount: 9999,
  autoRecovery: true,
  timeout: { minSeconds: 60, bytes: 0, seconds: 0 },
  custom: { product: 'webpages', subproduct: 'codegenerator' }
});

config.el = '#file_control';

Processing Flow

If a slice transfer fails, retry up to retryCount times at retryDelay intervals
Continue the transfer when a retry succeeds; detect response delays according to timeout
If cumulative errors exceed maxErrorCount, stop the transfer and report an error

Integrity Verification

Description

After transfer, verify that the file arrived without corruption using per-slice hashes. When integrity verification is enabled, the control requests a hash for each section, and the device agent calculates the corresponding slice hash for comparison. No separate server-side script is required.

Options

Option	Value	Description
`downloadIntegrity`	boolean	Enable download integrity verification
`setVerification`	`'enable'` · `'disable'`	Verification mode

Example

const config = create({
  TransferMode: 'download',
  width: 800, height: 400, agent: 'false',
  downloadIntegrity: true,
  setVerification: 'enable',
  custom: { product: 'webpages', subproduct: 'codegenerator' }
});

config.el = '#download_control';

Processing Flow

Enable verification with downloadIntegrity · setVerification
The control requests a hash for each section, and the agent calculates the slice hash
Compare the calculated hash with the received slice to determine whether any corruption occurred

Regenerating and Managing Code

Description

Generated code contains device and folder information. Handle changes to direction and target by regenerating the code, while display and policy changes can be made by editing options in the generated code. If multiple pages use the same folder, place the generated code in a shared file and load it from each page. Then, if the folder changes, you only need to update one location.

Processing Rules

Situation	Action
Change target folder	Select the new folder and regenerate
Change target device	Regenerate from the new device
Change from upload to download	Change the direction and regenerate
Change display size or file policy	Modify only the options in the generated code

Shared File Example

html

<script src="./innorix-upload.js"></script>
<div id="file_control"></div>

Checklist

Check	What to Verify
Code generation	Target device and folder, transfer direction
Insertion	Control resource (`innorix.js`) and render-target element
Business information	Input values passed through `custom`
Policies	Allowed extensions and file count / size limits
Completion handling	Business logic triggered from callbacks
Regeneration	Update procedure when the target changes

Embed Large File Uploads and Downloads in Web Pages

Implementation Methods

Overview

What Is Web Embedding?

Common Setup

Key Elements

Basic Flow

Choose an Implementation Method

Description

Direction by Generated Target

Example

Processing Flow

Upload UI

Description

Options

Example

Processing Flow

Download UI

Description

Generation Types

Example

Processing Flow

Paths and Policies

Storage Path

Description

Where to Specify

Change the Path

Processing Flow

File Policies

Description

Options

Example

Processing Flow

Access Permissions

Description

Items

Example

Processing Flow

Expiration and Security

Description

Options and Policies

Example

Processing Flow

Web Page Integration

Generate Code

Description

Generated Code Structure

Processing Flow

Connect Uploads

Description

Checklist

Page Example

Processing Flow

Connect Downloads

Description

Client Integration

Processing Flow

UI Settings

Description

Options

Example

Processing Flow

Status and Results

Progress Status

Description

Options and Callbacks

Example

Processing Flow

Completion Results

Description

Completion Callbacks

Example

Processing Flow

Result Events

Description

Event Callbacks

Example

Processing Flow

Error Handling

Description