Skip to content

Commit

Permalink
Added: the without-bootstrap example
Browse files Browse the repository at this point in the history
  • Loading branch information
nerv committed Jan 15, 2014
1 parent be0f71f commit a5118cb
Show file tree
Hide file tree
Showing 9 changed files with 357 additions and 4 deletions.
6 changes: 4 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,9 @@
When files are selected or dropped into the component, one or more filters are applied. Files which pass all filters are added to the queue and are ready to be uploaded.

## Demos
1. [Base example](http://nervgh.github.io/pages/angular-file-upload/examples/simple)
1. [Simple example](http://nervgh.github.io/pages/angular-file-upload/examples/simple)
2. [Uploads only images (with canvas preview)](http://nervgh.github.io/pages/angular-file-upload/examples/image-preview)
3. [Without bootstrap example](http://nervgh.github.io/pages/angular-file-upload/examples/without-bootstrap)

## Requires

Expand Down Expand Up @@ -167,8 +168,9 @@ uploader.queue.push({
В общих чертах работа модуля выглядит так: директивы "ловят" файлы и добавляют их в очередь, если те прошли фильтры, после чего "загрузчик файлов" может ими (элементами очереди) манипулировать.

## Примеры
1. [Base example](http://nervgh.github.io/pages/angular-file-upload/examples/simple)
1. [Simple example](http://nervgh.github.io/pages/angular-file-upload/examples/simple)
2. [Uploads only images (with canvas preview)](http://nervgh.github.io/pages/angular-file-upload/examples/image-preview)
3. [Without bootstrap example](http://nervgh.github.io/pages/angular-file-upload/examples/without-bootstrap)

## Требует
- [AngularJS](https://github.com/angular/angular.js) фреймворк
Expand Down
2 changes: 1 addition & 1 deletion examples/image-preview/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Demos <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="../simple">Simple example</a></li>
<li class="divider"></li>
<li class="active"><a href="#">Uploads only images (with canvas preview)</a></li>
<li><a href="../without-bootstrap">Without bootstrap example</a></li>
</ul>
</li>
<li><a href="https://github.com/nervgh/angular-file-upload">View on Github</a></li>
Expand Down
2 changes: 1 addition & 1 deletion examples/simple/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Demos <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="active"><a href="#">Simple example</a></li>
<li class="divider"></li>
<li><a href="../image-preview">Uploads only images (with canvas preview)</a></li>
<li><a href="../without-bootstrap">Without bootstrap example</a></li>
</ul>
</li>
<li><a href="https://github.com/nervgh/angular-file-upload">View on Github</a></li>
Expand Down
73 changes: 73 additions & 0 deletions examples/without-bootstrap/controllers.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
angular.module('app', ['angularFileUpload'])

// The example of the full functionality
.controller('TestController', function ($scope, $fileUploader) {
'use strict';

// create a uploader with options
var uploader = $scope.uploader = $fileUploader.create({
scope: $scope, // to automatically update the html. Default: $rootScope
url: 'upload.php'
});

// ADDING FILTERS

uploader.filters.push(function(item /*{File|HTMLInput}*/) { // user filter
console.info('filter1');
return true;
});

// REGISTER HANDLERS

uploader.bind('afteraddingfile', function (event, item) {
console.info('After adding a file', item);
});

uploader.bind('afteraddingall', function (event, items) {
console.info('After adding all files', items);
});

uploader.bind('beforeupload', function (event, item) {
console.info('Before upload', item);
});

uploader.bind('progress', function (event, item, progress) {
console.info('Progress: ' + progress, item);
});

uploader.bind('success', function (event, xhr, item, response) {
console.info('Success', xhr, item, response);
});

uploader.bind('cancel', function (event, xhr, item) {
console.info('Cancel', xhr, item);
});

uploader.bind('error', function (event, xhr, item, response) {
console.info('Error', xhr, item, response);
});

uploader.bind('complete', function (event, xhr, item, response) {
console.info('Complete', xhr, item, response);
});

uploader.bind('progressall', function (event, progress) {
console.info('Total progress: ' + progress);
});

uploader.bind('completeall', function (event, items) {
console.info('Complete all', items);
});


// -------------------------------


var controller = $scope.controller = {
isImage: function(item) {
var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
}
};

});
62 changes: 62 additions & 0 deletions examples/without-bootstrap/directives.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
'use strict';


angular


.module('app')


// Angular File Upload module does not include this directive
// Only for example


/**
* The ng-thumb directive
* @author: nerv
* @version: 0.1.2, 2014-01-09
*/
.directive('ngThumb', ['$window', function($window) {
var helper = {
support: !!($window.FileReader && $window.CanvasRenderingContext2D),
isFile: function(item) {
return angular.isObject(item) && item instanceof $window.File;
},
isImage: function(file) {
var type = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|';
return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
}
};

return {
restrict: 'A',
template: '<canvas/>',
link: function(scope, element, attributes) {
if (!helper.support) return;

var params = scope.$eval(attributes.ngThumb);

if (!helper.isFile(params.file)) return;
if (!helper.isImage(params.file)) return;

var canvas = element.find('canvas');
var reader = new FileReader();

reader.onload = onLoadFile;
reader.readAsDataURL(params.file);

function onLoadFile(event) {
var img = new Image();
img.onload = onLoadImage;
img.src = event.target.result;
}

function onLoadImage() {
var width = params.width || this.width / this.height * params.height;
var height = params.height || this.height / this.width * params.width;
canvas.attr({ width: width, height: height });
canvas[0].getContext('2d').drawImage(this, 0, 0, width, height);
}
}
};
}]);
92 changes: 92 additions & 0 deletions examples/without-bootstrap/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<!DOCTYPE HTML>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->
<head>
<title>Without bootstrap example</title>
<link rel="stylesheet" href="style.css" />

<!-- ES5 shim for old browsers -->
<script src="http://nervgh.github.io/js/es5-shim.min.js"></script>

<!-- Fix for IE<9 in iframe mode -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="../../angular-file-upload.js"></script>
<script src="controllers.js"></script>
<!--thumbnails for images-->
<script src="directives.js"></script>
</head>

<!-- 1. ng-file-drop | ng-file-drop="options" -->
<body ng-controller="TestController" ng-file-drop>

<h1>Without bootstrap example</h1>

<h2>Examples</h2>
<ul>
<li><a href="../simple">Simple example</a></li>
<li><a href="../image-preview">Uploads only images (with canvas preview)</a></li>
<li><a href="#">Without bootstrap</a></li>
</ul>
<a href="https://github.com/nervgh/angular-file-upload">Download / Repository</a>
<br />
<br />

<!-- 3. ng-file-over | ng-file-over="className" -->
<div ng-show="uploader.isHTML5">
<div class="over-zone zone" ng-file-over style="float: left">
Base drop zone indication
</div>
<!-- Example: ng-file-drop | ng-file-drop="options" -->
<div ng-file-drop="{ url: '/foo' }" ng-file-over="other-over-zone" class="other-drop-zone zone" style="float: right">
One more drop zone with its own settings (and indication)
</div>
<div style="clear: both"></div>
</div>

<br />

<!-- 2. ng-file-select | ng-file-select="options" -->
<input ng-file-select type="file" multiple />

<h2>The queue. Length: {{ uploader.queue.length }}</h2>
<ul>
<li ng-repeat="item in uploader.queue">
<div>Name: {{ item.file.name }}</div>
<div>Size: {{ item.file.size/1024/1024|number:2 }} Mb</div>
<div ng-show="uploader.isHTML5">
Progress: {{ item.progress }}
<div class="item-progress-box">
<div class="item-progress" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</div>
<div ng-show="controller.isImage(item.file)">
Thumbnail (only images):
<!-- Image preview -->
<!--auto height-->
<!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->
<!--auto width-->
<div ng-show="uploader.isHTML5" ng-thumb="{ file: item.file, height: 100 }"></div>
<!--fixed width and height -->
<!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>-->
</div>
<div>
<button ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">Upload</button>
<button ng-click="item.cancel()" ng-disabled="!item.isUploading">Cancel</button>
<button ng-click="item.remove()">Remove</button>
</div>
</li>
</ul>
<div>
<div>
Total progress: {{ uploader.progress }}
<div class="total-progress-box">
<div class="total-progress" ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<button ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">Upload all</button>
<button ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">Cancel all</button>
<button ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">Remove all</button>
</div>
</body>
</html>
103 changes: 103 additions & 0 deletions examples/without-bootstrap/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
html, body {
height: 100%;
}

h1, h2 {
background-color: steelblue;
font-family: Tahoma, serif;
color: white;
padding: 10px;
letter-spacing: 1px;
}

h1 {
font-size: 1.3em;
}

h2 {
font-size: 1.2em;
}

canvas {
background-color: #f3f3f3;
-webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
-moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
box-shadow: 3px 3px 3px 0 #e3e3e3;
border: 1px solid #c3c3c3;
height: 100px;
margin: 6px 0 0 6px;
}

.ng-file-over {
background-color: #FFBEA3;
}

.other-drop-zone {
border: 2px dashed burlywood;
padding: 4px;
height: 100px;
}

.other-over-zone {
background-color: moccasin;
}

.bg {
background-color: lightgreen;
}

.over-zone {
border: 2px dashed lavender;
height: 100px;
padding: 4px;
}

.item-progress-box {
height: 20px;
margin-top: -20px;
margin-left: 60px;
margin-right: 10px;
}

.item-progress {
background-color: #90B8DA;
height: 100%;
width: 0;
}

.total-progress-box {
height: 20px;
margin-top: -20px;
margin-left: 90px;
margin-right: 10px;
}

.total-progress {
background-color: #90B8DA;
height: 100%;
width: 0;
}

.box {
margin: 20px;
}

.progress {
background-color: mediumpurple;
height: 20px;
}

.uploaded {
background-color: lightgreen;
height: 20px;
width: 100px;
}

ul > li:nth-child(odd) {
background-color: #f5f5f5;
margin: 2px;
}

.zone {
width: 49%;
}
Loading

0 comments on commit a5118cb

Please sign in to comment.