Web File Transfer

Getting Started

Core Concepts

Upload and download files reliably from web services

When web services use files such as documents, images, videos, and data, users need a way to select files in the web interface and transfer them to the required location.

Web file transfer adds file upload and download capabilities to web services, allowing users to select files in a browser and transfer large files between business systems and storage locations.

For example, users can upload large video files through a web service, then download result files needed for their work and use them immediately.


Connecting web services with file transfer capabilities lets users select files from a familiar web interface while the transfer is processed according to the configured transfer environment.

Transfer Flow

Understand the process from file selection through transfer completion

Web file transfer consists of a flow in which the user selects files, starts the transfer, checks its progress, and uses completed files in the next task.

① Select Files

↓

② Prepare Transfer

↓

③ Upload or Download Files

↓

④ Check Transfer Progress

↓

⑤ Transfer Complete

↓

⑥ Use Files

For uploads, files selected on the user's device are transferred to the designated business system or storage location.

For downloads, files prepared in the business system are transferred to the user's device for use in the required task.

This flow lets users select files in the web service, check the transfer status, and use completed files immediately.

Business Impact

Process large-file transfers faster and more reliably

When handling large files through a web service, transfer times can become long depending on file size and network conditions.

Applying web file transfer lets you process large files using a transfer method suited to the business environment and review progress and results in the web interface.

Before and After Adoption

With web file transfer, users can proceed from file selection through completion in a single web interface flow.

Business Teams

Business teams focus on directly uploading and downloading the files they need on the web and immediately using files after the transfer is complete.

File Upload

Upload needed files directly from the web

Users can select files needed for their work from the file transfer screen of the web service and upload them.

After selecting files, users can review the file names and sizes and start the transfer. Multiple files can also be selected and uploaded together.

For example, uploading large videos, design files, business data, or documents to a web service makes those files available in the designated business system or work space.

File Download

Download needed files directly for your work

Files provided by the web service can be downloaded to the required work environment.

Users select the required items from the file list and start the download. The interface can also be configured to download multiple selected files together.

Once the download is complete, users can review the received files in their current work environment and use them for the next task.

Transfer Check

Review files in progress and completed results

When users upload or download files, they can review progress on the transfer screen.

Per-file progress and the overall transfer status distinguish files currently being processed from completed files.


The main items to review are as follows.

• File name

• File size

• Transfer progress

• Transfer status

• Completion result

Users can review the transfer status and then continue the next task based on the completed files.

File Use

Use transferred files immediately in the next task

Completed transfers can be used in the next stage of the business task.

For example, when a user uploads a large source file, the processing system can use it for conversion or analysis. Once the result file is ready, the user can download it from the web service and continue the follow-up work.

File Upload
    ↓  

Business System Processing
    ↓  

Prepare Result File
    ↓  

File Download
    ↓  

Proceed to Next Task

In this way, business teams can transfer files directly from the web service and use completed files in both the current task and the next task.

IT Engineers

IT engineers focus on connecting web services with the file transfer environment, configuring transfer capabilities and policies, and operating the execution results.

Device Configuration

Connect web services with file transfer devices

To configure web file transfer, connect the web service with the server or business system that will process the files.

The web application provides file transfer capabilities, while connected servers and devices receive uploaded files or provide files for download.

The configuration can be extended according to the business environment.

Web Service
     │
     ▼
File Transfer
     │
 ┌───┴────┐
 ▼        ▼
Server   Storage
 │        │
 ▼        ▼
Processing  Workspace

Connecting the web service and transfer environment lets you connect file uploads and downloads to file flows in the business system.

Transfer Configuration

Configure upload and download, file paths, and target locations

Configure the upload and download capabilities used by the web service, and set the paths and target locations for file transfers.

For uploads, specify where user-transferred files will be stored; for downloads, connect the location of files to provide to users.

The main settings can be configured as follows.

Configuring file transfer paths connects the file flow required between the web service and the business system.

Transfer Policy

Set transfer criteria and access scope for files and targets

After configuring transfer capabilities, set the file processing criteria and access scope.

You can build file transfer flows by applying criteria required by the business environment, such as file size, extension, transfer target, and storage path.

The main configuration areas are as follows.

Applying these criteria lets you manage the files used by the web service and the transfer environment according to business objectives.

Work Integration

Connect the next task after file transfer

After a file transfer is complete, you can connect the next task and build a single business workflow.

For example, you can transfer an uploaded file to a processing server and run a conversion task, or prepare a result file in a designated work space after processing and send a notification to the user.

The overall flow can be configured as follows.

Web Upload
    ↓  

File Transfer
    ↓  

Processing
    ↓  

Result Storage
    ↓  

Notification
    ↓  

Web Download

Connecting external services can extend file transfer results into business and operational environments.

Review Results

Review executed transfer tasks and processing results

When a file transfer runs on the web, review the processing result through Runs and execution history.

Operators can review the status of all transfer tasks and per-file processing results and manage the operational status of the transfer environment.

The main items to review are as follows.

Unlike business teams, which focus on the current file's transfer status, IT engineers manage the overall transfer task and processing results by system based on the execution history.

Incident Response

Check transfer status and reprocess tasks as needed

When a transfer task requires review, use Runs and Audit Log to check the execution information and processing steps.

In a file transfer environment, you can review the transfer process based on the connection status of the web service and server, file paths, access permissions, and target system status.

The review flow is as follows.

Review Transfer Task
    ↓  

Check Execution Status
    ↓  

Review Details
    ↓  

Check Connection · Path · Permissions
    ↓  

Adjust Environment
    ↓  

Rerun Task
    ↓  

Review New Run

After the review is complete, rerun the required transfer task and use the new Run to review the file processing result.

This structure separates the flow in which business teams directly transfer and use files on the web from the flow in which IT engineers configure and operate the web file transfer environment, providing content suited to each role.

Developers

Connect transfer capabilities by embedding code generated by the Code Generator into a web page

Do not write the transfer control manually. In the management screen, select the target device and folder to generate code connected to that location, then developers embed the code in the web page and connect it to the existing business logic.

Code Generation

Select a device folder and generate transfer code

In Devices, select the web server that will send and receive files and click Browse to open the file explorer.

In the explorer, select the target folder and click the Generate menu.

On the INNORIX Code Generator screen, select the transfer direction. When a folder is selected, upload is set by default, and you can also select the download checkbox.

When a file is selected, download is set automatically. Multiple files can also be selected at once to generate download code.

Copy the code with Copy to Clipboard or save it with Download as File.

With this method, you do not need to create a separate server script to receive uploads. The generated code connects directly to the folder on the selected device, and the device's agent handles file reception.

Generated Code Structure

Review the structure of the generated code

The generated code consists of a control creation call and a render target specification.

<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>

The target folder and device information are included in the code. Do not modify this part. To change the path, generate the code again from the management screen instead of editing the code.

The el value must match the element ID on the page. To place more than one control on a page, use different element IDs and el values.

Embed in Web Page

Embed the generated code into an existing page

Paste the copied code where the control should appear.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Build File Upload</title>
    <link rel="stylesheet" href="./site.css">
    <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 appears and files can be added and uploaded directly to the specified folder.

When embedding into an existing page, check only two things: whether the control resource script is included in the page and whether the element referenced by el actually exists.

Connect Download Code

Attach download code for folders and files

Folder download code is generated by selecting a folder and checking the download checkbox.

To allow only a specific file to be downloaded, select the file in the explorer. Files support download only, so the direction is selected automatically.

The generated code has the same form as upload code; only TransferMode differs.

<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>

To provide both upload and download on one page, generate the code twice and embed each one. Make sure the element IDs and el values are different.

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

Pass Business Data

Pass page input values along with the transfer

Upload pages often include inputs such as the responsible person's name or contact information in addition to files.

Put these values in custom and pass them along with the transfer. Keep items already present in the generated code unchanged and add only the keys you need.

<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 () {
    // Values entered on the page are sent along with the transfer
    config.custom.uploader = document.querySelector('#name').value;
    config.custom.contact = document.querySelector('#contact').value;
  });
</script>

Values stored in custom are also recorded in the transfer history, so you can later identify which person uploaded a file.

These values are created in the browser. Do not use them for permission decisions; information that must be reliably retained should be recorded by comparing it with the server session.

Apply File Policy

Limit the types and number of files that can be received

Restrict the files accepted on the upload screen.

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

config.el = '#file_control';

The control's guidance text also changes to match the configured conditions, so users can see which files they can upload before selecting them.

Extension restrictions are defined with allowType. denyType requires the list to be expanded whenever a new extension appears.

These limits are intended to filter out invalid files in advance at the interface level. For requirements that must be enforced, apply them together with the transfer policy in the IT engineer section.

Completion Handling

Connect the point when the transfer ends to the business logic

You can receive preparation and completion points by specifying callbacks in the generated configuration.

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

  notifyReadyEvent: function () {
    // The control is ready; enable the submit button
    document.querySelector('#uploadBtn').disabled = false;
  },

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

config.el = '#file_control';

It is recommended to disable the transfer button before the control is ready. Enabling it in the ready callback prevents users from interacting with an empty control.

Completion callbacks run in the browser. Because they are not called when the user closes the window, do not rely on them alone for long-running screens such as transfers of tens of GB. Also use the transfer history in the IT engineer section as a cross-check.

Code Regeneration and Management

Refresh code when the target changes

Generated code contains device and folder information. In the following cases, do not modify the code; generate it again from the management screen.

Handle direction and target changes through regeneration, and display and policy changes through code edits.

When the same folder is used on multiple pages, it is easier to manage the generated code by extracting it into a shared file and loading it from each page. When the folder changes, you only need to update it in one place.

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