A simple picture upload with preview with alert messages for avatar and a multiple files upload with progress bar.
Demo
http://localhost:8080/20151019-javaee-angularjs-bootstrap-upload_file/
Here is Picture upload.
Here is multiple files upload.
Source
MyAppCONFIG.java
package com.damienfremont.blog; import java.util.HashSet; import java.util.Set; import javax.ws.rs.core.Application; public class MyAppCONFIG extends Application { @Override public Set<Class<?>> getClasses() { Set<Class<?>> s = new HashSet<Class<?>>(); s.add(ServiceJAXRS.class); return s; } }
ServiceJAXRS.java
package com.damienfremont.blog; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import javax.ws.rs.Consumes; import javax.ws.rs.POST; import javax.ws.rs.Path; import javax.ws.rs.WebApplicationException; import javax.ws.rs.core.MediaType; import javax.ws.rs.core.Response; import org.glassfish.jersey.media.multipart.FormDataContentDisposition; import org.glassfish.jersey.media.multipart.FormDataParam; @Path("/upload") public class ServiceJAXRS { @POST @Path("/file") @Consumes({MediaType.MULTIPART_FORM_DATA}) public Response uploadFile( @FormDataParam("file") InputStream fileInputStream, @FormDataParam("file") FormDataContentDisposition fileMetaData) throws Exception { try { int read = 0; byte[] bytes = new byte[1024]; File file = new File(fileMetaData.getFileName()); System.out.println("Upload File Path : "+file.getAbsolutePath()); OutputStream out = new FileOutputStream(file); while ((read = fileInputStream.read(bytes)) != -1) { out.write(bytes, 0, read); } out.flush(); out.close(); } catch (IOException e) { throw new WebApplicationException("Error while uploading file. Please try again !!"); } return Response.ok("Data uploaded successfully !!").build(); } }
web.xml
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1"> <servlet> <servlet-name>REST</servlet-name> <servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class> <init-param> <param-name>javax.ws.rs.Application</param-name> <param-value>com.damienfremont.blog.MyAppCONFIG</param-value> </init-param> <init-param> <param-name>jersey.config.server.provider.classnames</param-name> <param-value>org.glassfish.jersey.media.multipart.MultiPartFeature</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>REST</servlet-name> <url-pattern>/api/*</url-pattern> </servlet-mapping> <servlet> <servlet-name>WEBJARS</servlet-name> <servlet-class>org.webjars.servlet.WebjarsServlet</servlet-class> <init-param> <param-name>disableCache</param-name> <param-value>true</param-value> </init-param> <load-on-startup>2</load-on-startup> </servlet> <servlet-mapping> <servlet-name>WEBJARS</servlet-name> <url-pattern>/webjars/*</url-pattern> </servlet-mapping> </web-app>
app.js
'use strict'; var app = angular.module( 'app', [ 'ngAnimate', 'ui.bootstrap', 'ngResource', 'ngFileUpload' ]); app.factory('Model', function($resource) { return $resource('api/upload'); }); app.controller('SubmitFileCtrl', function ($scope, Upload, $timeout) { $scope.uploadPic = function(file) { file.upload = Upload.upload({ url: 'api/upload/file', data: {file: file }, }); file.upload.then(function (response) { $timeout(function () { file.result = response.data; }); }, function (response) { if (response.status > 0) $scope.errorMsg = "Server Error! ("+response.data+")"; }, function (evt) { // Math.min is to fix IE which reports 200% sometimes file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total)); }); } }); app.controller('FilesCtrl', function ($scope, Upload, $timeout) { $scope.uploadFiles = function(files, errFiles) { $scope.files = files; $scope.errFiles = errFiles; angular.forEach(files, function(file) { file.upload = Upload.upload({ url: 'api/upload/file', data: {file: file} }); file.upload.then(function (response) { $timeout(function () { file.result = response.data; }); }, function (response) { if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data; }, function (evt) { file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total)); }); }); } });
index.jsp
<!DOCTYPE html> <html ng-app="app"> <head> <!-- LIBS CSS --> <link rel="stylesheet" href="webjars/bootstrap/${bootstrap.version}/css/bootstrap.css"> <link rel="stylesheet" href="styles.css"> <!-- LIBS JS --> <script src="webjars/angularjs/${angularjs.version}/angular.js"></script> <script src="webjars/angularjs/${angularjs.version}/angular-resource.js"></script> <script src="webjars/angularjs/${angularjs.version}/angular-animate.js"></script> <script src="webjars/angular-ui-bootstrap/${angular-ui-bootstrap.version}/ui-bootstrap-tpls.js"></script> <script src="webjars/ng-file-upload/${ng-file-upload.version}/ng-file-upload.js"></script> <!-- YOUR JS --> <script src="app.js"></script> </head> <body> <div class="container"> <!-- PICTURE FILE --> <form name="myForm" ng-controller="SubmitFileCtrl"> <h1>Picture</h1> <p>Upload Picture on form submit, Alerts</p> <!-- BROWSE --> <div class="form-group"> <input type="file" ngf-select ng-model="picFile" name="file" accept="image/*" ngf-max-size="2MB" required> <i ng-show="myForm.file.$error.maxSize">File too large {{picFile.size / 1000000|number:1}}MB: max 2M</i> </div> <!-- PREVIEW --> <div class="form-group"> <img class="thumb" ng-show="myForm.file.$valid" ngf-thumbnail="picFile"> <button class="btn btn-danger btn-xs" ng-click="picFile = null" ng-show="picFile"> <i class="glyphicon glyphicon-remove"></i> Remove </button> </div> <!-- SUBMIT --> <button class="btn btn-success" ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile)"> <i class="glyphicon glyphicon-ok"></i> Submit </button> <!-- ALERT --> <p> <div class="alert alert-danger" ng-show="errorMsg">Upload Error!</div> <div class="alert alert-success" ng-show="picFile.result">Upload Successful.</div> </p> </form> <!-- FILES --> <form ng-controller="FilesCtrl"> <h1>Files</h1> <p>Multiples Files, Progress Bars</p> <!-- BROWSE --> <div class="form-group"> <button class="btn btn-primary" ngf-select="uploadFiles($files)" multiple accept="*"> <i class="glyphicon glyphicon-folder-open"></i> Browse Files </button> </div> Files: <div class="uploadedfile" ng-repeat="f in files" style="font:smaller"> <!-- FILE --> <i class="glyphicon glyphicon-file"></i><span ng-class="{removed: f.removed}">{{f.name}} {{f.$errorParam}}</span> <!-- PROGRESS --> <div class="progress" ng-show="f.progress >= 0"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{f.progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{f.progress}}%"> <span class="sr-only">{{f.progress}}% Complete</span> {{f.progress}}% </div> </div> </div> {{errorMsg}} </form> </div> </body> </html>
styles.css
.thumb { width: 24px; height: 24px; float: none; position: relative; }
Project
https://github.com/DamienFremont/blog/tree/master/20151019-javaee-angularjs-bootstrap-upload_file
References
https://github.com/danialfarid/ng-file-upload
https://angular-file-upload.appspot.com/
http://howtodoinjava.com/2015/08/05/jersey-file-upload-example/
Hi ser, Thank you very much,its really a usefull article , but i have a problem, the javascript code doesn’t work for me, i mean the webjars libraries.
Hi, it works out-of-the-box on Tomcat with eclipse for example. If it only concerns the webjars part, you can try a slightly simpler project like https://damienfremont.com/2015/10/13/javaee-angularjs-bootstrap-integration/
(tested on IE11, EDGE and Chrome)
Hi,
I’ve got the same problem again, please can i use CDNs instead of these libraries, and if its yes could you give some informations where i can exactly get them because i really need to fix this problem.
thenk ser.
You can use it without Webjars. For example you can download the libs like angularjs at https://angularjs.org/ and packaging it in your webapp folder, or referencing it directly with
But this is the problem, beacause i’ve made some researches before but i could found the libs which contain the names as yours i mean:
angular-resource.js
angular-animate.js
ui-bootstrap-tpls.js
ng-file-upload.js
angular.js
link to here:
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.js
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js
https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js
https://angular-file-upload.appspot.com/js/ng-file-upload.js
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js
or unzip it from here:
https://angularjs.org/
http://getbootstrap.com/
https://angular-ui.github.io/bootstrap/
https://github.com/danialfarid/ng-file-upload#manual
thank you for your reply ser, but i’ve got the same problem agaim here’s my head:
/lib/angular.js
/lib/angular-animate.js
/lib/angular-file-upload.min.js
/lib/angular-resource.js
/lib/ui-bootstrap-tpls-0.14.3.js
http://app.js
but the problem in the angular code dosn’t execute.
Please could you send the project, i think its going to be easy to importe it directly, i tried to download it from the github but i didnt find it
I tried all the ways but i’ve got the same problem. if you could please send it to me i would be very grateful.
The GitHub project is here: https://github.com/DamienFremont/blog/tree/master/20151019-javaee-angularjs-bootstrap-upload_file
…You can also download the zip from https://github.com/DamienFremont/blog (or https://codeload.github.com/DamienFremont/blog/zip/master) and search for the 20151019-javaee-angularjs-bootstrap-upload_file project inside.
Hi ,
i tried to import the project exactly as yours,but imagine i’v got the same problem again i think the problem in app.js i mean theproject is already doesn’t work please try to execute it.
here’s what i’ve got without the controlers:
Picture
Upload Picture on form submit, Alerts
Choisissez un fichier File too large {{picFile.size / 1000000|number:1}}MB: max 2M
Remove
Submit
Upload Error!
Upload Successful.
Files
Multiples Files, Progress Bars
Browse Files
Files:
{{f.name}} {{f.$errorParam}}
{{f.progress}}% Complete {{f.progress}}%
{{errorMsg}}
[…] JavaEE AngularJS Bootstrap: File Upload […]