FileList.md

FileList

Namespace: SpawnDev.SpawnJS.JSObjects
Inherits: SpawnJSObject, IEnumerable<File>
Source: JSObjects/FileList.cs
MDN Reference: FileList on MDN

The FileList interface represents an object of this type returned by the files property of the HTML input element; this lets you access the list of files selected with the input type="file" element. It's also used for a list of files dropped into web content when using the drag and drop API; see the DataTransfer object for details on this usage. https://developer.mozilla.org/en-US/docs/Web/API/FileList

Constructors

Signature	Description
FileList(SpawnJSObjectReference _ref)	Deserialization constructor

Properties

Property	Type	Access	Description
Length	int	get	A read-only value indicating the number of files in the list.

Methods

Method	Return Type	Description
GetEnumerator()	IEnumerator<File>
Item(int index)	File	Returns a File object representing the file at the specified index in the file list.
FirstOrDefault()	File?	Returns first or default
LastOrDefault()	File?	Returns last or default
ToArray()	File[]	Returns the array as a .Net Array
ToArray(int start, int count)	File[]	Returns the array as a .Net Array
ToList()	List<File>	Returns the array as a .Net List
ToList(int start, int count)	List<File>	Returns the array as a .Net List

Examples

SpawnDev.SpawnJS Mapping Note: The JavaScript examples below show the standard Web API usage. In SpawnDev.SpawnJS, the same API is available with C# conventions:

• Properties and methods use PascalCase (e.g., readyState becomes ReadyState)
• Events use ActionEvent with +=/-= (e.g., addEventListener("click", fn) becomes OnClick += handler)
• Async methods return Task<T> instead of Promise<T>
• Objects should be disposed with using statements
• Access via JS.Get<FileList>(...) or constructor new FileList(...)

Logging filenames

const output = document.querySelector(".output");
const fileInput = document.querySelector("#myfiles");

fileInput.addEventListener("change", () => {
  for (const file of fileInput.files) {
    output.innerText += `\n${file.name}`;
  }
});

See full example on MDN

Examples

Logging filenames

In this example, we log the names of all the files selected by the user.

HTML

<input id="myfiles" multiple type="file" />
<pre class="output">Selected files:</pre>

CSS

.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}

JavaScript

JavaScript (MDN):

const output = document.querySelector(".output");
const fileInput = document.querySelector("#myfiles");

fileInput.addEventListener("change", () => {
  for (const file of fileInput.files) {
    output.innerText += `\n${file.name}`;
  }
});

C# (SpawnDev.SpawnJS):

// Requires: builder.Services.AddSpawnJSRuntime();
// Inject SpawnJSRuntime in your component or service:
// [Inject] SpawnJSRuntime JS { get; set; }

using var output = JS.Get<Document>("document").QuerySelector<HTMLElement>(".output");
using var fileInput = JS.Get<Document>("document").QuerySelector<HTMLElement>("#myfiles");

fileInput.addEventListener("change", () => {
for (const file of fileInput.files) {
output.innerText += $"\n{file.name}";
}
});