/** * An element which adds a stylize box for uploading a file. */ angular.module('quay').directive('fileUploadBox', function () { var directiveDefinitionObject = { priority: 0, templateUrl: '/static/directives/file-upload-box.html', replace: false, transclude: true, restrict: 'C', scope: { 'selectMessage': '@selectMessage', 'filesSelected': '&filesSelected', 'filesCleared': '&filesCleared', 'filesValidated': '&filesValidated', 'extensions': '= $scope.selectedFiles.length) { callback(true, fileIds); return; } // For the current file, retrieve a file-drop URL from the API for the file. var currentFile = $scope.selectedFiles[currentIndex]; var mimeType = currentFile.type || 'application/octet-stream'; var data = { 'mimeType': mimeType }; $scope.currentlyUploadingFile = currentFile; $scope.uploadProgress = 0; ApiService.getFiledropUrl(data).then(function(resp) { // Perform the upload. conductUpload(currentFile, resp.url, resp.file_id, mimeType, progressCb, doneCb); }, function() { callback(false, 'Could not retrieve upload URL'); }); }; // Start the uploading. $scope.state = 'uploading'; performFileUpload(); }; $scope.handleFilesChanged = function(files) { if ($scope.state == 'uploading') { return; } $scope.message = null; $scope.selectedFiles = files; if (files.length == 0) { $scope.state = 'clear'; $scope.filesCleared(); } else { for (var i = 0; i < files.length; ++i) { if (files[i].size > MAX_FILE_SIZE) { $scope.state = 'error'; $scope.message = 'File ' + files[i].name + ' is larger than the maximum file ' + 'size of ' + MAX_FILE_SIZE_MB + ' MB'; return; } } $scope.state = 'checking'; $scope.filesSelected({ 'files': files, 'callback': function(status, message) { $scope.state = status ? 'okay' : 'error'; $scope.message = message; if (status) { $scope.filesValidated({ 'files': files, 'uploadFiles': uploadFiles }); } } }); } }; $scope.getAccepts = function(extensions) { if (!extensions || !extensions.length) { return '*'; } return extensions.join(','); }; $scope.$watch('reset', function(reset) { if (reset) { $scope.state = 'clear'; $element.find('#file-drop-' + $scope.boxId).parent().trigger('reset'); } }); } }; return directiveDefinitionObject; });