Form & File Handling

/**
 * Represents a file with metadata
 */
class File extends Blob {
  constructor(bits: BlobPart[], name: string, options?: FilePropertyBag);
  
  /** File name */
  readonly name: string;
  
  /** Last modified timestamp */
  readonly lastModified: number;
  
  /** Last modified date */
  readonly lastModifiedDate: Date;
  
  /** Web kit relative path */
  readonly webkitRelativePath: string;
}

interface FilePropertyBag extends BlobPropertyBag {
  lastModified?: number;
}

/**
 * Represents binary data
 */
class Blob {
  constructor(blobParts?: BlobPart[], options?: BlobPropertyBag);
  
  /** Blob size in bytes */
  readonly size: number;
  
  /** MIME type */
  readonly type: string;
  
  /** Get array buffer */
  arrayBuffer(): Promise<ArrayBuffer>;
  
  /** Get text */
  text(): Promise<string>;
  
  /** Get stream */
  stream(): ReadableStream;
  
  /** Create slice */
  slice(start?: number, end?: number, contentType?: string): Blob;
}

type BlobPart = BufferSource | Blob | string;

interface BlobPropertyBag {
  type?: string;
  endings?: 'transparent' | 'native';
}

/**
 * Asynchronous file reading
 */
class FileReader extends EventTarget {
  /** Reading state constants */
  static readonly EMPTY: number;
  static readonly LOADING: number;
  static readonly DONE: number;
  
  /** Current state */
  readonly readyState: number;
  
  /** Read result */
  readonly result: string | ArrayBuffer | null;
  
  /** Read error */
  readonly error: DOMException | null;
  
  /** Read as array buffer */
  readAsArrayBuffer(file: Blob): void;
  
  /** Read as binary string */
  readAsBinaryString(file: Blob): void;
  
  /** Read as data URL */
  readAsDataURL(file: Blob): void;
  
  /** Read as text */
  readAsText(file: Blob, encoding?: string): void;
  
  /** Abort reading */
  abort(): void;
  
  // Event handlers
  onload: ((event: ProgressEvent) => void) | null;
  onerror: ((event: ProgressEvent) => void) | null;
  onabort: ((event: ProgressEvent) => void) | null;
  onloadstart: ((event: ProgressEvent) => void) | null;
  onloadend: ((event: ProgressEvent) => void) | null;
  onprogress: ((event: ProgressEvent) => void) | null;
}

/**
 * Form data handling for HTTP requests
 */
class FormData {
  /** Append field value */
  append(name: string, value: string | Blob, filename?: string): void;
  
  /** Delete field */
  delete(name: string): void;
  
  /** Get field value */
  get(name: string): FormDataEntryValue | null;
  
  /** Get all field values */
  getAll(name: string): FormDataEntryValue[];
  
  /** Check if field exists */
  has(name: string): boolean;
  
  /** Set field value */
  set(name: string, value: string | Blob, filename?: string): void;
  
  /** Iterate over entries */
  forEach(callback: (value: FormDataEntryValue, key: string, formData: FormData) => void): void;
  
  /** Get field names */
  keys(): IterableIterator<string>;
  
  /** Get field values */
  values(): IterableIterator<FormDataEntryValue>;
  
  /** Get field entries */
  entries(): IterableIterator<[string, FormDataEntryValue]>;
}

type FormDataEntryValue = File | string;

import { Window, FormData } from "happy-dom";

const window = new Window();
const document = window.document;

// Create file input
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.multiple = true;

// Handle file selection
fileInput.addEventListener('change', async () => {
  const files = fileInput.files;
  if (!files) return;
  
  // Create form data
  const formData = new FormData();
  
  // Add files to form data
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    formData.append('files', file, file.name);
  }
  
  // Add additional fields
  formData.append('description', 'Multiple file upload');
  
  // Send form data
  const response = await fetch('/upload', {
    method: 'POST',
    body: formData
  });
  
  console.log('Upload response:', response.status);
});

import { File, FileReader } from "happy-dom";

// Create file
const file = new File(['Hello, World!'], 'hello.txt', {
  type: 'text/plain',
  lastModified: Date.now()
});

// Create file reader
const reader = new FileReader();

// Set up event handlers
reader.onload = (event) => {
  console.log('File content:', event.target?.result);
};

reader.onerror = (event) => {
  console.error('Read error:', reader.error);
};

reader.onprogress = (event) => {
  if (event.lengthComputable) {
    const progress = (event.loaded / event.total) * 100;
    console.log(`Progress: ${progress}%`);
  }
};

// Read file as text
reader.readAsText(file);

// Read file as data URL
// reader.readAsDataURL(file);

// Read file as array buffer
// reader.readAsArrayBuffer(file);

import { Blob } from "happy-dom";

// Create blob from string
const textBlob = new Blob(['Hello, ', 'World!'], {
  type: 'text/plain'
});

console.log('Blob size:', textBlob.size);
console.log('Blob type:', textBlob.type);

// Create blob slice
const slice = textBlob.slice(0, 5, 'text/plain');

// Read blob as text
const text = await textBlob.text();
console.log('Blob content:', text); // 'Hello, World!'

// Read blob as array buffer
const buffer = await textBlob.arrayBuffer();
console.log('Buffer size:', buffer.byteLength);

// Create blob from binary data
const binaryData = new Uint8Array([72, 101, 108, 108, 111]); // 'Hello'
const binaryBlob = new Blob([binaryData], {
  type: 'application/octet-stream'
});