Skip to main content

uploadFile(file, params)

Sends a binary file to the server via XMLHttpRequest. Supports progress tracking, abort handling, and both File objects and FileEntry (filesystem API).


When to Use

Use uploadFile when uploading a file binary directly to a backend service endpoint. It is the underlying transport used by the upload pipeline — called automatically when a widget processes files from drag-and-drop or file picker events.


Signature

uploadFile(file, params);
ParamTypeDescription
fileFile or FileEntryThe file to upload
paramsObjectUpload options — service name, metadata, and any extra fields

How It Works

uploadFile(file, params)

├── Create XMLHttpRequest
├── Bind widget event hooks (onAbort, onLoad, onUploadEnd, onUploadProgress, ...)
├── Resolve service URL
│ → params.service or default "media.upload"
│ → full URL: bootstrap().svc + service

├── Build metadata header
│ → { filename, mimetype, filesize, socket_id, ...params }
│ → JSON-stringified into "x-param-xia-data" header
│ → Content-Type: "application/octet-stream"

├── Auth headers injected via makeHeaders()

└── Send the file body
→ file.file(cb) → FileEntry → cb(f) → xhr.send(f)
→ plain File → xhr.send(file)
→ on send error → onUploadError({ error, file, params })

Metadata Sent Per Request

File metadata is not sent in the body — it is encoded as a JSON string in the x-param-xia-data header:

FieldSource
filenameencodeURI(file.name)
mimetypefile.type
filesizefile.size
socket_idthis.get(socket_id) or Visitor.get(socket_id)
...paramsAny extra fields passed in params

Widget Event Hooks

uploadFile binds widget methods as XHR event handlers — if the method exists on this, it is attached automatically:

Widget methodXHR eventWhen it fires
onAbortxhr.upload.onabortUpload was aborted
onReadystatechangexhr.upload.onreadystatechangeReady state changes on upload
onUploadErrorxhr.upload.onerrorNetwork or upload error
onLoadxhr.upload.onloadUpload transfer completed
onUploadEndxhr.upload.onloadendUpload ended (success or failure)
onUploadProgressxhr.upload.onprogressProgress event — { loaded, total }

The response itself (readystatechange on the main xhr) is handled by the internal onReadyStateChange function:

Server statusBehavior
200Calls this.onUploadResponse(data) if defined
0Silently ignored (aborted or not started)
OtherCalls this.onUploadError(this.pendingItem) if defined

Service Resolution

By default, files are uploaded to media.upload. Pass a custom service in params to override:

// Default — uploads to media.upload
uploadFile(file, { hub_id, pid });

// Custom service
uploadFile(file, { service: "my_module.upload", hub_id, pid });

params.service is removed from the metadata header before sending — it is only used to build the URL.


Return Value

Returns the XMLHttpRequest instance. Use it to call .abort() if needed:

const xhr = uploadFile(file, params);

// Cancel the upload later
xhr.abort();

Quick Reference

BehaviorDetail
HTTP methodPOST
File bodySent as binary via xhr.send(file)
MetadataEncoded in x-param-xia-data header
Auth headersAuto-injected via makeHeaders
Default servicemedia.upload
FileEntry support✅ via file.file(cb)
ReturnsXMLHttpRequest instance