gd-bs 5.8.6 → 5.8.9

package/index.html

@@ -978,10 +978,11 @@
                 id: "offcanvas-demo",
                 title: "Offcanvas Demo",
                 body: "<h5>Hello Canvas</h5><input />",
-                size: 5,
-                type: 3,
+                size: 7,
+                type: 2,
                 options: {
-                    backdrop: true
+                    autoClose: false,
+                    backdrop: false
                 }
             });
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gd-bs",
-    "version": "5.8.6",
+    "version": "5.8.9",
     "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
     "main": "build/index.js",
     "typings": "src/index.d.ts",

package/src/components/form/control.ts

@@ -501,6 +501,12 @@ export class FormControl implements IFormControl {
 
         // See if this is a textbox
         if (this._tb) {
+            // See if this is a file
+            if (this._props.type == FormControlTypes.File) {
+                // Return the file information
+                return this._tb.getFileInfo();
+            }
+
             // Return the value
             return this._tb.getValue();
         }

package/src/components/inputGroup/index.ts

@@ -1,4 +1,4 @@
-import { IInputGroup, IInputGroupProps } from "./types";
+import { IInputGroup, IInputGroupFileValue, IInputGroupProps } from "./types";
 import { Base } from "../base";
 import { Button } from "../button";
 import { HTML } from "./templates";
@@ -22,6 +22,7 @@ export enum InputGroupTypes {
  * @param props The input group properties.
  */
 class _InputGroup extends Base<IInputGroupProps> implements IInputGroup {
+    private _fileValue: IInputGroupFileValue = null;
     private _initFl: boolean = false;
 
     // Constructor
@@ -57,28 +58,10 @@ class _InputGroup extends Base<IInputGroupProps> implements IInputGroup {
             if (label) {
                 this.props.id ? label.setAttribute("for", this.props.id) : null;
 
-                // See if this is a file
-                if (this.props.type == InputGroupTypes.File) {
-                    // Set the class
-                    label.classList.add("form-file-label");
-
-                    // Set the text
-                    let spanText = document.createElement("span");
-                    spanText.classList.add("form-file-text");
-                    spanText.innerHTML = this.props.label || "Choose a file...";
-                    label.appendChild(spanText);
-
-                    // Set the button
-                    let spanButton = document.createElement("span");
-                    spanButton.classList.add("form-file-button");
-                    spanButton.innerHTML = "Browse";
-                    label.appendChild(spanButton);
-                } else {
-                    // Set the label if it exists
-                    if (this.props.label) { label.innerHTML = this.props.label; }
-                    // Else, remove it
-                    else { this.el.removeChild(label); }
-                }
+                // Set the label if it exists
+                if (this.props.label) { label.innerHTML = this.props.label; }
+                // Else, remove it
+                else { this.el.removeChild(label); }
             }
 
             // See if the label exists
@@ -186,6 +169,35 @@ class _InputGroup extends Base<IInputGroupProps> implements IInputGroup {
                     }, 1);
                 });
             }
+
+            // See if this is a file
+            if (this.props.type == InputGroupTypes.File) {
+                // Set the change event
+                (elInput as HTMLInputElement).addEventListener("onchange", (ev) => {
+                    // Get the source file
+                    let srcFile = ev.target["files"][0];
+                    if (srcFile) {
+                        let reader = new FileReader();
+
+                        // Set the file loaded event
+                        reader.onloadend = (ev: any) => {
+                            this._fileValue = {
+                                data: ev.target.result,
+                                name: srcFile.name
+                            };
+                        }
+
+                        // Set the error
+                        reader.onerror = (ev: any) => {
+                            // Log
+                            console.log("Error reading the file", srcFile, ev.target.error);
+                        }
+
+                        // Read the file
+                        reader.readAsArrayBuffer(srcFile);
+                    }
+                });
+            }
         }
     }
 
@@ -242,9 +254,6 @@ class _InputGroup extends Base<IInputGroupProps> implements IInputGroup {
 
                     // File
                     case InputGroupTypes.File:
-                        this.el.classList.add("form-file");
-                        input.classList.remove("form-control");
-                        input.classList.add("form-file-input");
                         input.type = "file";
                         break;
 
@@ -278,6 +287,8 @@ class _InputGroup extends Base<IInputGroupProps> implements IInputGroup {
      * Public Interface
      */
 
+    getFileInfo() { return this._fileValue; }
+
     getValue() { return this.elTextbox.value; }
 
     // Sets the textbox value

package/src/components/inputGroup/types.d.ts

@@ -39,8 +39,13 @@ export const InputGroupTypes: IInputGroupTypes;
 import { IBaseProps } from "../types";
 import { IButtonProps } from "../button/types";
 
+/** Input Group File Value */
+export interface IInputGroupFileValue {
+
+}
+
 /**
- * Button Group
+ * Input Group
  */
 export interface IInputGroup {
     /** The input group element. */
@@ -49,6 +54,9 @@ export interface IInputGroup {
     /** Reference to the textbox input/textarea element. */
     elTextbox: HTMLInputElement | HTMLTextAreaElement;
 
+    /** Method to get the file information. */
+    getFileInfo: () => IInputGroupFileValue;
+
     /** Method to get the value. */
     getValue: () => string;