Flexberry Documentation
FlexberryFileComponent Class
addon/components/flexberry-file.js:18
Flexberry file component.
Usage sample:
Item Index
Methods
- _dataURLtoFile
- _isValidTypeFile
- _onRelatedModelPreSave
- _previewOptionsDidChange
- _subscribeOnRelatedModelPreSaveEvent
- _unsubscribeFromRelatedModelPresaveEvent
- _uploadDataDidChange
- _valueDidChange
- actions.addButtonClick
- actions.downloadButtonClick
- actions.removeButtonClick
- actions.uploadButtonClick
- actions.viewLoadedImage
- downloadFile
- getTargetObjectByCondition.
- initProperty
- removeFile
- showDownloadErrorModalDialog
- showErrorModalDialog
- showFileExtensionErrorModalDialog
- showUploadErrorModalDialog
- showUploadErrorModalDialog
- uploadFile
Properties
- _addButtonIsEnabled
- _addButtonIsVisible
- _canLoadPreview
- _downloadButtonIsEnabled
- _downloadButtonIsVisible
- _errorModalDialog
- _errorModalDialogCaption
- _errorModalDialogContent
- _errorPreviewCaption
- _fileInputId
- _fileName
- _fileSizeUnits
- _hasFile
- _initialValue
- _jsonInitialValue
- _jsonValue
- _previewDownloadIsInProgress
- _previewImageAsBase64String
- _removeButtonIsEnabled
- _removeButtonIsVisible
- _selectedFile
- _uploadButtonIsEnabled
- _uploadButtonIsVisible
- _uploadData
- _uploadDataCopy
- _uploadIsInProgress
- accept
- appConfig
- appConfigSettings
- appConfigSettingsPath
- base64FileExtension
- base64FileName
- base64Value
- buttonClass
- classNameBindings
- classNames
- componentName
- currentController
- dynamicProperties
- headers
- inputClass
- isDrag
- isValidTypeFileCustom
- maxUploadFileSize
- maxUploadFileSizeUnit
- openInNewWindowInsteadOfLoading
- placeholder
- previewSettings
- readonly
- readonlyAttr
- relatedModel
- required
- showDownloadButton
- showModalDialogOnUploadError
- showPreview
- showUploadButton
- uploadOnModelPreSave
- uploadUrl
- value
- viewImageAction
Methods
_dataURLtoFile
-
dataUrl -
fileName
Method converts base64 string to File
_isValidTypeFile
-
fileType -
accept
Defines valid of file type.
_onRelatedModelPreSave
-
e
Handles related model's 'preSave' event.
_previewOptionsDidChange
()
private
Preview options change handler.
_subscribeOnRelatedModelPreSaveEvent
()
private
Subscribes on related model's 'preSave' event.
_unsubscribeFromRelatedModelPresaveEvent
()
private
Unsubscribes from related model's 'preSave' event.
_uploadDataDidChange
()
private
Upload data change handler.
_valueDidChange
()
private
Value change handler.
actions.addButtonClick
()
public
Handles click on add button.
actions.downloadButtonClick
()
public
Handles click on download button.
actions.removeButtonClick
()
public
Handles click on remove button.
actions.uploadButtonClick
()
public
Handles click on upload button.
actions.viewLoadedImage
()
public
Handles click on selected image preview and sends action with data outside component in order to view selected image at modal window.
downloadFile
()
Downloads previously uploaded file.
getTargetObjectByCondition.
-
condition
Returns that 'targetObject' (from 'targetObject's hierarchy) which satisfies a given condition.
let controller = this.getTargetObjectByCondition((targetObject) => {
return targetObject instanceof Controller;
});
Parameters:
-
conditionFunctionCallback-function, which will be called for each 'targetObject' in 'targetObject's hierarchy, until callback return true for one of them.
Returns:
Target object which satisfies a given condition or null.
initProperty
-
options
Initializes component's property with recpect to following priority: 1 - template-defined parameters, 2 - applicaion configuration-defined parameters (JSON from ./config/environment by path defined in 'appConfigSettingsPath' property), 3 - component-defined defaults. Note! It is important to be declared as undefined for those component properties, which will be initialized through 'initProperty' call.
// ./config/environment.js.
module.exports = function(environment) {
var ENV = {
APP: {
components: {
myComponent: {
myComponentProperty: 'myComponentProperty config-defined default value',
}
}
}
};
return ENV;
};
// /components/my-component.js
import FlexberryBaseComponent from 'ember-flexberry/flexberry-base-component';
export default FlexberryBaseComponent.extend({
appConfigSettingsPath: 'APP.components.myComponent',
myComponentProperty: undefined,
init() {
this._super.apply(this, arguments);
this.initProperty({ propertyName: 'myComponentProperty', defaultValue: 'myComponentProperty default value' });
}
});
removeFile
()
Removes selected file.
showDownloadErrorModalDialog
-
fileName -
errorMessage
Shows errors if there were some during file download.
showErrorModalDialog
-
errorCaption -
errorContent
Shows error modal dialog.
Parameters:
Returns:
Error content.
showFileExtensionErrorModalDialog
-
fileName
Shows file extension errors if there were some.
Parameters:
-
fileNameStringAdded file name.
Returns:
Error content.
showUploadErrorModalDialog
-
fileName -
actualFileSize -
maxFileSize -
sizeUnit
Shows file size errors if there were some.
Parameters:
Returns:
Error content.
showUploadErrorModalDialog
-
fileName -
errorMessage
Shows errors if there were some during file upload.
Parameters:
Returns:
Error content.
uploadFile
()
Uploads selected file.
Properties
_errorModalDialog
JQueryObject
private
Selected jQuery object, containing HTML of error modal dialog.
Default: null
_errorModalDialogCaption
String
private
Caption to be displayed in error modal dialog. It will be displayed only if some error occurs.
Default: t('components.flexberry-file.error-dialog-caption')
_errorModalDialogContent
String
private
Content to be displayed in error modal dialog. It will be displayed only if some error occurs.
Default: t('components.flexberry-file.error-dialog-content')
_errorPreviewCaption
String
private
Caption to be displayed in loaded file table cell. It will be displayed only if preview can't be loaded.
Default: t('components.flexberry-file.error-preview-caption')
_fileName
String
private
File name. It is binded to component file name input, so every change to fileName will automatically change file name input value.
_initialValue
String
private
Copy of value created at initialization moment or after successful upload.
_jsonInitialValue
Object
private
Deserialized copy of value created at initialization moment or after successful upload.
_previewDownloadIsInProgress
Boolean
private
Flag: indicates whether file preview download is in progress now.
Default: false
_previewImageAsBase64String
String
private
Selected file content. It can be used as source for image tag in order to view preview.
Default: null
_uploadData
Object
private
Data from jQuery fileupload plugin (contains selected file).
Default: null
_uploadDataCopy
Object
private
Copy of data from jQuery fileupload plugin (contains selected file).
Default: null
_uploadIsInProgress
Boolean
private
Flag: indicates whether file upload is in progress now.
Default: false
accept
String
Available file extensions for upload. In MIME type format. See the documentation for more details.
Default: undefined
appConfigSettings
Object
Component settings object from application configuration (part of JSON from ./config/environment.js). Part of appConfig related to appConfigSettingsPath.
Default: null
appConfigSettingsPath
String
Path to component's settings in application configuration (JSON from ./config/environment.js).
Default: 'APP.components.flexberryFile'
base64FileExtension
String
Extension for base64 file. {base64FileName}.{base64FileExtension}
Default: null
classNames
String[]
Component's wrapping
Default: ['flexberry-file']
currentController
Controller
Current controller.
Default: null
dynamicProperties
Object
Component dynamic properties ({ componentPropertyName: value }). Used when component renders dynamically with ember {{component}} helper: {{component 'my-component' value=value dynamicProperties=myConponentProperties}}. In the end of component initialization its properties values will be replaced with values from this object.
Default: null
inputClass
String
Component's input additional CSS-class names. See Semantic UI inputs classes.
Default: ''
Example:
`handlebars
`maxUploadFileSize
Number
Maximum file size in bytes for uploading files. It should be greater then 0 and less or equal then APP.components.file.maxUploadFileSize from application config\environment. If null or undefined, then APP.components.file.maxUploadFileSize from application config\environment will be used.
openInNewWindowInsteadOfLoading
Boolean
Flag: download by clicking download or open file in new window.
Default: false
placeholder
String
Text to be displayed instead of file name, if file has not been selected.
Default: t('components.flexberry-file.placeholder')
readonlyAttr
String | Undefined
Readonly HTML attribute following to the readonly query param. According to the W3C standard, returns 'readonly' if readonly is true and undefined otherwise.
showModalDialogOnUploadError
Boolean
Flag: indicates whether to show modal dialog on upload errors or not.
Default: false
showPreview
Boolean
Flag: indicates whether to show preview element for images or not.
Default: false
uploadOnModelPreSave
Boolean
Flag: indicates whether to upload file on 'relatedModel' 'preSave' event.
Default: true
uploadUrl
String
File upload URL. If null or undefined, then APP.components.file.uploadUrl from application config\environment will be used.
value
String
Value of file component (contains serialized file metadata such as fileName, fileSize, etc.). It is binded to related model property, so every change to value will automatically change model property.
viewImageAction
String
Name of the action which will be send outside after click on selected image preview.
Default: 'flexberryFileViewImageAction'