Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Finish up file upload directive, fix #374
  • Loading branch information
gashcrumb committed Jun 26, 2013
1 parent f42d009 commit 66a5366
Show file tree
Hide file tree
Showing 4 changed files with 119 additions and 23 deletions.
48 changes: 39 additions & 9 deletions hawtio-web/src/main/webapp/app/ui/html/fileUpload.html
@@ -1,11 +1,41 @@
<div class="file-upload">
<ul>
<li ng-repeat="file in files">{{file.fileName}}<span class="clickable red"><i class="icon-remove" title="Delete {{file.filename}}" ng-click="delete(file.fileName)"></i></span></li>
</ul>
<form name="file-upload" action="upload" method="post" enctype="multipart/form-data">
<fieldset>
<input type="hidden" name="parent" value="{{target}}">
<input type="file" name="file">
</fieldset>
</form>

<div ng-show="showFiles" class="row-fluid">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Size</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="file in files">
<td>{{file.fileName}}</td>
<td>{{file.length}}</td>
<td><span class="clickable red"><i class="icon-remove" title="Delete {{file.filename}}" ng-click="delete(file.fileName)"></i></span></td>
</tr>
<tr>
<td colspan="3" style="background: inherit;">
</td>
</tr>
</tbody>
</table>
</div>

<div class="row-fluid">
<form class="no-bottom-margin" name="file-upload" action="upload" method="post" enctype="multipart/form-data">
<fieldset>
<input type="hidden" name="parent" value="{{target}}">
<input type="file" style="display: none;" name="files[]" multiple>
<div class="input-prepend">
<input type="button" class="btn" value="Add">
<div class="span2 progress progress-striped">
<div class="bar" style="width: {{percentComplete}}%;"></div>
</div>
</div>
</fieldset>
</form>
</div>

</div>
5 changes: 5 additions & 0 deletions hawtio-web/src/main/webapp/app/ui/html/test.html
Expand Up @@ -3,6 +3,7 @@

<div>
File upload
<!--
<div class="row-fluid">
<form action="upload" method="post" enctype="multipart/form-data">
<fieldset>
Expand All @@ -13,9 +14,13 @@
</fieldset>
</form>
</div>
-->

<div class="row-fluid">
<p>Showing files</p>
<div hawtio-file-upload="files" target="test"></div>
<p>Not showing files</p>
<div hawtio-file-upload="files" target="test" show-files="false"></div>
</div>

</div>
Expand Down
76 changes: 63 additions & 13 deletions hawtio-web/src/main/webapp/app/ui/js/fileUpload.ts
Expand Up @@ -11,27 +11,39 @@ module UI {

public scope = {
files: '=hawtioFileUpload',
target: '@'
target: '@',
showFiles: '@'
};


public controller = ($scope, $element, $attrs, jolokia) => {

$scope.target = '';
$scope.response = '';
$scope.percentComplete = 0;

observe($scope, $attrs, 'target', '');
observe($scope, $attrs, 'showFiles', true);


$scope.update = (response) => {
$scope.files = response.value;
$scope.$apply();
var responseJson = angular.toJson(response.value);
if ($scope.responseJson !== responseJson) {
$scope.responseJson = responseJson;
$scope.files = response.value;
$scope.$apply();
}
}


$scope.delete = (fileName) => {
//notification('info', 'Deleting ' + fileName);
jolokia.request({
type: 'exec', mbean: fileUploadMBean,
operation: 'delete(java.lang.String, java.lang.String)',
arguments: [$scope.target, fileName],
arguments: [$scope.target, fileName]}, {
success: () => {
//notification('success', 'Deleted ' + fileName);
$scope.$apply();
},
error: (response) => {
Expand All @@ -54,20 +66,58 @@ module UI {

});


$scope.onFileChange = () => {
var form:any = $('form[name=file-upload]');
form.ajaxSubmit({});
return false;
}

};


public link = ($scope, $element, $attrs) => {

var fileInput = $element.find('input[type=file]');
var form = $element.find('form[name=file-upload]');
var button = $element.find('input[type=button]');

var onFileChange = () => {

button.prop('disabled', true);

var files = fileInput.get(0).files;

var fileName = files.length + " files";
if (files.length ===1) {
fileName = files[0].name;
}

form.ajaxSubmit({
beforeSubmit: (arr, $form, options) => {
notification('info', "Uploading " + fileName);
$scope.percentComplete = 0;
$scope.$apply();
},
success: (response, statusText, xhr, $form) => {
notification('success', "Uploaded " + fileName);
button.prop('disabled', false);
$scope.percentComplete = 0;
$scope.$apply();
},
error: (response, statusText, xhr, $form) => {
notification('error', "Failed to upload " + fileName + " due to " + statusText);
button.prop('disabled', false);
$scope.percentComplete = 0;
$scope.$apply();
},
uploadProgress: (event, position, total, percentComplete) => {
$scope.percentComplete = percentComplete;
$scope.$apply();
}
});
return false;
}

button.click(() => {
if (!button.prop('disabled')) {
fileInput.click();
}
return false;
});

form.submit(() => {
return false;
Expand All @@ -77,12 +127,12 @@ module UI {
fileInput.click((event) => {
setTimeout(() => {
if (fileInput.val().length > 0) {
$scope.onFileChange();
onFileChange();
}
}, 0);
})
} else {
fileInput.change($scope.onFileChange);
fileInput.change(onFileChange);
}


Expand Down
13 changes: 12 additions & 1 deletion hawtio-web/src/main/webapp/css/site-base.less
Expand Up @@ -1564,4 +1564,15 @@ td.adding {
display: none;
}


.file-upload div form fieldset .input-prepend .btn {
float: left;
}
.input-prepend .progress {
float:left;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
position: relative;
left: -35px;
top: 0px;
min-height: 28px;
}

0 comments on commit 66a5366

Please sign in to comment.