diff --git a/src/mol-plugin-state/actions/file.ts b/src/mol-plugin-state/actions/file.ts
index ecba4380c6ac0d69a527e92ee21f9045fe44047d..13208532ebbd70aaf8c86011ab5db23cec128f2e 100644
--- a/src/mol-plugin-state/actions/file.ts
+++ b/src/mol-plugin-state/actions/file.ts
@@ -10,7 +10,6 @@ import { Task } from '../../mol-task';
 import { getFileInfo } from '../../mol-util/file-info';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { PluginStateObject } from '../objects';
-import { Asset } from '../../mol-util/assets';
 
 export const OpenFiles = StateAction.build({
     display: { name: 'Open Files', description: 'Load one or more files and optionally create default visuals' },
@@ -31,12 +30,11 @@ export const OpenFiles = StateAction.build({
             plugin.log.error('No file(s) selected');
             return;
         }
-        for (let i = 0, il = params.files.length; i < il; ++i) {
+        for (const file of params.files) {
             try {
-                const file = params.files[i];
-                const info = getFileInfo(file);
+                const info = getFileInfo(file.file!);
                 const isBinary = plugin.dataFormats.binaryExtensions.has(info.ext);
-                const { data } = await plugin.builders.data.readFile({ file: Asset.File(file), isBinary });
+                const { data } = await plugin.builders.data.readFile({ file, isBinary });
                 const provider = params.format === 'auto'
                     ? plugin.dataFormats.auto(info, data.cell?.obj!)
                     : plugin.dataFormats.get(params.format);
diff --git a/src/mol-plugin-ui/controls/parameters.tsx b/src/mol-plugin-ui/controls/parameters.tsx
index f9488d728e4ddd325d1487678afb08e846254899..2cb2c1579aa4d0bed94b92ac4422e27512624f76 100644
--- a/src/mol-plugin-ui/controls/parameters.tsx
+++ b/src/mol-plugin-ui/controls/parameters.tsx
@@ -834,7 +834,13 @@ export class FileControl extends React.PureComponent<ParamProps<PD.FileParam>> {
 
 export class FileListControl extends React.PureComponent<ParamProps<PD.FileListParam>> {
     change(value: FileList) {
-        this.props.onChange({ name: this.props.name, param: this.props.param, value });
+        const files: Asset.File[] = [];
+        if (value) {
+            for (let i = 0, il = value.length; i < il; ++i) {
+                files.push(Asset.File(value[i]));
+            }
+        }
+        this.props.onChange({ name: this.props.name, param: this.props.param, value: files });
     }
 
     onChangeFileList = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -846,8 +852,8 @@ export class FileListControl extends React.PureComponent<ParamProps<PD.FileListP
 
         const names: string[] = [];
         if (value) {
-            for (let i = 0, il = value.length; i < il; ++i) {
-                names.push(value[i].name);
+            for (const file of value) {
+                names.push(file.name);
             }
         }
         const label = names.length === 0
diff --git a/src/mol-util/param-definition.ts b/src/mol-util/param-definition.ts
index db425f90f163fcee86dd73b0064bf2c839633c34..808fd32cfbf17500e4121ec3e9f46ef699812cf3 100644
--- a/src/mol-util/param-definition.ts
+++ b/src/mol-util/param-definition.ts
@@ -167,7 +167,7 @@ export namespace ParamDefinition {
         return ret;
     }
 
-    export interface FileListParam extends Base<FileList | null> {
+    export interface FileListParam extends Base<Asset.File[] | null> {
         type: 'file-list'
         accept?: string
     }