Upload files using spring boot and angularjs

I have a rest controller when i have a service upload (to upload files) and i want to consume it using angularjs but i am new to angular so i am not sure of the code that i put in the controller js .Can you have a look and help me ?

Here’s my form :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Blog Single | Corlate</title>

    <!-- core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/prettyPhoto.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href="css/responsive.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->       
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->

<body ng-app="MyCat" ng-controller="CatController" >

    <header id="header">
        <div class="top-bar">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-xs-4">
                        <div class="top-number"><p><i class="fa fa-phone-square"></i>www.meditel.ma</p></div>
                    </div>
                    <div class="col-sm-6 col-xs-8">
                       <div class="social">
                            <ul class="social-share">
                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fa fa-linkedin"></i></a></li> 
                                <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                <li><a href="#"><i class="fa fa-skype"></i></a></li>
                            </ul>
                            <div class="search">
                                <form role="form">
                                    <input type="text" class="search-form" autocomplete="off" placeholder="Search">
                                    <i class="fa fa-search"></i>
                                </form>
                           </div>
                       </div>
                    </div>
                </div>
            </div><!--/.container-->
        </div><!--/.top-bar-->

        <nav class="navbar navbar-inverse" role="banner">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo"></a>
                </div>

                <div class="collapse navbar-collapse navbar-right">
                    <ul class="nav navbar-nav">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about-us.html">About Us</a></li>
                        <li><a href="services.html">Services</a></li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="blog-item.html">Blog Single</a></li>
                                <li><a href="pricing.html">Pricing</a></li>
                                <li><a href="404.html">404</a></li>
                                <li><a href="shortcodes.html">Shortcodes</a></li>
                            </ul>
                        </li>
                        <li><a href="blog.html">Blog</a></li> 
                        <li class="active"><a href="contact-us.html">Contact</a></li>                        
                    </ul>
                </div>
            </div><!--/.container-->
        </nav><!--/nav-->
    </header><!--/header-->

    <section id="contact-info">


    <section id="contact-page">
        <div class="container">
            <div class="center">        

                <p class="lead">Select the file to import</p>
            </div> 
            <div class="row contact-wrap"> 
                <div class="status alert alert-success" style="display: none"></div>
                <form id="main-contact-form" class="contact-form" name="contact-form" ng-submit="UploadFile" >
                    <div class="col-sm-5 col-sm-offset-1">
                        <div class="form-group">
                            <label>NameOfUploader *</label>
                            <input type="text" name="name" class="form-control" required="required" ng-model="NameOfUploader">
                        </div>

                        <div class="form-group">
                            <label>DateOfUploade</label>
                            <input type="Date" class="form-control" ng-model="DateOfUpload">
                        </div>
                            <div class="form-group">
                                <label for="t">Type of File</label>
                                <select ng-model="TypeOfFile"
                                    class="form-control" id="t">
                                    <option>.word</option>
                                    <option>.xsl</option>
                                    <option>.pdf</option>
                                </select>
                            </div>

                            <div class="form-group">
                            <label>File</label>
                            <input type="file" class="form-control" ng-model="file">
                        </div>                        

                        <div class="form-group">
                            <button type="submit"  class="btn btn-primary btn-lg"  ng-click="upload()">Import File</button>
                        </div>
<!--                          <div class="form-group"> -->
<!--                             <button type="submit"  class="btn btn-primary btn-lg"  ng-click="SaveReports()">SaveReports</button> -->
<!--                         </div> -->
                    </div> 
<!--                        <table class="table"> -->
<!--                            <tr> -->
<!--                                <th>NameOfUploader</th> -->
<!--                                <th>DateOfUpload</th> -->
<!--                                <th>TypeOfFile</th> -->
<!--                                <th>File</th> -->
<!--                            </tr> -->
<!--                            <tr ng-repeat="rap in reports"> -->
<!--                                <td>{ {rap.NameOfUploader}}</td> -->
<!--                                <td>{ {rap.DateOfUpload}}</td> -->
<!--                                <td>{ {rap.TypeOfFile}}</td> -->
<!--                                <td>{ {rap.File}}</td> -->
<!--                            </tr> -->
<!--                        </table> -->

                    </form> 
            </div><!--/.row-->
        </div><!--/.container-->
    </section><!--/#contact-page-->


    <script src="js/jquery.js"></script>
    <script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
    <script src="js/jquery.prettyPhoto.js"></script>
    <script src="js/jquery.isotope.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/wow.min.js"></script>
</body>
</html>

Here’s my controller java

//upload Files



        @RequestMapping(value="/upload", method=RequestMethod.POST)
        public @ResponseBody String handleFileUpload(@RequestParam("NameOfUploader") String name,@RequestParam("DateOfUpload") Date date,
                @RequestParam("TypeOfFile") String type,@RequestParam("file") MultipartFile file){
            if (!file.isEmpty()) {
                try {
                    byte[] bytes = file.getBytes();
                    BufferedOutputStream stream =
                            new BufferedOutputStream(new FileOutputStream(new File(name)));
                    stream.write(bytes);
                    stream.close();
                    return "You successfully uploaded " + name + "!";
                } catch (Exception e) {
                    return "You failed to upload " + name + " => " + e.getMessage();
                }
            } else {
                return "You failed to upload " + name + " because the file was empty.";
            }
        }

here’s my controller js

$scope.upload=function(){
        $scope.rap=$scope.currentEntity;
        $http.post("/upload",$scope.rap)
         .success(function(){

             console.log("File ipmorted");
         });
    };


Source: javascript

Leave a Reply