Skip to content

Commit

Permalink
Added: the example 2: Uploads only images (with canvas preview)
Browse files Browse the repository at this point in the history
  • Loading branch information
nerv committed Jan 7, 2014
1 parent 46b2750 commit 5dd4aa6
Showing 5 changed files with 232 additions and 0 deletions.
23 changes: 23 additions & 0 deletions examples/image-preview/controllers.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
'use strict';


angular


.module('app', ['angularFileUpload'])


.controller('TestController', function ($scope, $fileUploader) {
// Creates a uploader
var uploader = $scope.uploader = $fileUploader.create({scope: $scope});

// Sets url
uploader.url = 'upload.php';

// Registers a filter: images only
uploader.filters.push(function(file) {
if (!uploader.isHTML5) return true; // old browsers
var type = file.type.slice(file.type.lastIndexOf('/') + 1);
return '|jpg|png|jpeg|bmp|'.indexOf('|' + type + '|') !== -1;
});
});
46 changes: 46 additions & 0 deletions examples/image-preview/directives.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
'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, 2014-01-07
*/
.directive('ngThumb', ['$fileUploader', function($fileUploader) {
return {
template: '<canvas/>',
link: function(scope, element, attributes) {
if (!$fileUploader.isHTML5) return;

var params = scope.$eval(attributes.ngThumb);
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);
}
}
};
}]);
142 changes: 142 additions & 0 deletions examples/image-preview/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<!DOCTYPE html>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->

<head>
<title>Uploads only images (with canvas preview)</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

<!-- Fix for old browsers -->
<script src="../bower_components/es5-shim/es5-shim.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<!--<script src="../bower_components/angular/angular.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>
<script src="directives.js"></script>

<style>
.my-drop-zone { border: dotted 3px lightgray; }
.ng-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
.another-file-over-class { border: dotted 3px green; }

html, body { height: 100%; }
</style>

</head>

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

<div class="container">

<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="https://github.com/nervgh/angular-file-upload">Angular File Upload</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Demo</a></li>
<li><a href="https://github.com/nervgh/angular-file-upload">View on Github</a></li>
<li><a href="https://raw.github.com/nervgh/angular-file-upload/master/angular-file-upload.min.js">Download</a></li>
</ul>
</div>
</div>

<div class="row">

<div class="col-md-3">

<h3>Select files</h3>

<div ng-show="uploader.isHTML5">
<!-- 3. ng-file-over | ng-file-over="className" -->
<div class="well my-drop-zone" ng-file-over>
Base drop zone
</div>

<!-- Example: ng-file-drop | ng-file-drop="options" -->
<div class="well my-drop-zone" ng-file-drop="{ url: '/foo' }" ng-file-over="another-file-over-class">
Another drop zone with its own settings
</div>
</div>

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

</div>

<div class="col-md-9" style="margin-bottom: 40px">
<h2>Uploads only images (with canvas preview)</h2>
<h3>The queue</h3>
<p>Queue length: {{ uploader.queue.length }}</p>

<table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th ng-show="uploader.isHTML5">Size</th>
<th ng-show="uploader.isHTML5">Progress</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in uploader.queue">
<td>
<strong>{{ item.file.name }}</strong>
<!-- image preview -->
<div ng-thumb="{ file: item.file, width: 100 }"></div>
</td>
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
<td ng-show="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
</tr>
</tbody>
</table>

<div>
<p>
Queue progress:
<div class="progress" style="">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</p>
<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all
</button>
<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
</button>
<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span> Remove all
</button>
</div>

</div>

</div>

</div>

</body>
</html>
21 changes: 21 additions & 0 deletions examples/image-preview/upload.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<?php

if ( !empty( $_FILES ) ) {

$tempPath = $_FILES[ 'file' ][ 'tmp_name' ];
$uploadPath = dirname( __FILE__ ) . '\uploads\\' . $_FILES[ 'file' ][ 'name' ];

move_uploaded_file( $tempPath, $uploadPath );

$answer = array( 'answer' => 'File transfer completed' );
$json = json_encode( $answer );

echo $json;

} else {

echo 'No files';

}

?>
Empty file added examples/image-preview/uploads/gap.txt
View file
Empty file.

0 comments on commit 5dd4aa6

Please sign in to comment.