Get file dropping working and wire it up to call the build repo endpoint

This commit is contained in:
Joseph Schorr 2013-10-26 17:20:59 -04:00
parent fc6e3258a8
commit 28f6ff1605
4 changed files with 167 additions and 5 deletions

View file

@ -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);

View file

@ -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">&times;</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">&times;</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 -->