Got the upload dialoge to work now focusing on the taskdialog or the submit button click.

coreplugins/cesiumion/public/components/BootstrapField.jsx

@@ -15,21 +15,24 @@ const BootstrapFieldComponent = ({
     ...props
 }) => {
     const isError = error && touched;
-    const ControlComponent = type === "checkbox" ? "input" : type === "textarea" || type === "select" ? type : "input";
+    const isCheckbox = type === "checkbox";
+    const ControlComponent = isCheckbox ? "input" : (type === "textarea" || type === "select") ? type : "input";
 
     return (
         <div className={`form-group${isError ? ' has-error' : ''}`} style={{ marginLeft: 0, marginRight: 0 }}>
-            {label && <label htmlFor={name} className="control-label">{label}</label>}
+            {label && !isCheckbox && <label htmlFor={name} className="control-label">{label}</label>}
             <ControlComponent
                 id={name}
                 name={name}
-                className="form-control"
+                className={isCheckbox ? "" : "form-control"}
                 type={type}
-                value={value}
+                value={isCheckbox ? undefined : value}
+                checked={isCheckbox ? value : undefined}
                 onChange={onChange}
                 onBlur={onBlur}
                 {...props}
             />
+            {label && isCheckbox && <label htmlFor={name} className="control-label">{label}</label>}
             {isError && <span className="help-block">{error}</span>}
             {help && !isError && <span className="help-block">{help}</span>}
             {isError && showIcon && <span className="glyphicon glyphicon-remove form-control-feedback"></span>}
@@ -54,15 +57,16 @@ class BootstrapField extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            value: props.value || '',
+            value: props.type === "checkbox" ? props.checked : props.value || '',
             touched: false,
             error: ''
         };
     }
 
     handleChange = (e) => {
-        const { value } = e.target;
+        const { type, checked, value } = e.target;
-        this.setState({ value }, () => {
+        const newValue = type === "checkbox" ? checked : value;
+        this.setState({ value: newValue }, () => {
             if (this.props.onChange) {
                 this.props.onChange(e);
             }

coreplugins/cesiumion/public/components/UploadDialog.jsx

@@ -32,10 +32,53 @@ export default class UploadDialog extends Component {
 		}
 	};
 
+	constructor(props) {
+		super(props);
+
+		this.mergedInitialValues = {
+			...UploadDialog.defaultProps.initialValues,
+			...this.props.initialValues
+		};
+
+		this.state = {
+			...this.mergedInitialValues
+		}
+
+		// this.state = {
+		// 	show: this.props.show,
+		// 	asset: null,
+		// 	loading: this.props.loading,
+		// 	...this.mergedInitialValues,
+		// 	hide: this.props.hide,
+		// 	title: this.props.title
+		// }	
+	}
+
     show(){
         this.dialog.show();
     }
 
+    handleChange = (e) => {
+        const { value, name } = e.target;
+		
+		if (name === "options.textureFormat")
+		{
+			let options = {...this.state.options};
+			options["textureFormat"] = value === "Yes";
+			this.setState({ options });
+		}
+		else if (name === "options.baseTerrainId")
+		{
+			let options = {...this.state.options};
+			options["baseTerrainId"] = value;
+			this.setState({ options });
+		}
+		else
+		{
+			this.setState({ [name]: value });
+		}
+    }
+
 	handleError = msg => error => {
 		this.props.onError(msg);
 		console.error(error);
@@ -43,7 +86,7 @@ export default class UploadDialog extends Component {
 
 	onSubmit = values => {
 		const { asset, onSubmit } = this.props;
-		values = JSON.parse(JSON.stringify(values));
+		values = JSON.parse(JSON.stringify(this.state));
 		const { options = {} } = values;
 
 		switch (UploadDialog.AssetSourceType[asset]) {
@@ -66,10 +109,10 @@ export default class UploadDialog extends Component {
 	getSourceFields() {
 		switch (UploadDialog.AssetSourceType[this.props.asset]) {
 			case SourceType.RASTER_TERRAIN:
-				const loadOptions = ({ isLoading, isError, data }) => {
+				let loadOptions = ({ isLoading, isError, data }) => {
 					if (isLoading || isError)
 						return <option disabled>LOADING...</option>;
-					const userItems = data.items
+					let userItems = data.items
 						.filter(item => item.type === "TERRAIN")
 						.map(item => (
 							<option key={item.id} value={item.id}>
@@ -89,6 +132,7 @@ export default class UploadDialog extends Component {
 						name={"options.baseTerrainId"}
 						label={"Base Terrain: "}
 						type={"select"}
+						onChange={this.handleChange}
 					>
 						<IonFetcher
 							path="assets"
@@ -105,7 +149,8 @@ export default class UploadDialog extends Component {
 				return (
 					<BootstrapField
 						name={"options.textureFormat"}
-						type={"checkbox"}
+						label={"Use WebP images"}
+						type={"select"}
 						help={
 							"Will produce WebP images, which are typically 25-34% smaller than " +
 							"equivalent JPEG images which leads to faster streaming and reduced " +
@@ -114,8 +159,10 @@ export default class UploadDialog extends Component {
 							"CesiumJS 1.54 or newer, and a browser that supports WebP, such as " +
 							"Chrome or Firefox 65 and newer."
 						}
+						onChange={this.handleChange}
 					>
-						Use WebP images
+						<option>No</option>
+						<option>Yes</option>
 					</BootstrapField>
 				);
 			default:
@@ -146,38 +193,22 @@ export default class UploadDialog extends Component {
 	}
 
 	render() {
-		const {
-			initialValues,
-			onHide,
-			title,
-			loading: isLoading,
-			...options
-		} = this.props;
-
-		delete options["asset"];
-		delete options["onSubmit"];
-
-		const mergedInitialValues = {
-			...UploadDialog.defaultProps.initialValues,
-			...initialValues
-		};
-
 		return (
             <FormDialog
-                title={title}
+                title={this.state.title}
                 show={this.props.show}
-                onHide={onHide}
+                onHide={this.props.onHide}
                 handleSaveFunction={this.onSubmit}
-                saveLabel={isLoading ? "Submitting..." : "Submit"}
+                saveLabel={this.state.loading ? "Submitting..." : "Submit"}
                 savingLabel="Submitting..."
-                saveIcon={isLoading ? "fa fa-sync fa-spin" : "fa fa-upload"}
+                saveIcon={this.state.loading ? "fa fa-sync fa-spin" : "fa fa-upload"}
                 ref={(domNode) => { this.dialog = domNode; }}
             >
                 <BootstrapField
                     name={"name"}
                     label={"Name: "}
                     type={"text"}
-                    value={mergedInitialValues.name}
+                    value={this.state.name}
                     onChange={this.handleChange}
                 />
                 <BootstrapField
@@ -185,14 +216,14 @@ export default class UploadDialog extends Component {
                     label={"Description: "}
                     type={"textarea"}
                     rows={"3"}
-                    value={mergedInitialValues.description}
+                    value={this.state.description}
                     onChange={this.handleChange}
                 />
                 <BootstrapField
                     name={"attribution"}
                     label={"Attribution: "}
                     type={"text"}
-                    value={mergedInitialValues.attribution}
+                    value={this.state.attribution}
                     onChange={this.handleChange}
                 />
                 {this.getSourceFields()}