Get file dropping working and wire it up to call the build repo endpoint
This commit is contained in:
parent
fc6e3258a8
commit
28f6ff1605
4 changed files with 167 additions and 5 deletions
|
@ -919,6 +919,71 @@ function NewRepoCtrl($scope, $location, UserService, Restangular) {
|
|||
'initialize': false
|
||||
};
|
||||
|
||||
var startBuild = function(repo, fileId) {
|
||||
$scope.building = true;
|
||||
|
||||
var data = {
|
||||
'file_id': fileId
|
||||
};
|
||||
|
||||
var startBuildCall = Restangular.one('repository/' + repo.namespace + '/' + repo.name + '/build/');
|
||||
startBuildCall.customPOST(data).then(function(resp) {
|
||||
$location.path('/repository/' + repo.namespace + '/' + repo.name);
|
||||
}, function() {
|
||||
$('#couldnotbuildModal').modal();
|
||||
$location.path('/repository/' + repo.namespace + '/' + repo.name);
|
||||
});
|
||||
};
|
||||
|
||||
var conductUpload = function(repo, file, url, fileId, mimeType) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('PUT', url, true);
|
||||
request.overrideMimeType(mimeType);
|
||||
request.onprogress = function(e) {
|
||||
var percentLoaded;
|
||||
if (e.lengthComputable) {
|
||||
$scope.upload_progress = (e.loaded / e.total) * 100;
|
||||
}
|
||||
};
|
||||
request.onerror = function() {
|
||||
$('#couldnotbuildModal').modal();
|
||||
$location.path('/repository/' + repo.namespace + '/' + repo.name);
|
||||
};
|
||||
request.onreadystatechange = function() {
|
||||
var state = request.readyState;
|
||||
if (state == 4) {
|
||||
$scope.$apply(function() {
|
||||
$scope.uploading = false;
|
||||
startBuild(repo, fileId);
|
||||
});
|
||||
return;
|
||||
}
|
||||
};
|
||||
request.send(file);
|
||||
};
|
||||
|
||||
var startFileUpload = function(repo) {
|
||||
$scope.uploading = true;
|
||||
$scope.uploading_progress = 0;
|
||||
|
||||
var uploader = $('#file-drop')[0];
|
||||
var file = uploader.files[0];
|
||||
$scope.upload_file = file.name;
|
||||
|
||||
var mimeType = file.type || 'application/octet-stream';
|
||||
var data = {
|
||||
'mimeType': mimeType
|
||||
};
|
||||
|
||||
var getUploadUrl = Restangular.one('filedrop/');
|
||||
getUploadUrl.customPOST(data).then(function(resp) {
|
||||
conductUpload(repo, file, resp.url, resp.file_id, mimeType);
|
||||
}, function() {
|
||||
$('#couldnotbuildModal').modal();
|
||||
$location.path('/repository/' + repo.namespace + '/' + repo.name);
|
||||
});
|
||||
};
|
||||
|
||||
$scope.$watch( function () { return UserService.currentUser(); }, function (currentUser) {
|
||||
$scope.user = currentUser;
|
||||
|
||||
|
@ -950,6 +1015,12 @@ function NewRepoCtrl($scope, $location, UserService, Restangular) {
|
|||
};
|
||||
|
||||
$scope.createNewRepo = function() {
|
||||
var uploader = $('#file-drop')[0];
|
||||
if ($scope.repo.initialize && uploader.files.length < 1) {
|
||||
$('#missingfileModal').modal();
|
||||
return;
|
||||
}
|
||||
|
||||
$scope.creating = true;
|
||||
var repo = $scope.repo;
|
||||
var data = {
|
||||
|
@ -959,7 +1030,13 @@ function NewRepoCtrl($scope, $location, UserService, Restangular) {
|
|||
|
||||
var createPost = Restangular.one('repository');
|
||||
createPost.customPOST(data).then(function(created) {
|
||||
$scope.creating = false;
|
||||
|
||||
// Repository created. Start the upload process if applicable.
|
||||
if ($scope.repo.initialize) {
|
||||
startFileUpload(created);
|
||||
return;
|
||||
}
|
||||
|
||||
// Otherwise, redirect to the repo page.
|
||||
$location.path('/repository/' + created.namespace + '/' + created.name);
|
||||
|
|
|
@ -1,8 +1,21 @@
|
|||
<div class="container" ng-show="building">
|
||||
<i class="fa fa-spinner fa-spin fa-3x"></i>
|
||||
</div>
|
||||
|
||||
<div class="container" ng-show="creating">
|
||||
<i class="fa fa-spinner fa-spin fa-3x"></i>
|
||||
</div>
|
||||
|
||||
<div class="container new-repo" ng-show="!user.anonymous && !creating">
|
||||
<div class="container" ng-show="uploading">
|
||||
<span class="message">Uploading file {{ upload_file }}</span>
|
||||
<div class="progress progress-striped active">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="{{ upload_progress }}" aria-valuemin="0" aria-valuemax="100" style="{{ 'width: ' + upload_progress + '%' }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="container new-repo" ng-show="!user.anonymous && !creating && !uploading && !building">
|
||||
<form method="post" name="newRepoForm" ng-submit="createNewRepo()">
|
||||
|
||||
<!-- Header -->
|
||||
|
@ -69,7 +82,7 @@
|
|||
Upload a Dockerfile or a zip file containing a Dockerfile <b>in the root directory</b>
|
||||
</div>
|
||||
|
||||
<input class="file-drop" type="file">
|
||||
<input id="file-drop" class="file-drop" type="file">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -110,6 +123,26 @@
|
|||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
|
||||
<!-- Modal message dialog -->
|
||||
<div class="modal fade" id="missingfileModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h4 class="modal-title">File required</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
A file is required in order to initialize a repository.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<!-- Modal message dialog -->
|
||||
<div class="modal fade" id="cannotcreateModal">
|
||||
<div class="modal-dialog">
|
||||
|
@ -127,3 +160,22 @@
|
|||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
||||
|
||||
<!-- Modal message dialog -->
|
||||
<div class="modal fade" id="couldnotbuildModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h4 class="modal-title">Cannot initialize repository</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
The repository could not be initialized with the selected Dockerfile. Please try again later.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
|
|
Reference in a new issue