angular-upload
Version:
AngularJS Upload, Handle your uploading with style
161 lines (139 loc) • 5.42 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>File Upload Example</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="/public/bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/public/src/directives/btnUpload.min.css" />
<!--[if lt IE 9]>
<script src="/public/bower_components/es5-shim/es5-shim.min.js"></script>
<script src="/public/bower_components/json3/lib/json3.min.js"></script>
<script src="/public/bower_components/html5shiv/dist/html5shiv.js"></script>
<script src="/public/bower_components/respond/respond.min.js"></script>
<![endif]-->
<script src="/public/bower_components/angular/angular.js" charset="utf-8"></script>
<script src="/public/angular-upload.js" charset="utf-8"></script>
<script charset="utf-8">
// Define our main app
var app = angular.module('app', [
'lr.upload'
]);
app.controller('AppCtrl', function ($scope, $http) {
// App variable to show the uploaded response
$scope.responseData = undefined;
// Get initial uploads and populate list
$http({
method: 'get',
url: '/uploads?' + new Date().getTime(),
cache: false
}).then(function (response) {
$scope.uploads = response.data;
});
// Global handler for onSuccess that adds the uploaded files to the list
$scope.onGlobalSuccess = function (response) {
console.log('AppCtrl.onSuccess', response);
$scope.responseData = response.data;
$scope.uploads = $scope.uploads.concat(response.data.files);
};
});
app.controller('SimpleCtrl', function ($scope, $http) {
// Nothing special needed from the controller
});
app.controller('AdvancedMarkupCtrl', function ($scope, $http) {
// Valid mimetypes
$scope.acceptTypes = 'image/*,application/pdf';
// Data to be sent to the server with the upload request
$scope.uploadData = {
myformdata: 'hello world'
};
$scope.onUpload = function (files) {
console.log('AdvancedMarkupCtrl.onUpload', files);
};
$scope.onError = function (response) {
console.error('AdvancedMarkupCtrl.onError', response);
$scope.responseData = response.data;
};
$scope.onComplete = function (response) {
console.log('AdvancedMarkupCtrl.onComplete', response);
$scope.responseData = response.data;
};
});
// Start it up
angular.element(document).ready(function () {
angular.bootstrap(document, ['app']);
});
</script>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<div class="jumbotron">
<div class="jumbotron-body">
<h1>Angular Upload</h1>
<p>Upload files using FormData, fall back to iframe upload when FormData isn't supported</p>
<ul>
<li>Works in all browsers</li>
<li>Lightweight</li>
<li>No dependency on jQuery</li>
</ul>
</div>
</div>
<div class="alert alert-info" ng-show="responseData">
<strong>Last upload response</strong>
{{responseData | json}}
</div>
<div class="panel panel-default" ng-controller="SimpleCtrl">
<div class="panel-heading">
<h3 class="panel-title">Simple Example</h3>
</div>
<div class="panel-body">
<upload-button
class="btn btn-primary btn-upload"
url="/upload"
on-success="onGlobalSuccess(response)"
>Fileupload</upload-button>
</div>
</div>
<div class="panel panel-default" ng-controller="AdvancedMarkupCtrl">
<div class="panel-heading">
<h3 class="panel-title">Advanced Markup Example</h3>
</div>
<div class="panel-body">
<div class="checkbox">
<label for="allow-forceiframe">
<input id="allow-forceiframe" type="checkbox" ng-model="forceIframeUpload" /> Force IFrame upload
</label>
</div>
<div class="checkbox">
<label for="allow-multiple">
<input id="allow-multiple" type="checkbox" ng-model="allowMultiple" /> Allow Multiple (only works with FormData upload)
</label>
</div>
<div class="form-group">
<label for="accept-mimetypes">Allowed mimetypes. example "image/jpeg,application/pdf" the accept attribute on upload-button also allows for a javascript array of mimetypes</label>
<input id="accept-mimetypes" class="form-control" type="text" ng-model="acceptTypes" />
</div>
<upload-button
class="btn btn-primary btn-upload"
url="/upload"
param="file"
accept="acceptTypes"
multiple="allowMultiple"
force-iframe-upload="forceIframeUpload"
data="uploadData"
on-upload="onUpload(files)"
on-success="onGlobalSuccess(response)"
on-error="onError(response)"
on-complete="onComplete(response)"
>Fileupload</div>
</upload-button>
</div>
<h4 class="m-lg">Uploaded files</h4>
<div class="list-group">
<a class="list-group-item" ng-href="/uploads/{{file}}" download ng-repeat="file in uploads">{{file}}</a>
</div>
</div>
</body>
</html>