Required request part ‘file’ is not present

Hello guys I’m trying to build a file upload application using AngularJs but I.m getting this error
Required request part ‘file’ is not present
here is my code help me

upload.html    
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<h1>Spring Boot File Upload Using REST</h1>
<div ng-app='app'>
<div ng-controller='myctrl'>

<form method="POST" enctype="multipart/form-data" id="fileUploadForm">
    <input type="file" id="file1" name="file" ng-files="getTheFiles($files)" 
/>
    <input type="button" ng-click="uploadFiles()" value="Upload" />
</form>


<h1> Result</h1>
<pre>
    <span id="result"></span>
</pre>

</div>
</div>
        <script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">
</script>

<script type="text/javascript" src="js/main.js"></script>

</body>
</html>

main.js

angular.module('app',[]);
angular.module('app')

.directive('ngFiles', ['$parse', function ($parse) {

            function fn_link(scope, element, attrs) {
                var onChange = $parse(attrs.ngFiles);
                element.on('change', function (event) {
                    onChange(scope, { $files: event.target.files });
                });
            };

            return {
                link: fn_link
            }
        } ])
.controller('myctrl', function ($scope, $http) {

            var formdata = new FormData();
            $scope.getTheFiles = function ($files) {
                angular.forEach($files, function (value, key) {
                    formdata.append(key, value);
                });
            };

            // NOW UPLOAD THE FILES.
            $scope.uploadFiles = function () {

                var request = {
                    method: 'POST',
                    url: '/api/upload',
                    data: formdata,
                    headers: {
                        'Content-Type': undefined
                    }
                };

                // SEND THE FILES.
                $http(request)
                    .success(function (d) {
                        alert(d);
                    })
                    .error(function () {
                    });
            }
        });

FileUploadController.java

package com.fileupload.controller;

import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.Arrays;
import java.util.List;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.fileupload.controller.RestFileUploadController;

@RestController
public class RestFileUploadController {
    private final Logger logger = 
LoggerFactory.getLogger(RestFileUploadController.class);

    //path to save the uploaded file
    private static String UPLOADED_FOLDER = "E:";

    // file upload
   /* @PostMapping("/api/upload")*/
    @RequestMapping(value = "/api/upload" , method = RequestMethod.POST)
    public ResponseEntity<?> uploadFile(
            @RequestParam("file") MultipartFile uploadfile) {

        logger.debug("Single file upload!");

        if (uploadfile.isEmpty()) {
            return new ResponseEntity("please select a file!", 
HttpStatus.OK);
        }

        try {

            saveUploadedFiles(Arrays.asList(uploadfile));

        } catch (IOException e) {
            return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
        }

        return new ResponseEntity("Successfully uploaded - " +
                uploadfile.getOriginalFilename(), new HttpHeaders(), HttpStatus.OK);
    }

        private void saveUploadedFiles(List<MultipartFile> files) throws IOException {

            for (MultipartFile file : files) {

                if (file.isEmpty()) {
                    continue; 
                }

                byte[] bytes = file.getBytes();
                Path path = Paths.get(UPLOADED_FOLDER + 
file.getOriginalFilename());
                Files.write(path, bytes);

            }

        }

}

I’m using file name to read the uploaded file in my backend controller using @Requestparam(‘file’) if t is wrong please suggest me any other way.

Source: AngularJS