Blame | Last modification | View Log | RSS feed
<%@taglib prefix="bacoTags" tagdir="/WEB-INF/tags" %>
<html>
<head>
</head>
<body ng-app="BacoAngularApp">
<jsp:include page="/layout/themes/scripts-default.jsp"/>
<jsp:include page="/layout/headerTools.jsp"/>
<link rel="stylesheet" href="<%=request.getContextPath()%>/js/jquery-ui-1.12.1/jquery-ui.css">
<script src="<%=request.getContextPath()%>/js/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/flora-commons/flora.resizable.css">
<script>
</script>
<div class="container">
<h1>Exemplo de um upload de um ficheiro atavés da modal de uploads</h1>
<p>
Este exemplo acrescenta ao fileupload uma posterior chamada ao controlador de
utilitarios para gravar o ficheiro no repositorio de ficheiros
</p>
<p>
Para fazer upload de um ficheiro basta introduzir um link com os parametros
de upload. O resultado é enviado a uma função de callback definida por nós.
Caso queiramos usar uma função de angular e um objeto target do modelo isso pode
ser feito à custa do atributo ng-model.
Quando a callback é chamada, o módulo de upload, envia também o elemento
relacionado com a chamada. Basta termos nesse elemento um ng-model definido.
Desta forma e como mostra o exemplo podemos ir buscar esse elemento.
</p>
<p>Seguidamente encontra-se um exemplo com duas chamadas distintas ao modulo de upload. Em
cada uma delas o elemento target é diferente e assim mantemos o track desse elemento</p>
<p>O ficheiro importado é colocado na TMP do BACO. O resutado é uma classe pt.estgp.estgweb.web.controllers.utils.FilesUploadResult
que pode ser serializada/descerializada em JSON. o nome do ficheiro é o nome na tmp do BACO</p>
<p>O resutlado pode ser acedido com a servlet de TMP's do BACO</p>
<script>
//Especifico da aplicacao
var fileUploadExample = angular.module('myApp1', []);
GLOBAL_BacoAngularAppDependencies.push('myApp1');
fileUploadExample.directive('resizable', function () {
return {
restrict: 'A',
scope: {
callback: '&onResize'
},
link: function postLink(scope, elem, attrs) {
elem.resizable();
elem.on('resize', function (evt, ui) {
scope.$apply(function() {
if (scope.callback) {
scope.callback({$evt: evt, $ui: ui });
}
})
});
}
};
});
fileUploadExample.controller('myCtrl1', function($scope)
{
$scope.dados =
[
{
"nome" : "elemento1"
},
{
"nome" : "elemento2"
}
]
$scope.resize = function(evt,ui) {
//console.log (evt,ui);
$scope.dados[0].width = ui.size.width;
$scope.dados[0].height = ui.size.height;
}
$scope.callbackUploadedFiles = function(filesUploadResult,token,targetElement)
{
var modelObject = BacoAngularUtils.getAngularElementModel(targetElement);
modelObject.filesUploadResult = filesUploadResult;
//DIFERENTE NOVO
if(modelObject.image && modelObject.image.identifier)
{
widgetCallWithActionParameters(
"<%=request.getContextPath()%>/user/json/repository.do",
"replaceRepositoryFileFromTempPrivateDomain",
{
"identifier" : modelObject.image.identifier,
"fileUploaded" : BacoJS.stringifyOrdered(filesUploadResult.uploadedFiles[0])
},
"#myApp1",
function(repositoryFile4JsonView)
{
modelObject.image = repositoryFile4JsonView;
modelObject.imageUrl = "<%=request.getContextPath()%>/repositoryStream/" + modelObject.image.identifier + "?" + new Date().getTime();
delete modelObject.filesUploadResult;
angular.element($("#myApp1")).scope().$apply();
},
function(){}
);
}
else
{
widgetCallWithActionParameters(
"<%=request.getContextPath()%>/user/json/repository.do",
"saveRepositoryFileFromTempPrivateDomain",
{
"fileUploaded" : BacoJS.stringifyOrdered(filesUploadResult.uploadedFiles[0])
},
"#myApp1",
function(repositoryFile4JsonView)
{
modelObject.image = repositoryFile4JsonView;
modelObject.imageUrl = "<%=request.getContextPath()%>/repositoryStream/" + modelObject.image.identifier + "?" + new Date().getTime();
delete modelObject.filesUploadResult;
angular.element($("#myApp1")).scope().$apply();
},
function(){}
);
}
}
});
</script>
<div id="myApp1" ng-app="myApp1" ng-controller="myCtrl1">
<div class="web-messages"></div>
<div class="col-md-6">
<div>
<ul>
<div ng-repeat="item in dados">
<div>
<div class="row">
<div class="form-group">
<label class="col-md-4 control-label">Nome</label>
<div class="col-md-8">
<input type="text" class="form-control" ng-model="item.nome">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a class="btn btn-default" href="#" ng-model="item"
data-title="Escolha Imagem"
data-showmetafields="false"
data-confirmonupload="true"
data-toggle="modal"
data-target="#filesUploadModal"
data-multiple="false"
data-allowed-extensions="jpg,png,gif"
data-callback-target-function="angular.element($('#myApp1')).scope().callbackUploadedFiles">
Carregar Ficheiros <span class="glyphicon glyphicon-upload"/>
</a>
</div>
<div class="col-md-8">
<%--<img ng-if="item.filesUploadResult.uploadedFiles" width="100" ng-src="<%=request.getContextPath()%>/tmpStream/{{item.filesUploadResult.uploadedFiles[0].tmpName}}">--%>
<div ng-if="item.image.identifier" style="width: 200px;height: 200px" resizable on-resize="resize($evt, $ui)">
<img style="width: 100%;height: 100%" ng-src="{{item.imageUrl}}">
</div>
<label ng-if="item.image.identifier">{{item.image.name}}</label>
<label ng-if="item.image.identifier">{{item.image.size/1024}} KB</label>
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
<div class="col-md-6">
<pre>
{{dados | json}}
</pre>
</div>
</div>
</div>
<div class="resize-container">
<div class="resize-drag">
Resize from any edge or corner
</div>
</div>
</body>
</html>