[Angular] [Bootbox] File Upload Example

Problem
How to implement file upload function via Angular and Bootbox?

How-To
Here has sample code.
Code snippet in JavaScript:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

$scope.importJson = function() { $scope.attachment = undefined; bootbox.dialog({ message: "<input class='form-control' type='file' id='jsonFile' name='jsonFile' /> ", title: '匯入 JSON', buttons: { upload: { label: '上傳', callback: function() { cResource().uploadFile({ url: '/api/projects/' + $scope.project.id + '/importJSON', file: $scope.attachment }).success(function(res, status, headers, config) { cAlerter.success('上傳成功'); }).error(function(res, status, headers, config) { }); } }, cancel: { label: '取消' } } }); var jsonFile = document.getElementById("jsonFile"); jsonFile.addEventListener("change", function (e) { $scope.attachment = this.files[0]; }, false); };

Code snippet in controller class:

1 2 3 4 5 6

@Transactional @PostMapping(value = "/{projectId}/importJSON", produces = MediaType.APPLICATION_JSON_VALUE) public void importJSON(@PathVariable Integer projectId, @RequestParam(value = "file") MultipartFile jsonFile) throws IOException { }