Spring Boot+AngularJS+BootStrap Implementation Progress Bar Sample Code

Spring Boot+AngularJS+BootStrap Implementation Progress Bar

Principle

The principle of progress bar is that when uploading files, when the program runs to a certain part, set a value of 1 to 100 in Session. Then the foreground requests this value every small period of time.

In AngularJS, the $http object has three states, namely success, progress and error, in which the progress method will be called continuously before the success method is called (that is, before the upload is completed). What we have to do is to add a request in progress and get the value we set in session in the background.

Code, here I used a plug-in to upload files, called ng-file-upload

html

<input type="file" data-ng-model="file">

<uib-progress data-ng-show="progress">
  <uib-bar value="progress" type="{{type}}" data-ng-bind="progress + '%'"/>
</uib-progress>
<span class="err" data-ng-show="isShowMsg" data-ng-bind="Msg"></span>
<button class="btn btn-primary" type="button" data-ng-click="upload()"> Confirm </button>

js

Upload.upload(
        {
          url: "",
          data: {
            file: file
          },
          method: 'post'
        }).then(function (res) {
          // This is success Method 
          $scope.isShowMsg = true;
          $scope.Msg = res.data.msg;
          if($scope.Msg == " The imported data does not meet the format requirements! ")
          $scope.type = "progress-bar progress-bar-danger progress-bar-striped";// Set the progress bar style 
          else {
            $scope.type = "progress-bar progress-bar-success progress-bar-striped";
            $scope.progress = 100;// After uploading successfully, set the progress bar to 100
          }

        }, function (){
        // This is error Method 
        }, function (){
        // This is progress Method 
        $scope.type = "progress-bar progress-bar-info progress-bar-striped";

        $http({
        url:"",
        method: "get"
        }).success(function (res) {
            $scope.progress = res;// Bind the value of the progress bar 
          })
        });

Upload part of the code (just pay attention to where session is set up

public Map<String, Object> batchModify(InputStream inputStream,HttpSession session) {
    Map<String, Object> res = new HashMap<>();
    Workbook workbook = null;
    try {
      workbook = Util.createWorkbook(inputStream);
    } catch (InvalidFormatException | IOException e) {
      e.printStackTrace();
    }
    session.setAttribute("progress", 5);// After successful parsing, I set the progress to 5
    Sheet sheet = workbook.getSheetAt(0);

    Map<String, Object> roleWithPages = new HashMap<>();
    for (int i = 1; i <= sheet.getLastRowNum(); i++) {
      Row r = sheet.getRow(i);
      if (r == null || r.getCell(0) == null || r.getCell(1) == null)
        continue;
      Set<Page> pages = null;
      if (roleWithPages.get(r.getCell(0).toString()) == null) {
        pages = new HashSet<>();
      } else {
        pages = (Set<Page>) roleWithPages.get(r.getCell(0).toString());
      }
      Page p = new Page();
      p.setId(Math.round(r.getCell(1).getNumericCellValue()));
      pages.add(p);
      roleWithPages.put(r.getCell(0).toString(), pages);
      session.setAttribute("progress", 5 + i*90/sheet.getLastRowNum());
      // I set the total progress amount of the processing file body to 90 ( 5 Is to add the progress of the parsing part )
    }

    List<Role> roles = new ArrayList<>();
    for (String rolename : roleWithPages.keySet()) {
      Role role = repo.findByName(rolename);
      role.setPages((Set<Page>) roleWithPages.get(rolename));
      roles.add(role);
    }
    repo.save(roles);
    session.setAttribute("progress", 100);// After saving, set the progress to 100
    res.put("msg", " Data import succeeded !");
    return res;
  }

Progress bar part of the code, very simple, is to read the value of progress in Session

public int getProgress(HttpServletRequest request){
    return (int) request.getSession().getAttribute("progress");
  }