/** * Creates an HTML file input field on the page. This is usually used to upload files * to remote server. * File fields are usually created inside a form like this: * * ```javascript * @example({ framework: 'extjs' }) * Ext.create('Ext.form.Panel', { * fullscreen: true, * items: [ * { * xtype: 'fieldset', * title: 'My Uploader', * items: [ * { * xtype: 'filefield', * label: "MyPhoto:", * name: 'photo', * accept: 'image' * } * ] * } * ] * }); * ``` * ```javascript * @example({framework: 'ext-react', packages:['ext-react']}) * import React, { Component } from 'react'; * import { ExtContainer, ExtFormPanel, ExtFileField } from '@sencha/ext-react'; * * export default class MyExample extends Component { * render() { * return ( * <ExtContainer layout="center"> * <ExtFormPanel shadow> * <ExtFileField * label="Select a File" * name="photo" * accept="image" * /> * </ExtFormPanel> * </ExtContainer> * ) * } * } * ``` * ```javascript * @example({framework: 'ext-angular', packages:['ext-angular']}) * import { Component } from '@angular/core' * declare var Ext: any; * * @Component({ * selector: 'app-root-1', * styles: [``], * template: ` * <ExtContainer [layout]='"center"'> * <ExtFormPanel [shadow]> * <ExtFileField * [label]='"Select a File"' * [name]='"photo"' * [accept]='"image"' * > * </ExtFileField> * </ExtFormPanel> * </ExtContainer> * ` * }) * * export class AppComponent {} * ``` * ```html * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 }) * <ext-container layout="center"> * <ext-formpanel shadow="true"> * <ext-filefield * label="Select a File" * name="photo" * accept="image" * > * </ext-filefield> * </ext-formpanel> * </ext-container> * ``` * ```javascript * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 2 }) * import '@sencha/ext-web-components/dist/ext-container.component'; * import '@sencha/ext-web-components/dist/ext-formpanel.component'; * import '@sencha/ext-web-components/dist/ext-filefield.component'; * * export default class FileFieldComponent {} * ``` * */Ext.define('Ext.field.File', { extend: 'Ext.field.Text', xtype: 'filefield', mixins: [ 'Ext.mixin.ConfigProxy' ], /** * @private */ isFile: true, proxyConfig: { fileButton: [ /** * @cfg multiple * @inheritdoc Ext.field.FileButton#multiple */ 'multiple', /** * @cfg accept * @inheritdoc Ext.field.FileButton#accept */ 'accept', /** * @cfg capture * @inheritdoc Ext.field.FileButton#capture */ 'capture' ] }, readOnly: true, editable: false, focusable: false, inputTabIndex: -1, triggers: { file: { type: 'file' } }, classCls: Ext.baseCSSPrefix + 'filefield', captureLookup: { video: "camcorder", image: "camera", audio: "microphone" }, onChange: function(me, value, startValue) { me.fireEvent('change', this, value, startValue); }, applyName: function(name) { var multiple; if (name) { if (multiple && name.substr(-2, 2) !== "[]") { name += "[]"; } else if ((!multiple) && name.substr(-2, 2) === "[]") { name = name.substr(0, name.length - 2); } } return name; }, updateName: function(name) { var fileTrigger = this.getTriggers().file, inputElement = fileTrigger && fileTrigger.getComponent().buttonElement.dom; if (name && inputElement) { inputElement.name = name; } }, updateMultiple: function() { var name = this.getName(); if (!Ext.isEmpty(name)) { this.setName(name); } }, updateTriggers: function(triggers, oldTriggers) { this.callParent([triggers, oldTriggers]); this.getFileButton().on('change', 'onFileButtonChange', this); }, updateValue: function(value, oldValue) { this.callParent([value, oldValue]); this.getFileButton().setValue(value); }, getFileButton: function() { return this.getTriggers().file.getComponent(); }, /** * Resets the fileField values & input values * Along with fileButton dom files. */ reset: function() { var me = this, original = me.originalValue; if (original == null) { me.setInputValue(''); me._value = ''; } me.getFileButton().buttonElement.dom.value = ''; }, /** * Returns the field files. * @return {FileList} List of the files selected. */ getFiles: function() { return this.getFileButton().getFiles(); }, privates: { onFileButtonChange: function(fileButton, value) { var buttonElement = fileButton.buttonElement.dom, files = buttonElement.files, len, i, file; if (files) { value = []; for (i = 0, len = files.length; i < len; i++) { file = files[i]; value.push(file.name); } value = value.join(', '); } this.setValue(value); } }});