moxie.file.FileInput

Important! This page is auto-generated from the comments in the source files. All changes will be overwritten! If you are looking to contribute, modify the comment in the corresponding source file instead.

Module: moxie.file.FileInput

Table of Contents

• Constructor
• Properties
  • files
• Methods
  • init()
  • getOption()
  • setOption()
  • disable([state=true])
  • refresh()
  • destroy()
• Events
  • ready
  • refresh
  • change
  • mouseenter
  • mouseleave
  • mousedown
  • mouseup

Constructor

FileInput(options)

Provides a convenient way to create cross-browser file-picker. Generates file selection dialog on click, converts selected files to File objects, to be used in conjunction with Image, preloaded in memory with FileReader or uploaded to a server through XMLHttpRequest.

Arguments

• options Object|String|DOMElement
  If options is string or node, argument is considered as browse_button.
  • browse_button String|DOMElement
    DOM Element to turn into file picker.
  • [accept] Array
    Array of mime types to accept. By default accepts all.
  • [multiple=false] Boolean
    Enable selection of multiple files.
  • [directory=false] Boolean
    Turn file input into the folder input (cannot be both at the same time).
  • [container] String|DOMElement
    DOM Element to use as a container for file-picker. Defaults to parentNode for browse_button.
  • [required_caps] Object|String
    Set of required capabilities, that chosen runtime must support.

Example

	<div id="container">
		<a id="file-picker" href="javascript:;">Browse...</a>
	</div>

	<script>
		var fileInput = new moxie.file.FileInput({
			browse_button: 'file-picker', // or document.getElementById('file-picker')
			container: 'container',
			accept: [
				{title: "Image files", extensions: "jpg,gif,png"} // accept only images
			],
			multiple: true // allow multiple file selection
		});

		fileInput.onchange = function(e) {
			// do something to files array
			console.info(e.target.files); // or this.files or fileInput.files
		};

		fileInput.init(); // initialize
	</script>

Properties

files

Array of selected moxie.file.File objects

Methods

init()

Initializes the file-picker, connects it to runtime and dispatches event ready when done.

getOption()

Get current option value by its name

Arguments

setOption()

Sets a new value for the option specified by name

Arguments

disable([state=true])

Disables file-picker element, so that it doesn't react to mouse clicks.

Arguments

• [state=true] Boolean
  Disable component if - true, enable if - false

refresh()

Reposition and resize dialog trigger to match the position and size of browse_button element.

destroy()

Destroy component.

Events

ready

Dispatched when runtime is connected and file-picker is ready to be used.

Arguments

• event Object

refresh

Dispatched right after ready event, and whenever refresh() is invoked. Check corresponding documentation entry for more info.

Arguments

• event Object

change

Dispatched when selection of files in the dialog is complete.

Arguments

• event Object

mouseenter

Dispatched when mouse cursor enters file-picker area. Can be used to style element accordingly.

Arguments

• event Object

mouseleave

Dispatched when mouse cursor leaves file-picker area. Can be used to style element accordingly.

Arguments

• event Object

mousedown

Dispatched when functional mouse button is pressed on top of file-picker area.

Arguments

• event Object

mouseup

Dispatched when functional mouse button is released on top of file-picker area.

Arguments

• event Object