AngularJS - blueimp/jQuery-File-Upload

Sep 10, 2014 9:00:00 AM / by daniel.comas

 

 

Hoy veremos como utilizar el control blueimp/jQuery-File-Upload en AngularJS adaptándolo a nuestras necesidades, mencionar que la documentación no es muy buena, por eso hago este post!

 

Primero de todo, añadiremos las siguientes referencias, no añado las de angularjs ni jquery, etc...

 

<!-- CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/css/jquery.fileupload.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/2.15.1/css/blueimp-gallery.min.css" rel="stylesheet" />

<!-- Scripts -->
<script src="//blueimp.github.io/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js"></script>
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.iframe-transport.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.fileupload.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.fileupload-process.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.fileupload-image.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.fileupload-validate.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.fileupload-ui.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.fileupload-angular.js" type="text/javascript"></script>

<!-- Load controllers -->
<script src="app/controllers/devicesController.js"></script>
<script src="app/controllers/fileDestroyController.js"></script>

 

Ahora configuraremos los dos controladores, y la vista!

 

controllers/devicesController.js


app.controller('devicesController', ['$scope', function ($scope) {

//files list
$scope.queue = [];

var file = {};
file.id = 30;
file.url = "http://download-codeplex.sec.s-msft.com/Download?ProjectName=nodejstools&DownloadId=761175&Build=20928";
file.thumbnailUrl = "http://download-codeplex.sec.s-msft.com/Download?ProjectName=nodejstools&DownloadId=761175&Build=20928";
file.deleteUrl = "http://localhost:26264/api/DeviceImages/" + file.id;
file.deleteType = "DELETE";

//simulate the first load. we can do a server request to obtain the files loaded!
$scope.queue.push(file);

$scope.uploadOptions = {
destroy: function (e, data) {
//TO DO destroy
},
progress: function () {
//TO DO progress
},
maxNumberOfFiles: 6
};

$scope.startUpload = function () {
//upload only the files that haven't id
angular.forEach($scope.queue, function (value, key) {
if (!value.id) {
alert(value.name);
//TO DO upload
}
});
};

$scope.cancelUpload = function () {
//clear files
$scope.queue.splice(0, $scope.queue.length);
};
}]);


controllers/fileDestroyController.js


app.controller('fileDestroyController', [
'$scope', '$http',
function ($scope, $http) {
var file = $scope.file,
state;
if (file.url) {
file.$state = function () {
return state;
};
file.$destroy = function () {
state = 'pending';
return $http({
url: file.deleteUrl,
method: file.deleteType
}).then(
function () {
state = 'resolved';
$scope.clear(file);
},
function () {
state = 'rejected';
}
);
};
} else if (!file.$cancel && !file._index) {
file.$cancel = function () {
$scope.clear(file);
};
}
}
]);



views/devices.html

 

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even" style="display: none;">
<div class="slides" style="width: 1280px;"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<div id="fileupload" class="fileupload" data-file-upload='uploadOptions' data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
<div class="row">
<div class="col-md-12">
<div class="progress progress-striped active" role="progressbar" style="visibility:hidden;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="fileupload-buttonbar">
<div class="row">
<div class="col-md-12">
<span class="btn btn-danger fileinput-button btn-xs">
<i class="glyphicon glyphicon-log-in"></i>  <span>Add Files</span>
<input id="file" type="file" name="files[]" multiple="true" />
</span>
</div>
</div>
<div class="rowspace"></div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-success start btn-xs" ng-click="startUpload()">
<i class="glyphicon glyphicon-upload"></i>  <span>Start Upload</span>
</button>
</div>
</div>
<div class="rowspace"></div>
<div class="row">
<div class="col-md-12">
<button type="reset" class="btn btn-info btn-xs" ng-click="cancelUpload()">
<i class="glyphicon glyphicon-ban-circle"></i>  <span>Cancel Upload</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="fileupload-content">
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<span class="" id="LiteralMaxImages" style="color:#d9534f; font-weight:bold;">No more images</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<button type="submit" id="btn_Device_Images_DeleteAllImages" class="btn btn-info btn-xs pull-right">
<i class="glyphicon glyphicon-remove"></i>  Delete All Documents
</button>
</div>
</div>
</div>
</div>
<div class="row">
<table class="table table-striped files ng-cloak">
<tr data-ng-repeat="file in queue" data-ng-class="{'processing': file.$processing()}">
<td data-ng-switch data-on="!!file.thumbnailUrl">
<div class="preview" data-ng-switch-when="true">
<a data-ng-href="" title="" download="" data-gallery><img data-ng-src="" alt=""></a>
</div>
<div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
</td>
<td>
<p class="name" data-ng-switch data-on="!!file.url">
<span data-ng-switch-when="true" data-ng-switch data-on="!!file.thumbnailUrl">
<a data-ng-switch-when="true" data-ng-href="" title="" download="" data-gallery></a>
<a data-ng-switch-default data-ng-href="" title="" download=""></a>
</span>
<span data-ng-switch-default></span>
</p>
<strong data-ng-show="file.error" class="error text-danger"></strong>
</td>
<td>
<p class="size"></p>
<div class="progress progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-file-upload-progress="file.$progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
</td>
<td>
<button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button data-ng-controller="fileDestroyController" type="button" class="btn btn-danger destroy" data-ng-click="file.$destroy()" data-ng-hide="!file.$destroy">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</td>
</tr>
</table>
</div>
</div>


Finalmente tendremos algo parecido a esto:

Topics: AngularJS, FileUpload, JavaScript, Programación

daniel.comas

Written by daniel.comas

Lists by Topic

see all
Servicios gestionados

Categorías

Ver todas