diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js b/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js
index 4ca8cf9..2beafc3 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js
@@ -77,6 +77,10 @@ module.controller('RealmCreateCtrl', function($scope, Current, Realm, $upload, $
$scope.files = $files;
};
+ $scope.changeFileSelect = function() {
+ $scope.files = null;
+ document.getElementById('import-file').click();
+ }
$scope.uploadFile = function() {
//$files: an array of files selected, each file has name, size, and type.
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-create.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-create.html
index fa61c55..3804c25 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-create.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-create.html
@@ -8,38 +8,19 @@
<form name="uploadForm" novalidate>
<fieldset>
<legend uncollapsed><span class="text">Import Realm</span></legend>
- <div class="form-group">
- <label for="name">Choose JSON File: </label>
- <div class="controls">
- <input type="file" ng-file-select="onFileSelect($files)" >
+ <div class="form-group clearfix">
+ <label for="name">Upload JSON File </label>
+ <div class="controls button-input-file" data-ng-show="!files || files.length == 0">
+ <a href="#" class="button"><span class="icon-upload">Icon: Upload</span>Choose a JSON File...</a>
+ <input id="import-file" type="file" class="transparent" ng-file-select="onFileSelect($files)">
</div>
+ <span class="uploaded-file" data-ng-show="files.length > 0">{{files[0].name}}</span>
+ <button class="link" data-ng-show="files.length > 0" data-ng-click="changeFileSelect();">Change</button>
</div>
+
<div class="form-actions inside">
<button type="submit" data-ng-click="uploadFile()" class="primary" data-ng-show="files.length > 0">Upload</button>
</div>
-
-
- <!-- THIS APPEARS INITIALLY
-
-<div class="form-group clearfix">
- <label for="upload">Upload JSON File</label>
- <div class="controls button-input-file">
- <a class="button" href="#"><span class="icon-upload">Icon: Upload</span>Choose a JSON File...</a>
- <input type="file" ng-file-select="onFileSelect($files)" class="transparent" id="upload">
- </div>
- </div>
--->
- <!-- THE DIV ABOVE IS REPLACED BY THIS AFTER CHOOSING A FILE
-
-<div class="form-group clearfix">
- <label for="upload">Upload JSON File </label>
- <span class="uploaded-file">a-new-realm-uploaded.json</span>
- <div class="link-input-file">
- <button class="link">Change</button>
- <input type="file" ng-file-select="onFileSelect($files)" class="transparent" id="upload">
- </div>
- </div>
--->
</fieldset>
</form>
<form name="realmForm" novalidate>
