Blame | Last modification | View Log | RSS feed
<!DOCTYPE html>
<html>
<head>
<script src="<%=request.getContextPath()%>/js/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquerytables/bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/js/jquerytables/bootstrap/css/bootstrap.css" type="text/css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquerytables/jquery-2.1.4.min.js"></script>
</head>
<body ng-app="BacoAngularApp">
<jsp:include page="/layout/themes/scripts-default.jsp"/>
<jsp:include page="/layout/headerTools.jsp"/>
<div class="container">
<h1>Exemplo de um upload de um ficheiro atavés da modal de uploads</h1>
<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 app1 = angular.module('myApp1', []);
GLOBAL_BacoAngularAppDependencies.push('myApp1');
app1.controller('myCtrl1', function($scope)
{
$scope.dados =
[
{
"nome" : "elemento1"
},
{
"nome" : "elemento2"
}
]
$scope.callbackUploadedFiles = function(filesUploadResult,token,targetElement)
{
var modelObject = BacoAngularUtils.getAngularElementModel(targetElement);
modelObject.filesUploadResult = filesUploadResult;
}
});
</script>
<div id="myApp1" ng-app="myApp1" ng-controller="myCtrl1">
<div class="col-md-6">
<div>
<div ng-repeat="item in dados">
<div>
<div class="row">
<div class="form-group">
<label class="col-md-2 control-label">Nome</label>
<div class="col-md-10">
<input type="text" class="form-control" ng-model="item.nome">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<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-10">
<img ng-if="item.filesUploadResult.uploadedFiles" width="100" ng-src="<%=request.getContextPath()%>/tmpStream/{{item.filesUploadResult.uploadedFiles[0].tmpName}}">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<pre>
{{dados | json}}
</pre>
</div>
</div>
</div>
</body>
</html>