aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--build.gradle9
-rw-r--r--dokka/kvision-dokka-helper.jarbin7640 -> 8085 bytes
-rw-r--r--npm.dependencies1
-rw-r--r--src/main/kotlin/pl/treksoft/kvision/KVManager.kt18
-rw-r--r--src/main/kotlin/pl/treksoft/kvision/form/Form.kt19
-rw-r--r--src/main/kotlin/pl/treksoft/kvision/form/FormControl.kt18
-rw-r--r--src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt19
-rw-r--r--src/main/kotlin/pl/treksoft/kvision/form/upload/Upload.kt304
-rw-r--r--src/main/kotlin/pl/treksoft/kvision/form/upload/UploadInput.kt270
-rw-r--r--src/main/kotlin/pl/treksoft/kvision/utils/Utils.kt22
-rw-r--r--src/test/kotlin/test/pl/treksoft/kvision/form/upload/UploadInputSpec.kt39
-rw-r--r--src/test/kotlin/test/pl/treksoft/kvision/form/upload/UploadSpec.kt38
-rw-r--r--webpack.config.d/jquery.js8
13 files changed, 759 insertions, 6 deletions
diff --git a/build.gradle b/build.gradle
index 469db3e0..d464ff92 100644
--- a/build.gradle
+++ b/build.gradle
@@ -2,16 +2,16 @@ buildscript {
ext.kotlin_version = '1.2.31'
ext.coroutines_version = '0.22.5'
ext.dokka_version = '0.9.16'
- ext.frontend_plugin_version = '0.0.30'
+ ext.frontend_plugin_version = '0.0.29'
ext.detekt_version = '1.0.0.RC6-4'
ext.production = (findProperty('prod') ?: 'false') == 'true'
ext.npmdeps = new File("npm.dependencies").getText()
repositories {
jcenter()
- maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' }
- maven { url "https://plugins.gradle.org/m2/" }
- maven { url 'https://bintray.com/kotlin/kotlin-eap/dokka' }
+ maven { url = 'https://dl.bintray.com/kotlin/kotlin-eap' }
+ maven { url = "https://plugins.gradle.org/m2/" }
+ maven { url = 'https://bintray.com/kotlin/kotlin-eap/dokka' }
}
dependencies {
@@ -70,6 +70,7 @@ kotlinFrontend {
dependency("uglifyjs-webpack-plugin")
dependency("file-loader")
dependency("url-loader")
+ dependency("expose-loader")
dependency("jquery", "3.2.1")
dependency("fecha", "2.3.2")
dependency("snabbdom", "0.7.1")
diff --git a/dokka/kvision-dokka-helper.jar b/dokka/kvision-dokka-helper.jar
index 7afd6de2..c038515c 100644
--- a/dokka/kvision-dokka-helper.jar
+++ b/dokka/kvision-dokka-helper.jar
Binary files differ
diff --git a/npm.dependencies b/npm.dependencies
index 841e6ac5..42efc32d 100644
--- a/npm.dependencies
+++ b/npm.dependencies
@@ -9,3 +9,4 @@ font-awesome-webpack 0.0.5-beta.2
awesome-bootstrap-checkbox 0.3.7
trix 0.11.1
element-resize-event 2.0.9
+bootstrap-fileinput 4.4.7
diff --git a/src/main/kotlin/pl/treksoft/kvision/KVManager.kt b/src/main/kotlin/pl/treksoft/kvision/KVManager.kt
index 121f0ab7..ee7b2d43 100644
--- a/src/main/kotlin/pl/treksoft/kvision/KVManager.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/KVManager.kt
@@ -44,7 +44,7 @@ external fun require(name: String): dynamic
/**
* Internal singleton object which initializes and configures KVision framework.
*/
-@Suppress("EmptyCatchBlock")
+@Suppress("EmptyCatchBlock", "TooGenericExceptionCaught")
internal object KVManager {
internal const val AJAX_REQUEST_DELAY = 300
internal const val KVNULL = "#kvnull"
@@ -118,6 +118,22 @@ internal object KVManager {
require("element-resize-event")
} catch (e: Throwable) {
}
+ private val bootstrapFileinputCss = try {
+ require("bootstrap-fileinput/css/fileinput.min.css")
+ } catch (e: Throwable) {
+ }
+ private val bootstrapFileinputCssFa = try {
+ require("bootstrap-fileinput/themes/explorer-fa/theme.min.css")
+ } catch (e: Throwable) {
+ }
+ private val bootstrapFileinput = try {
+ require("bootstrap-fileinput")
+ } catch (e: Throwable) {
+ }
+ private val bootstrapFileinputFa = try {
+ require("bootstrap-fileinput/themes/explorer-fa/theme.min.js")
+ } catch (e: Throwable) {
+ }
private val resizable = require("jquery-resizable-dom")
internal val fecha = require("fecha")
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/Form.kt b/src/main/kotlin/pl/treksoft/kvision/form/Form.kt
index 4ce21ec6..65161303 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/Form.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/Form.kt
@@ -21,6 +21,7 @@
*/
package pl.treksoft.kvision.form
+import org.w3c.files.File
import kotlin.js.Date
import kotlin.js.Json
import kotlin.reflect.KProperty1
@@ -42,6 +43,7 @@ internal data class FieldParams<in F : FormControl>(
* @param panel optional instance of [FormPanel]
* @param modelFactory function transforming a Map<String, Any?> to a data model of class K
*/
+@Suppress("TooManyFunctions")
class Form<K>(private val panel: FormPanel<K>? = null, private val modelFactory: (Map<String, Any?>) -> K) {
internal val fields: MutableMap<String, FormControl> = mutableMapOf()
@@ -128,6 +130,23 @@ class Form<K>(private val panel: FormPanel<K>? = null, private val modelFactory:
}
/**
+ * Adds a files control to the form.
+ * @param key key identifier of the control
+ * @param control the files form control
+ * @param required determines if the control is required
+ * @param validatorMessage optional function returning validation message
+ * @param validator optional validation function
+ * @return current form
+ */
+ fun <C : FilesFormControl> add(
+ key: KProperty1<K, List<File>?>, control: C, required: Boolean = false,
+ validatorMessage: ((C) -> String?)? = null,
+ validator: ((C) -> Boolean?)? = null
+ ): Form<K> {
+ return addInternal(key, control, required, validatorMessage, validator)
+ }
+
+ /**
* Removes a control from the form.
* @param key key identifier of the control
* @return current form
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/FormControl.kt b/src/main/kotlin/pl/treksoft/kvision/form/FormControl.kt
index 091f4162..be27ac7a 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/FormControl.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/FormControl.kt
@@ -21,6 +21,7 @@
*/
package pl.treksoft.kvision.form
+import org.w3c.files.File
import pl.treksoft.kvision.core.Component
import kotlin.js.Date
@@ -202,3 +203,20 @@ interface DateFormControl : FormControl {
override fun getValueAsString(): String? = value?.toString()
}
+
+/**
+ * Base interface of a form control with a list of files value.
+ */
+interface FilesFormControl : FormControl {
+ /**
+ * List of files value.
+ */
+ var value: List<File>?
+
+ override fun getValue(): List<File>? = value
+ override fun setValue(v: Any?) {
+ if (v == null) value = null
+ }
+
+ override fun getValueAsString(): String? = value?.joinToString { it.name }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt b/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
index 2a274684..3eb2a0ca 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
@@ -22,6 +22,7 @@
package pl.treksoft.kvision.form
import com.github.snabbdom.VNode
+import org.w3c.files.File
import pl.treksoft.kvision.core.Container
import pl.treksoft.kvision.core.StringBoolPair
import pl.treksoft.kvision.core.StringPair
@@ -81,6 +82,7 @@ enum class FormTarget(internal val target: String) {
* @param classes set of CSS class names
* @param modelFactory function transforming a Map<String, Any?> to a data model of class K
*/
+@Suppress("TooManyFunctions")
open class FormPanel<K>(
method: FormMethod? = null, action: String? = null, enctype: FormEnctype? = null,
private val type: FormType? = null, classes: Set<String> = setOf(),
@@ -288,6 +290,23 @@ open class FormPanel<K>(
}
/**
+ * Adds a files control to the form panel.
+ * @param key key identifier of the control
+ * @param control the files form control
+ * @param required determines if the control is required
+ * @param validatorMessage optional function returning validation message
+ * @param validator optional validation function
+ * @return current form panel
+ */
+ open fun <C : FilesFormControl> add(
+ key: KProperty1<K, List<File>?>, control: C, required: Boolean = false,
+ validatorMessage: ((C) -> String?)? = null,
+ validator: ((C) -> Boolean?)? = null
+ ): FormPanel<K> {
+ return addInternal(key, control, required, validatorMessage, validator)
+ }
+
+ /**
* Removes a control from the form panel.
* @param key key identifier of the control
* @return current form panel
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/upload/Upload.kt b/src/main/kotlin/pl/treksoft/kvision/form/upload/Upload.kt
new file mode 100644
index 00000000..e6b397eb
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/form/upload/Upload.kt
@@ -0,0 +1,304 @@
+/*
+ * Copyright (c) 2018. Robert Jaros
+ */
+package pl.treksoft.kvision.form.upload
+
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.core.StringBoolPair
+import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.form.FieldLabel
+import pl.treksoft.kvision.form.FilesFormControl
+import pl.treksoft.kvision.form.HelpBlock
+import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.utils.SnOn
+
+/**
+ * The form field file upload component.
+ *
+ * @constructor
+ * @param uploadUrl the optional URL for the upload processing action
+ * @param multiple determines if multiple file upload is supported
+ * @param label label text bound to the input element
+ * @param rich determines if [label] can contain HTML code
+ */
+@Suppress("TooManyFunctions")
+open class Upload(
+ uploadUrl: String? = null, multiple: Boolean = false, label: String? = null,
+ rich: Boolean = false
+) : SimplePanel(setOf("form-group")), FilesFormControl {
+
+ /**
+ * File input value.
+ */
+ override var value
+ get() = input.value
+ set(value) {
+ input.value = value
+ }
+ /**
+ * The optional URL for the upload processing action.
+ * If not set the upload button action will default to form submission.
+ */
+ var uploadUrl
+ get() = input.uploadUrl
+ set(value) {
+ input.uploadUrl = value
+ }
+ /**
+ * Determines if multiple file upload is supported.
+ */
+ var multiple
+ get() = input.multiple
+ set(value) {
+ input.multiple = value
+ }
+ /**
+ * The extra data that will be passed as data to the AJAX server call via POST.
+ */
+ var uploadExtraData
+ get() = input.uploadExtraData
+ set(value) {
+ input.uploadExtraData = value
+ }
+ /**
+ * Determines if the explorer theme is used.
+ */
+ var explorerTheme
+ get() = input.explorerTheme
+ set(value) {
+ input.explorerTheme = value
+ }
+ /**
+ * Determines if the input selection is required.
+ */
+ var required
+ get() = input.required
+ set(value) {
+ input.required = value
+ }
+ /**
+ * Determines if the caption is shown.
+ */
+ var showCaption
+ get() = input.showCaption
+ set(value) {
+ input.showCaption = value
+ }
+ /**
+ * Determines if the preview is shown.
+ */
+ var showPreview
+ get() = input.showPreview
+ set(value) {
+ input.showPreview = value
+ }
+ /**
+ * Determines if the remove button is shown.
+ */
+ var showRemove
+ get() = input.showRemove
+ set(value) {
+ input.showRemove = value
+ }
+ /**
+ * Determines if the upload button is shown.
+ */
+ var showUpload
+ get() = input.showUpload
+ set(value) {
+ input.showUpload = value
+ }
+ /**
+ * Determines if the cancel button is shown.
+ */
+ var showCancel
+ get() = input.showCancel
+ set(value) {
+ input.showCancel = value
+ }
+ /**
+ * Determines if the file browse button is shown.
+ */
+ var showBrowse
+ get() = input.showBrowse
+ set(value) {
+ input.showBrowse = value
+ }
+ /**
+ * Determines if the click on the preview zone opens file browse window.
+ */
+ var browseOnZoneClick
+ get() = input.browseOnZoneClick
+ set(value) {
+ input.browseOnZoneClick = value
+ }
+ /**
+ * Determines if the iconic preview is prefered.
+ */
+ var preferIconicPreview
+ get() = input.preferIconicPreview
+ set(value) {
+ input.preferIconicPreview = value
+ }
+ /**
+ * Allowed file types.
+ */
+ var allowedFileTypes
+ get() = input.allowedFileTypes
+ set(value) {
+ input.allowedFileTypes = value
+ }
+ /**
+ * Allowed file extensions.
+ */
+ var allowedFileExtensions
+ get() = input.allowedFileExtensions
+ set(value) {
+ input.allowedFileExtensions = value
+ }
+ /**
+ * Determines if Drag&Drop zone is enabled.
+ */
+ var dropZoneEnabled
+ get() = input.dropZoneEnabled
+ set(value) {
+ input.dropZoneEnabled = value
+ }
+ /**
+ * The label text bound to the spinner input element.
+ */
+ var label
+ get() = flabel.content
+ set(value) {
+ flabel.content = value
+ }
+ /**
+ * Determines if [label] can contain HTML code.
+ */
+ var rich
+ get() = flabel.rich
+ set(value) {
+ flabel.rich = value
+ }
+
+ protected val idc = "kv_form_upload_$counter"
+ final override val input: UploadInput = UploadInput(uploadUrl, multiple)
+ .apply {
+ this.id = idc
+ this.name = name
+ }
+ final override val flabel: FieldLabel = FieldLabel(idc, label, rich)
+ final override val validationInfo: HelpBlock = HelpBlock().apply { visible = false }
+
+ init {
+ @Suppress("LeakingThis")
+ input.eventTarget = this
+ this.addInternal(flabel)
+ this.addInternal(input)
+ this.addInternal(validationInfo)
+ counter++
+ }
+
+ override fun getSnClass(): List<StringBoolPair> {
+ val cl = super.getSnClass().toMutableList()
+ if (validatorError != null) {
+ cl.add("has-error" to true)
+ }
+ return cl
+ }
+
+ @Suppress("UNCHECKED_CAST")
+ override fun <T : Widget> setEventListener(block: SnOn<T>.() -> Unit): Widget {
+ input.setEventListener(block)
+ return this
+ }
+
+ override fun setEventListener(block: SnOn<Widget>.() -> Unit): Widget {
+ input.setEventListener(block)
+ return this
+ }
+
+ override fun removeEventListeners(): Widget {
+ input.removeEventListeners()
+ return this
+ }
+
+ override fun getValueAsString(): String? {
+ return input.getValueAsString()
+ }
+
+ /**
+ * Resets the file input control.
+ */
+ open fun resetInput() {
+ input.resetInput()
+ }
+
+ /**
+ * Clears the file input control (including the native input).
+ */
+ open fun clearInput() {
+ input.clearInput()
+ }
+
+ /**
+ * Trigger ajax upload (only for ajax mode).
+ */
+ open fun upload() {
+ input.upload()
+ }
+
+ /**
+ * Cancel an ongoing ajax upload (only for ajax mode).
+ */
+ open fun cancel() {
+ input.cancel()
+ }
+
+ /**
+ * Locks the file input (disabling all buttons except a cancel button).
+ */
+ open fun lock() {
+ input.lock()
+ }
+
+ /**
+ * Unlocks the file input.
+ */
+ open fun unlock() {
+ input.unlock()
+ }
+
+ override fun focus() {
+ input.focus()
+ }
+
+ override fun blur() {
+ input.blur()
+ }
+
+ companion object {
+ internal var counter = 0
+
+ /**
+ * DSL builder extension function.
+ *
+ * It takes the same parameters as the constructor of the built component.
+ */
+ fun Container.upload(
+ uploadUrl: String? = null,
+ multiple: Boolean = false,
+ label: String? = null,
+ rich: Boolean = false,
+ init: (Upload.() -> Unit)? = null
+ ): Upload {
+ val upload = Upload(uploadUrl, multiple, label, rich).apply {
+ init?.invoke(
+ this
+ )
+ }
+ this.add(upload)
+ return upload
+ }
+ }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/upload/UploadInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/upload/UploadInput.kt
new file mode 100644
index 00000000..b0c07c3e
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/form/upload/UploadInput.kt
@@ -0,0 +1,270 @@
+/*
+ * Copyright (c) 2018. Robert Jaros
+ */
+package pl.treksoft.kvision.form.upload
+
+import com.github.snabbdom.VNode
+import org.w3c.files.File
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.core.StringBoolPair
+import pl.treksoft.kvision.core.StringPair
+import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.form.FormInput
+import pl.treksoft.kvision.form.InputSize
+import pl.treksoft.kvision.utils.obj
+
+/**
+ * The file upload component.
+ *
+ * @constructor
+ * @param uploadUrl the optional URL for the upload processing action
+ * @param multiple determines if multiple file upload is supported
+ * @param classes a set of CSS class names
+ */
+@Suppress("TooManyFunctions")
+open class UploadInput(uploadUrl: String? = null, multiple: Boolean = false, classes: Set<String> = setOf()) :
+ Widget(classes + "form-control"), FormInput {
+
+ /**
+ * File input value.
+ */
+ var value: List<File>?
+ get() = getValue()
+ set(value) {
+ if (value == null) resetInput()
+ }
+
+ /**
+ * The optional URL for the upload processing action.
+ * If not set the upload button action will default to form submission.
+ */
+ var uploadUrl: String? by refreshOnUpdate(uploadUrl, { refreshUploadInput() })
+ /**
+ * Determines if multiple file upload is supported.
+ */
+ var multiple: Boolean by refreshOnUpdate(multiple, { refresh(); refreshUploadInput() })
+ /**
+ * The extra data that will be passed as data to the AJAX server call via POST.
+ */
+ var uploadExtraData: ((String, Int) -> dynamic)? by refreshOnUpdate({ refreshUploadInput() })
+ /**
+ * Determines if the explorer theme is used.
+ */
+ var explorerTheme: Boolean by refreshOnUpdate(false, { refreshUploadInput() })
+ /**
+ * Determines if the input selection is required.
+ */
+ var required: Boolean by refreshOnUpdate(false, { refreshUploadInput() })
+ /**
+ * Determines if the caption is shown.
+ */
+ var showCaption: Boolean by refreshOnUpdate(true, { refreshUploadInput() })
+ /**
+ * Determines if the preview is shown.
+ */
+ var showPreview: Boolean by refreshOnUpdate(true, { refreshUploadInput() })
+ /**
+ * Determines if the remove button is shown.
+ */
+ var showRemove: Boolean by refreshOnUpdate(true, { refreshUploadInput() })
+ /**
+ * Determines if the upload button is shown.
+ */
+ var showUpload: Boolean by refreshOnUpdate(true, { refreshUploadInput() })
+ /**
+ * Determines if the cancel button is shown.
+ */
+ var showCancel: Boolean by refreshOnUpdate(true, { refreshUploadInput() })
+ /**
+ * Determines if the file browse button is shown.
+ */
+ var showBrowse: Boolean by refreshOnUpdate(true, { refreshUploadInput() })
+ /**
+ * Determines if the click on the preview zone opens file browse window.
+ */
+ var browseOnZoneClick: Boolean by refreshOnUpdate(true, { refreshUploadInput() })
+ /**
+ * Determines if the iconic preview is prefered.
+ */
+ var preferIconicPreview: Boolean by refreshOnUpdate(false, { refreshUploadInput() })
+ /**
+ * Allowed file types.
+ */
+ var allowedFileTypes: Set<String>? by refreshOnUpdate({ refreshUploadInput() })
+ /**
+ * Allowed file extensions.
+ */
+ var allowedFileExtensions: Set<String>? by refreshOnUpdate({ refreshUploadInput() })
+ /**
+ * Determines if Drag&Drop zone is enabled.
+ */
+ var dropZoneEnabled: Boolean by refreshOnUpdate(true, { refreshUploadInput() })
+ /**
+ * The name attribute of the generated HTML input element.
+ */
+ override var name: String? by refreshOnUpdate()
+ /**
+ * Determines if the field is disabled.
+ */
+ override var disabled by refreshOnUpdate(false, { refresh(); refreshUploadInput() })
+ /**
+ * The size of the input (currently not working)
+ */
+ override var size: InputSize? by refreshOnUpdate()
+
+ override fun render(): VNode {
+ return render("input")
+ }
+
+ override fun getSnClass(): List<StringBoolPair> {
+ val cl = super.getSnClass().toMutableList()
+ size?.let {
+ cl.add(it.className to true)
+ }
+ return cl
+ }
+
+ override fun getSnAttrs(): List<StringPair> {
+ val sn = super.getSnAttrs().toMutableList()
+ sn.add("type" to "file")
+ name?.let {
+ sn.add("name" to it)
+ }
+ if (multiple) {
+ sn.add("multiple" to "true")
+ }
+ if (disabled) {
+ sn.add("disabled" to "disabled")
+ }
+ return sn
+ }
+
+ private fun getValue(): List<File>? {
+ val v = getFiles()
+ return if (v.isNotEmpty()) v else null
+ }
+
+ override fun afterInsert(node: VNode) {
+ getElementJQueryD()?.fileinput(getSettingsObj())
+ }
+
+ override fun afterDestroy() {
+ getElementJQueryD()?.fileinput("destroy")
+ }
+
+ private fun refreshUploadInput() {
+ getElementJQueryD()?.fileinput("refresh", getSettingsObj())
+ }
+
+ /**
+ * Resets the file input control.
+ */
+ open fun resetInput() {
+ getElementJQueryD()?.fileinput("reset")
+ }
+
+ /**
+ * Clears the file input control (including the native input).
+ */
+ open fun clearInput() {
+ getElementJQueryD()?.fileinput("clear")
+ }
+
+ /**
+ * Trigger ajax upload (only for ajax mode).
+ */
+ open fun upload() {
+ getElementJQueryD()?.fileinput("upload")
+ }
+
+ /**
+ * Cancel an ongoing ajax upload (only for ajax mode).
+ */
+ open fun cancel() {
+ getElementJQueryD()?.fileinput("cancel")
+ }
+
+ /**
+ * Locks the file input (disabling all buttons except a cancel button).
+ */
+ open fun lock() {
+ getElementJQueryD()?.fileinput("lock")
+ }
+
+ /**
+ * Unlocks the file input.
+ */
+ open fun unlock() {
+ getElementJQueryD()?.fileinput("unlock")
+ }
+
+ private fun getFiles(): List<File> {
+ return (getElementJQueryD()?.fileinput("getFileStack") as Array<File>).toList()
+ }
+
+ /**
+ * Returns the value of the file input control as a String.
+ * @return value as a String
+ */
+ fun getValueAsString(): String? {
+ return value?.joinToString { it.name }
+ }
+
+ /**
+ * Makes the input element focused.
+ */
+ open fun focus() {
+ getElementJQuery()?.focus()
+ }
+
+ /**
+ * Makes the input element blur.
+ */
+ open fun blur() {
+ getElementJQuery()?.blur()
+ }
+
+ private fun getSettingsObj(): dynamic {
+ return obj {
+ this.uploadUrl = uploadUrl
+ this.uploadExtraData = uploadExtraData ?: undefined
+ this.theme = if (explorerTheme) "explorer-fa" else null
+ this.required = required
+ this.showCaption = showCaption
+ this.showPreview = showPreview
+ this.showRemove = showRemove
+ this.showUpload = showUpload
+ this.showCancel = showCancel
+ this.showBrowse = showBrowse
+ this.browseOnZoneClick = browseOnZoneClick
+ this.preferIconicPreview = preferIconicPreview
+ this.allowedFileTypes = allowedFileTypes?.toTypedArray()
+ this.allowedFileExtensions = allowedFileExtensions?.toTypedArray()
+ this.dropZoneEnabled = dropZoneEnabled
+ }
+ }
+
+ companion object {
+ internal var counter = 0
+
+ /**
+ * DSL builder extension function.
+ *
+ * It takes the same parameters as the constructor of the built component.
+ */
+ fun Container.uploadInput(
+ uploadUrl: String? = null,
+ multiple: Boolean = false,
+ classes: Set<String> = setOf(),
+ init: (UploadInput.() -> Unit)? = null
+ ): UploadInput {
+ val uploadInput = UploadInput(uploadUrl, multiple, classes).apply {
+ init?.invoke(
+ this
+ )
+ }
+ this.add(uploadInput)
+ return uploadInput
+ }
+ }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/utils/Utils.kt b/src/main/kotlin/pl/treksoft/kvision/utils/Utils.kt
index d638f79e..ba9467c3 100644
--- a/src/main/kotlin/pl/treksoft/kvision/utils/Utils.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/utils/Utils.kt
@@ -23,6 +23,9 @@
package pl.treksoft.kvision.utils
+import kotlinx.coroutines.experimental.suspendCancellableCoroutine
+import org.w3c.files.File
+import org.w3c.files.FileReader
import pl.treksoft.kvision.KVManager
import pl.treksoft.kvision.core.CssSize
import pl.treksoft.kvision.core.UNIT
@@ -96,7 +99,7 @@ val Int.mm: CssSize
/**
* Extension property to convert Int to CSS in units.
*/
-@Suppress("FunctionNaming")
+@Suppress("TopLevelPropertyNaming")
val Int.`in`: CssSize
get() {
return Pair(this, UNIT.`in`)
@@ -204,3 +207,20 @@ fun Date.toStringF(format: String = "YYYY-MM-DD HH:mm:ss"): String {
* @return true if the current browser is IE11
*/
fun isIE11(): Boolean = window.navigator.userAgent.matches("Trident\\/7\\.")
+
+/**
+ * Suspending extension function to get file content.
+ * @return file content
+ */
+@Suppress("EXPERIMENTAL_FEATURE_WARNING")
+suspend fun File.getContent() = suspendCancellableCoroutine<String> { cont ->
+ val reader = FileReader()
+ reader.onload = {
+ @Suppress("UnsafeCastFromDynamic")
+ cont.resume(reader.result)
+ }
+ reader.onerror = { e ->
+ cont.resumeWithException(Exception(e.type))
+ }
+ reader.readAsDataURL(this@getContent)
+}
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/upload/UploadInputSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/upload/UploadInputSpec.kt
new file mode 100644
index 00000000..90d5e058
--- /dev/null
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/upload/UploadInputSpec.kt
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2018. Robert Jaros
+ */
+package test.pl.treksoft.kvision.form.upload
+
+import pl.treksoft.jquery.jQuery
+import pl.treksoft.kvision.form.upload.UploadInput
+import pl.treksoft.kvision.panel.Root
+import test.pl.treksoft.kvision.DomSpec
+import kotlin.browser.document
+import kotlin.test.Test
+
+class UploadInputSpec : DomSpec {
+
+ @Test
+ fun render() {
+ run {
+ val root = Root("test", true)
+ val upi = UploadInput(multiple = true).apply {
+ id = "idti"
+ }
+ root.add(upi)
+ val content = document.getElementById("test")?.let { jQuery(it).find("input.form-control")[0]?.outerHTML }
+ assertEqualsHtml(
+ "<input class=\"form-control\" id=\"idti\" type=\"file\" multiple=\"true\">",
+ content,
+ "Should render correct file input control for multiple files"
+ )
+ upi.multiple = false
+ val content2 = document.getElementById("test")?.let { jQuery(it).find("input.form-control")[0]?.outerHTML }
+ assertEqualsHtml(
+ "<input class=\"form-control\" id=\"idti\" type=\"file\">",
+ content2,
+ "Should render correct file input control for single file"
+ )
+ }
+ }
+
+}
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/upload/UploadSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/upload/UploadSpec.kt
new file mode 100644
index 00000000..d4553d1f
--- /dev/null
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/upload/UploadSpec.kt
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2018. Robert Jaros
+ */
+package test.pl.treksoft.kvision.form.upload
+
+import pl.treksoft.jquery.jQuery
+import pl.treksoft.kvision.form.upload.Upload
+import pl.treksoft.kvision.panel.Root
+import test.pl.treksoft.kvision.DomSpec
+import kotlin.browser.document
+import kotlin.test.Test
+
+class UploadSpec : DomSpec {
+
+ @Test
+ fun render() {
+ run {
+ val root = Root("test", true)
+ val upi = Upload(multiple = true)
+ val id = upi.input.id
+ root.add(upi)
+ val content = document.getElementById("test")?.let { jQuery(it).find("input.form-control")[0]?.outerHTML }
+ assertEqualsHtml(
+ "<input class=\"form-control\" id=\"$id\" type=\"file\" multiple=\"true\">",
+ content,
+ "Should render correct file input control for multiple files"
+ )
+ upi.multiple = false
+ val content2 = document.getElementById("test")?.let { jQuery(it).find("input.form-control")[0]?.outerHTML }
+ assertEqualsHtml(
+ "<input class=\"form-control\" id=\"$id\" type=\"file\">",
+ content2,
+ "Should render correct file input control for single file"
+ )
+ }
+ }
+
+}
diff --git a/webpack.config.d/jquery.js b/webpack.config.d/jquery.js
index 40522595..8c942e79 100644
--- a/webpack.config.d/jquery.js
+++ b/webpack.config.d/jquery.js
@@ -2,3 +2,11 @@ config.plugins.push(new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}));
+
+config.module.rules.push({
+ test: require.resolve('jquery'),
+ use: [{
+ loader: 'expose-loader',
+ options: 'jQuery'
+ }]
+})