bessemHmidi/AngularBeans file upload and LobWrapper.md

## AngularBeans file upload and LobWrapper.md

      
    Raw
  

              AngularBeans file upload and LobWrapper.md
            
          
    AngularBeans file upload and LobWrapper

  
## FileBean.java
package angularBeans.examples.fileUpload;

import java.io.Serializable;
import java.util.List;
import java.util.logging.Logger;

import javax.enterprise.context.RequestScoped;
import javax.inject.Inject;
import javax.ws.rs.GET;

import angularBeans.api.AngularBean;
import angularBeans.api.NGModel;
import angularBeans.io.FileUpload;
import angularBeans.io.LobWrapper;
import angularBeans.io.Upload;
import angularBeans.log.NGLogger;
import angularBeans.log.NGLogger.Level;
import angularBeans.util.ModelQueryFactory;

@AngularBean
@NGSessionScoped
public class FileBean implements Serializable {

	@Inject
	NGLogger logger;

	@Inject
	ModelQueryFactory modelQueryFactory;

	// for AngularBeans 1.0.1 Lob wrapper work only if it is a property of the @AngularBean (or of a nested object) and @NGModel annotated
	private LobWrapper file;

	@NGModel
	public LobWrapper getFile() {
		return file;
	}

	@FileUpload(path = "/myFile")
	public void uploadFile(List<Upload> uploads) {

		for (Upload u : uploads) {
			Logger.getLogger(FileBean.class.getSimpleName()).info(
					"uploaded -->" + u.getPart().getSubmittedFileName());

			file = new LobWrapper(u.getAsByteArray(), this);

			// u.getAsByteArray() return byte[] --> usefull with JPA @Lob for
			// example
		}

	}

	@GET
	// 1// @NGReturn(updates="file")
	public void afterUpload() {
		logger.log(Level.WARN, "upload success........");

		// OR 2//
		modelQueryFactory.get(this.getClass()).setProperty("file", file);

	}

}

## upload.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>AngularBeans file upload simple</title>

<script type="text/javascript"
	src="bower_components/angularjs/angular.js"></script>
<script type="text/javascript"
	src="bower_components/angular-file-upload/angular-file-upload.min.js"></script>
<script type="text/javascript"
	src="bower_components/sockjs/sockjs.min.js"></script>
<script type="text/javascript" src="angular-beans.js"></script>

<script type="text/javascript">

var myApp=angular.module("myApp",['angularFileUpload',"angularBeans"]);

// simple file upload example using ng-file-upload

  myApp.controller('AppController', function($scope, FileUploader, fileBean) {

        $scope.uploader = new FileUploader(

        		// url pattern must be -->  uploadEndPoint/{url_to_use}
        		{url:'uploadEndPoint/myFile'}
        		);
        $scope.uploader.onSuccessItem = function(fileItem, response, status, headers) {


        	// will call afterUpload to update the file on the $scope

        fileBean.afterUpload().then(function(){$scope.file=fileBean.file;});
  };
    });
</script>

</head>

<body ng-app="myApp">
	<div ng-controller="AppController">
		<input type="file" nv-file-select uploader="uploader" /><br />
		<ul>
			<li ng-repeat="item in uploader.queue">Name: <span
				ng-bind="item.file.name"></span><br />
				<button ng-click="item.upload()">upload</button>
			</li>
		</ul>

		<iframe ng-src="{{file}}" width="30%" height="50%" />

	</div>

</body>
</html>
	package angularBeans.examples.fileUpload;

	import java.io.Serializable;
	import java.util.List;
	import java.util.logging.Logger;

	import javax.enterprise.context.RequestScoped;
	import javax.inject.Inject;
	import javax.ws.rs.GET;

	import angularBeans.api.AngularBean;
	import angularBeans.api.NGModel;
	import angularBeans.io.FileUpload;
	import angularBeans.io.LobWrapper;
	import angularBeans.io.Upload;
	import angularBeans.log.NGLogger;
	import angularBeans.log.NGLogger.Level;
	import angularBeans.util.ModelQueryFactory;

	@AngularBean
	@NGSessionScoped
	public class FileBean implements Serializable {

	@Inject
	NGLogger logger;

	@Inject
	ModelQueryFactory modelQueryFactory;

	// for AngularBeans 1.0.1 Lob wrapper work only if it is a property of the @AngularBean (or of a nested object) and @NGModel annotated
	private LobWrapper file;

	@NGModel
	public LobWrapper getFile() {
	return file;
	}

	@FileUpload(path = "/myFile")
	public void uploadFile(List<Upload> uploads) {

	for (Upload u : uploads) {
	Logger.getLogger(FileBean.class.getSimpleName()).info(
	"uploaded -->" + u.getPart().getSubmittedFileName());

	file = new LobWrapper(u.getAsByteArray(), this);

	// u.getAsByteArray() return byte[] --> usefull with JPA @Lob for
	// example
	}

	}

	@GET
	// 1// @NGReturn(updates="file")
	public void afterUpload() {
	logger.log(Level.WARN, "upload success........");

	// OR 2//
	modelQueryFactory.get(this.getClass()).setProperty("file", file);

	}

	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="ISO-8859-1">
	<title>AngularBeans file upload simple</title>

	<script type="text/javascript"
	src="bower_components/angularjs/angular.js"></script>
	<script type="text/javascript"
	src="bower_components/angular-file-upload/angular-file-upload.min.js"></script>
	<script type="text/javascript"
	src="bower_components/sockjs/sockjs.min.js"></script>
	<script type="text/javascript" src="angular-beans.js"></script>

	<script type="text/javascript">

	var myApp=angular.module("myApp",['angularFileUpload',"angularBeans"]);

	// simple file upload example using ng-file-upload

	myApp.controller('AppController', function($scope, FileUploader, fileBean) {

	$scope.uploader = new FileUploader(

	// url pattern must be --> uploadEndPoint/{url_to_use}
	{url:'uploadEndPoint/myFile'}
	);
	$scope.uploader.onSuccessItem = function(fileItem, response, status, headers) {


	// will call afterUpload to update the file on the $scope

	fileBean.afterUpload().then(function(){$scope.file=fileBean.file;});
	};
	});
	</script>

	</head>

	<body ng-app="myApp">
	<div ng-controller="AppController">
	<input type="file" nv-file-select uploader="uploader" /><br />
	<ul>
	<li ng-repeat="item in uploader.queue">Name: <span
	ng-bind="item.file.name"></span><br />
	<button ng-click="item.upload()">upload</button>
	</li>
	</ul>

	<iframe ng-src="{{file}}" width="30%" height="50%" />

	</div>

	</body>
	</html>