recursal/MDN huggingface dataset:
File: name property
===================

**Note:** This feature is available in Web Workers

 The **`name`** read-only property of the `File` interface returns the name of the file represented by a `File` object. For security
 reasons, the path is excluded from this property.

Value
-----

A string, containing the name of the file without path, such as "My Resume.rtf".

Examples
--------

### HTML


```html
<input type="file" id="filepicker" multiple />
<div>
  <p>List of selected files:</p>
  <ul id="output"></ul>
</div>
```

### JavaScript


```js
const output = document.getElementById("output");
const filepicker = document.getElementById("filepicker");

filepicker.addEventListener("change", (event) => {
  const files = event.target.files;
  output.textContent = "";

  for (const file of files) {
    const li = document.createElement("li");
    li.textContent = file.name;
    output.appendChild(li);
  }
});
```

### Result

Specifications
--------------

| Specification |
| --- |
| File API # dfn-name |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using files from web applications
File: File() constructor
========================

**Note:** This feature is available in Web Workers

 The **`File()`** constructor creates a new `File`
 object instance.

Syntax
------


```js
new File(fileBits, fileName)
new File(fileBits, fileName, options)
```

### Parameters

`fileBits`

 An iterable
 object such as an `Array`, having `ArrayBuffer`s,
 `TypedArray`s, `DataView`s, `Blob`s, strings,
 or a mix of any of such elements, that will be put inside the `File`.
 Note that strings here are encoded as UTF-8, unlike the usual JavaScript UTF-16 strings.


`fileName`

A string representing the file name or the path to the file.

`options` Optional

 An options object containing optional attributes for the file. Available options are
 as follows:


`type` Optional

 A string representing the MIME type of the
 content that will be put into the file. Defaults to a value of `""`.


`endings` Optional

 How to interpret newline characters (`\n`) within the contents, if
 the data is text. The default value, `transparent`, copies newline
 characters into the blob without changing them. To convert newlines to the host
 system's native convention, specify the value `native`.


`lastModified` Optional

 A number representing the number of milliseconds
 between the Unix time epoch and when the file was last modified. Defaults to a
 value of `Date.now()`.



Examples
--------


```js
const file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});
```

Specifications
--------------

| Specification |
| --- |
| File API # file-constructor |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `FileReader`
* `Blob`
File: webkitRelativePath property
=================================

**Note:** This feature is available in Web Workers

 The **`webkitRelativePath`** read-only property of the `File` interface
 contains a string which specifies the file's path relative to the
 directory selected by the user in an `<input>` element with its
 `webkitdirectory` attribute set.

Value
-----

 A string containing the path of the file relative to the ancestor
 directory the user selected.

Example
-------

 In this example, a directory picker is presented which lets the user choose one or more
 directories. When the `change` event occurs, a list of all files contained
 within the selected directory hierarchies is generated and displayed.

### HTML


```html
<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
<output id="output"></output>
```


```
output {
  display: block;
  white-space: pre-wrap;
}
```

### JavaScript


```js
const output = document.getElementById("output");
const filepicker = document.getElementById("filepicker");

filepicker.addEventListener("change", (event) => {
  const files = event.target.files;

  for (const file of files) {
    output.textContent += `${file.webkitRelativePath}\n`;
  }
});
```

### Result

Specifications
--------------

| Specification |
| --- |
| File and Directory Entries API # dom-file-webkitrelativepath |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* File and Directory Entries API
* `HTMLInputElement.webkitEntries`
* `HTMLInputElement.webkitdirectory`
File: lastModified property
===========================

**Note:** This feature is available in Web Workers

 The **`lastModified`** read-only property of the `File` interface provides the
 last modified date of the file as the number of milliseconds since the Unix
 epoch (January 1, 1970 at midnight). Files without a known last modified date return the
 current date.

Value
-----

A number that represents the number of milliseconds since the Unix epoch.

Examples
--------

The example below will loop through the files you choose, and print whether each file was modified within the past year.

### HTML


```html
<input type="file" id="filepicker" name="fileList" multiple />
<output id="output"></output>
```


```
output {
  display: block;
  white-space: pre-wrap;
}
```

### JavaScript


```js
const output = document.getElementById("output");
const filepicker = document.getElementById("filepicker");

filepicker.addEventListener("change", (event) => {
  const files = event.target.files;
  const now = new Date();
  output.textContent = "";

  for (const file of files) {
    const date = new Date(file.lastModified);
    // true if the file hasn't been modified for more than 1 year
    const stale = now.getTime() - file.lastModified > 31\_536\_000\_000;
    output.textContent += `${file.name} is ${
 stale ? "stale" : "fresh"
 } (${date}).\n`;
  }
});
```

### Result

### Dynamically created files

 If a File is created dynamically, the last modified time can be supplied in the
 `new File()` constructor function. If it is missing,
 `lastModified` inherits the current time from `Date.now()` at the
 moment the `File` object gets created.


```js
const fileWithDate = new File([], "file.bin", {
  lastModified: new Date(2017, 1, 1),
});
console.log(fileWithDate.lastModified); // returns 1485903600000

const fileWithoutDate = new File([], "file.bin");
console.log(fileWithoutDate.lastModified); // returns current time
```

Reduced time precision
----------------------

 To offer protection against timing attacks and fingerprinting, the precision of
 `someFile.lastModified` might get rounded depending on browser settings.
 In Firefox, the `privacy.reduceTimerPrecision` preference is enabled by
 default and defaults to 20us in Firefox 59; in 60 it will be 2ms.


```js
// reduced time precision (2ms) in Firefox 60
someFile.lastModified;
// 1519211809934
// 1519211810362
// 1519211811670
// …

// reduced time precision with `privacy.resistFingerprinting` enabled
someFile.lastModified;
// 1519129853500
// 1519129858900
// 1519129864400
// …
```


 In Firefox, if you enable `privacy.resistFingerprinting`, the
 precision will be 100ms or the value of
 `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, whichever
 is larger.

Specifications
--------------

| Specification |
| --- |
| File API # dfn-lastModified |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `File`
File: lastModifiedDate property
===============================

**Note:** This feature is available in Web Workers

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`lastModifiedDate`** read-only property of the `File` interface returns the last modified date of the file. Files without a known last modified date return the current date.

Value
-----

A `Date` object indicating the date and time at which the file was last modified.

Examples
--------


```js
// fileInput is a HTMLInputElement: <input type="file" multiple id="myfileinput">
const fileInput = document.getElementById("myfileinput");

for (const file of fileInput.files) {
  console.log(
    `${file.name} has a last modified date of ${file.lastModifiedDate}`,
  );
}
```

Reduced time precision
----------------------

To offer protection against timing attacks and fingerprinting, the precision of `someFile.lastModifiedDate.getTime()` might get rounded depending on browser settings.

In Firefox, the `privacy.reduceTimerPrecision` preference is enabled by default and defaults to 20us in Firefox 59; in 60 it will be 2ms.


```js
// reduced time precision (2ms) in Firefox 60
someFile.lastModifiedDate.getTime();
// 1519211809934
// 1519211810362
// 1519211811670
// …

// reduced time precision with `privacy.resistFingerprinting` enabled
someFile.lastModifiedDate.getTime();
// 1519129853500
// 1519129858900
// 1519129864400
// …
```


In Firefox, you can also enable `privacy.resistFingerprinting`, the precision will be 100ms or the value of `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, whichever is larger.

Specifications
--------------

*Though present in early draft of the File API spec, this property has been removed from it and is now non-standard. Use `File.lastModified` instead.*

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `File`
HTMLMetaElement: name property
==============================

 The **`HTMLMetaElement.name`** property is used in combination with `HTMLMetaElement.content` to define the name-value pairs for the metadata of a document.
 The `name` attribute defines the metadata name and the `content` attribute defines the value.

Value
-----

A string.

Examples
--------

### Reading the metadata name of a meta element

 The following example queries the first `<meta>` element in a document.
 The `name` value is logged to the console, showing that keywords have been specified for the document:


```js
// given <meta name="keywords" content="documentation, HTML, web technologies">
let meta = document.querySelector("meta");
console.log(meta.name);
// "keywords"
```

### Creating a meta element with `author` metadata

 The following example creates a new `<meta>` element with a `name` attribute set to `author`.
 The `content` attribute sets the author of the document and the element is appended to the document `<head>`:


```js
let meta = document.createElement("meta");
meta.name = "author";
meta.content = "Franz Kafka";
document.head.appendChild(meta);
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-meta-name |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<meta>`
* Possible values for the name attribute
HTMLMetaElement: content property
=================================

 The **`HTMLMetaElement.content`** property gets or sets the `content` attribute of pragma directives and named `<meta>` data in conjunction with `HTMLMetaElement.name` or `HTMLMetaElement.httpEquiv`.
 For more information, see the content attribute.

Value
-----

A string.

Examples
--------

### Reading meta element content

 The following example queries a `<meta>` element that contains a `name` attribute with the value of `keywords`.
 The `content` value is logged to the console to display the keywords of the document:


```js
// given <meta name="keywords" content="documentation, HTML, web">
let meta = document.querySelector("meta[name='keywords']");
console.log(meta.content);
// "documentation, HTML, web"
```

### Creating a meta element with content

 The following example creates a new `<meta>` element with a `name` attribute set to `description`.
 The `content` attribute sets a description of the document and is appended to the document `<head>`:


```js
let meta = document.createElement("meta");
meta.name = "description";
meta.content =
  "The <meta> element can be used to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value.";
document.head.appendChild(meta);
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-meta-content |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<meta>`
* `HTMLMetaElement.name`
* `HTMLMetaElement.httpEquiv`
* Learn: Metadata in HTML
HTMLMetaElement: scheme property
================================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

 The **`HTMLMetaElement.scheme`** property defines the scheme of the value in the `HTMLMetaElement.content` attribute.
 The `scheme` property was created to enable providing additional information to be used to interpret the value of the `content` property. The `scheme` property takes as its value a scheme format (i.e. `YYYY-MM-DD`) or scheme format name (i.e. `ISBN`), or a URI providing more information regarding the scheme format. The scheme defines the format of the value of the `content` attribute.
 The `scheme` content is interpreted as an extension of the element's `HTMLMetaElement.name` if a browser or user agent recognizes the scheme.

This property is deprecated and should not be used on new web pages.

Value
-----

A string.

Examples
--------

 The following example queries a `<meta>` element that contains a `name` attribute with the value of `identifier`.
 The `scheme` value is logged to the console to display the scheme of the metadata content:


```js
// given <meta name="identifier" content="1580081754" scheme="ISBN">
let meta = document.querySelector("meta[name='identifier']");
console.log(meta.scheme);
// "ISBN"
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-meta-scheme |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<meta>`
HTMLMetaElement: httpEquiv property
===================================

 The **`HTMLMetaElement.httpEquiv`** property gets or sets the pragma directive or an HTTP response header name for the `HTMLMetaElement.content` attribute.
 For more details on the possible values, see the http-equiv attribute.

Value
-----

A string.

Examples
--------

### Reading the `http-equiv` value of a meta element

 The following example queries a `<meta>` element with an `http-equiv` attribute.
 The `http-equiv` attribute is logged to the console showing a `refresh` pragma directive that instructs the browser to refresh the page after a number of seconds defined by the `content` attribute:


```js
// given <meta http-equiv="refresh" content="10" />
let meta = document.querySelector("meta[http-equiv]");
console.log(meta.httpEquiv);
// refresh
console.log(meta.content);
// 10
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-meta-httpequiv |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<meta>`
HTMLMetaElement: media property
===============================

The **`HTMLMetaElement.media`** property enables specifying the media for `theme-color` metadata.

 The `theme-color` property enables setting the color of the browser's toolbar or UI in browsers and operating systems that support this property.
 The `media` property enables setting different theme colors for different `media` values.

Value
-----

A string.

Examples
--------

### Setting the theme color for dark mode

 The following example creates a new `<meta>` element with a `name` attribute set to `theme-color`.
 The `content` attribute is set to `#3c790a`, the `media` attribute is set to `prefers-color-scheme: dark`, and the element is appended to the document `<head>`.
 When a user has specified a dark mode in their operating system, the `media` property can be used to set a different `theme-color`:


```js
var meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = "#3c790a";
meta.media = "(prefers-color-scheme: dark)";
document.head.appendChild(meta);
```

### Setting theme colors by device size

Most meta properties can be used only once. However, `theme-color` can be used multiple times if unique `media` values are provided.

 This example adds two meta elements with a `theme-color`; one for all devices and another for small screens.
 The order of matching the `media` query matters, so the more specific query should be added later in the document, as shown below:


```js
// Add a theme-color for all devices
meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = "#ffffff";
document.head.appendChild(meta);

// Add a theme-color for small devices
var meta = document.createElement("meta");
meta.name = "theme-color";
meta.media = "(max-width: 600px)";
meta.content = "#000000";
document.head.appendChild(meta);
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-meta-media |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<meta>`
* Possible values for media queries
XRInputSourceEvent: XRInputSourceEvent() constructor
====================================================

 The **`XRInputSourceEvent()`**
 constructor creates and returns a new `XRInputSourceEvent` object
 describing an event (state change) which has occurred on a WebXR user input device
 represented by an `XRInputSource`.

Syntax
------


```js
new XRInputSourceEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `select`, `selectend`, `selectstart`, `squeeze`, `squeezeend`, `squeezestart`.


`options`

An object that, *in addition of the properties defined in `Event()`*, can have the following properties:

`frame`

 An `XRFrame` object representing the event frame during which the event took place.
 This event is *not* associated with the animation process, and has no viewer information contained within it.


`inputSource`

An `XRInputSource` object representing the input device from which the event is being sent.


### Return value

 A new `XRInputSourceEvent` object representing the event described by the
 given `type` and `eventInitDict`.

Examples
--------

 This example creates a new `select` event and
 sends it to the `XRSession`.


```js
let event = new XRInputSourceEvent("select", {
  frame: eventFrame,
  inputSource: source,
});
if (event) {
  xrSession.dispatchEvent(event);
}
```

Specifications
--------------

| Specification |
| --- |
| WebXR Device API # dom-xrinputsourceevent-xrinputsourceevent |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XRInputSourceEvent: frame property
==================================

 The read-only `XRInputSourceEvent` property
 **`frame`** specifies an `XRFrame` object
 representing the event frame during which a WebXR user input occurred.
 This may thus be an event which occurred in the past rather than a current or impending
 event.

Value
-----

 An `XRFrame` indicating the event frame at which the user input event
 described by the object took place.

Usage notes
-----------

 The event frame does not correspond to a visual frame as is delivered to the frame
 rendering callback function (see Rendering and the WebXR frame rendering callback for details on the callback). Instead, the `XRFrame`
 specified by the `frame` property is a method to provide access to the
 `getPose()` method, which you can use to get the
 relative positions of the objects in the scene at the time the event occurred.

 However, since the event frame isn't an animation frame, there is no viewer pose
 available to represent the viewer's current point of view; the results of calling
 `getViewerPose()` will be an
 `XRViewerPose` with an empty `views`
 list.

Examples
--------

 This code shows a handler for the `selectstart` event which gets the target ray's pose from the frame, mapping the pose
 representing the ray (`event.inputSource.targetRaySpace`) to the overall
 reference space `myRefSpace`.

 Then, if the result isn't `null`, the target ray pose's transform is passed
 into a function called `myCheckAndHandleHit()` to see if the ray was pointing
 at anything when the select was triggered.


```js
xrSession.onselectstart = (event) => {
  let targetRayPose = event.frame.getPose(
    event.inputSource.targetRaySpace,
    myRefSpace,
  );
  if (targetRayPose) {
    checkAndHandleHit(targetRayPose.transform);
  }
};
```

Specifications
--------------

| Specification |
| --- |
| WebXR Device API # dom-xrinputsourceevent-frame |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XRInputSourceEvent: inputSource property
========================================

 The `XRInputSourceEvent` interface's read-only
 **`inputSource`** property specifies the
 `XRInputSource` which generated the input event. This information
 lets you handle the event appropriately given the particulars of the user input device
 being manipulated.

Value
-----

 An `XRInputSource` object identifying the source of the user input event.
 This event indicates an action the user has taken using a WebXR input controller, such
 as a hand controller, motion sensing device, or other input apparatus.

Examples
--------

 The snippet below shows a handler for the `select` event which looks specifically for events which happen on `gaze`
 input devices. The device type is identified by looking at the
 `XRInputSource` in `inputSource` and its
 `targetRayMode` property.


```js
xrSession.onselect = (event) => {
  let source = event.inputSource;

  if (source.targetRayMode === "gaze") {
    /\* handle selection using a gaze input \*/
  }
};
```

Specifications
--------------

| Specification |
| --- |
| WebXR Device API # dom-xrinputsourceevent-inputsource |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.