Skip to content

Commit

Permalink
Added video/audio preivew
Browse files Browse the repository at this point in the history
  • Loading branch information
Danial Farid authored and Danial Farid committed Apr 30, 2015
1 parent 8a1570b commit 326b736
Show file tree
Hide file tree
Showing 15 changed files with 124 additions and 115 deletions.
4 changes: 4 additions & 0 deletions demo/war/common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,4 +200,8 @@ form button {

:not(output):-moz-ui-invalid {
box-shadow: none;
}
.preview {
padding-top: 30px;
clear: both;
}
9 changes: 7 additions & 2 deletions demo/war/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ <h3>
<br/>

<button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile)">Submit</button>
<img ng-show="picFile[0] != null" ngf-thumbnail="picFile[0]" class="thumb">
<img ng-show="picFile[0] != null" ngf-src="picFile[0]" class="thumb">
<span class="progress" ng-show="picFile[0].progress >= 0">
<div style="width:{{picFile[0].progress}}%" ng-bind="picFile[0].progress + '%'"></div>
</span>
Expand Down Expand Up @@ -104,7 +104,6 @@ <h3>
<label><input type="checkbox" ng-model="multiple" >ngf-multiple (allow multiple files)</label><br/>
<label><input type="checkbox" ng-model="disabled">ng-disabled</label><br/>
<label><input type="checkbox" ng-model="allowDir">ngf-allow-dir (allow directory drop Chrome only)</label><br/>

<div class="up-buttons">
<div ngf-select ngf-drop ng-model="files" ng-model-rejected="rejFiles"
ngf-multiple="multiple" ngf-accept="accept" accept="{{acceptSelect}}"
Expand All @@ -114,6 +113,12 @@ <h3>
ngf-allow-dir="allowDir" class="drop-box" ngf-drop-available="dropAvailable">Select File
<span ng-show="dropAvailable">or Drop</span></div><br/>
</div>
<div class="preview">
<div>Preview image/audio/video:</div>
<img style="max-width:300px" ngf-src="files[0]" ng-show="files[0].type.indexOf('image') > -1">
<audio controls ngf-src="files[0]" ng-show="files[0].type.indexOf('audio') > -1"></audio>
<video controls ngf-src="files[0]" ng-show="files[0].type.indexOf('video') > -1"></video>
</div>
</fieldset>
<br/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion demo/war/js/FileAPI.min.js
View file

Large diffs are not rendered by default.

52 changes: 26 additions & 26 deletions demo/war/js/ng-file-upload-all.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**!
* AngularJS file upload/drop directive and service with progress and abort
* @author Danial <danial.farid@gmail.com>
* @version 4.0.4
* @version 4.1.0
*/
(function () {

Expand All @@ -28,7 +28,7 @@ if (window.XMLHttpRequest && !window.XMLHttpRequest.__isFileAPIShim) {

var ngFileUpload = angular.module('ngFileUpload', []);

ngFileUpload.version = '4.0.4';
ngFileUpload.version = '4.1.0';
ngFileUpload.service('Upload', ['$http', '$q', '$timeout', function ($http, $q, $timeout) {
function sendHttp(config) {
config.method = config.method || 'POST';
Expand Down Expand Up @@ -508,29 +508,29 @@ function linkDrop(scope, elem, attr, ngModel, $parse, $timeout, $location) {
}
}

ngFileUpload.directive('ngfThumbnail', ['$parse', '$timeout', function ($parse, $timeout) {
return {
restrict: 'AE',
link: function (scope, elem, attr, file) {
if (window.FileReader) {
scope.$watch(attr.ngfThumbnail, function(file) {
if (file && file.type.indexOf('image') > -1) {
$timeout(function() {
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(e) {
$timeout(function() {
elem.attr('src', e.target.result);
});
}
});
} else {
elem.attr('src', '');
}
});
}
}
}
ngFileUpload.directive('ngfSrc', ['$parse', '$timeout', function ($parse, $timeout) {
return {
restrict: 'AE',
link: function (scope, elem, attr, file) {
if (window.FileReader) {
scope.$watch(attr.ngfSrc, function(file) {
if (file) {
$timeout(function() {
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(e) {
$timeout(function() {
elem.attr('src', e.target.result);
});
}
});
} else {
elem.attr('src', '');
}
});
}
}
}
}]);

function dropAvailable() {
Expand Down Expand Up @@ -608,7 +608,7 @@ function globStringToRegex(str) {
* AngularJS file upload/drop directive and service with progress and abort
* FileAPI Flash shim for old browsers not supporting FormData
* @author Danial <danial.farid@gmail.com>
* @version 4.0.4
* @version 4.1.0
*/

(function() {
Expand Down
46 changes: 23 additions & 23 deletions demo/war/js/ng-file-upload.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -508,29 +508,29 @@ function linkDrop(scope, elem, attr, ngModel, $parse, $timeout, $location) {
}
}

ngFileUpload.directive('ngfThumbnail', ['$parse', '$timeout', function ($parse, $timeout) {
return {
restrict: 'AE',
link: function (scope, elem, attr, file) {
if (window.FileReader) {
scope.$watch(attr.ngfThumbnail, function(file) {
if (file && file.type.indexOf('image') > -1) {
$timeout(function() {
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(e) {
$timeout(function() {
elem.attr('src', e.target.result);
});
}
});
} else {
elem.attr('src', '');
}
});
}
}
}
ngFileUpload.directive('ngfSrc', ['$parse', '$timeout', function ($parse, $timeout) {
return {
restrict: 'AE',
link: function (scope, elem, attr, file) {
if (window.FileReader) {
scope.$watch(attr.ngfSrc, function(file) {
if (file) {
$timeout(function() {
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(e) {
$timeout(function() {
elem.attr('src', e.target.result);
});
}
});
} else {
elem.attr('src', '');
}
});
}
}
}
}]);

function dropAvailable() {
Expand Down
6 changes: 3 additions & 3 deletions demo/war/js/upload.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@


var app = angular.module('fileUpload', [ 'ngFileUpload' ]);
var version = '4.0.0';
var version = '4.1.0';

app.controller('MyCtrl', [ '$scope', '$http', '$timeout', '$compile', 'Upload', function($scope, $http, $timeout, $compile, Upload) {
$scope.usingFlash = FileAPI && FileAPI.upload != null;
Expand Down Expand Up @@ -221,8 +221,8 @@ app.controller('MyCtrl', [ '$scope', '$http', '$timeout', '$compile', 'Upload',

$timeout(function(){
$scope.capture = localStorage.getItem('capture'+ version) || 'camera';
$scope.accept = localStorage.getItem('accept'+ version) || 'image/*';
$scope.acceptSelect = localStorage.getItem('acceptSelect'+ version) || 'image/*';
$scope.accept = localStorage.getItem('accept'+ version) || 'image/*,audio/*,video/*';
$scope.acceptSelect = localStorage.getItem('acceptSelect'+ version) || 'image/*,audio/*,video/*';
$scope.disabled = localStorage.getItem('disabled'+ version) == 'true' || false;
$scope.multiple = localStorage.getItem('multiple'+ version) == 'true' || false;
$scope.allowDir = localStorage.getItem('allowDir'+ version) == 'true' || true;
Expand Down
2 changes: 1 addition & 1 deletion dist/FileAPI.min.js
View file

Large diffs are not rendered by default.

52 changes: 26 additions & 26 deletions dist/ng-file-upload-all.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**!
* AngularJS file upload/drop directive and service with progress and abort
* @author Danial <danial.farid@gmail.com>
* @version 4.0.4
* @version 4.1.0
*/
(function () {

Expand All @@ -28,7 +28,7 @@ if (window.XMLHttpRequest && !window.XMLHttpRequest.__isFileAPIShim) {

var ngFileUpload = angular.module('ngFileUpload', []);

ngFileUpload.version = '4.0.4';
ngFileUpload.version = '4.1.0';
ngFileUpload.service('Upload', ['$http', '$q', '$timeout', function ($http, $q, $timeout) {
function sendHttp(config) {
config.method = config.method || 'POST';
Expand Down Expand Up @@ -508,29 +508,29 @@ function linkDrop(scope, elem, attr, ngModel, $parse, $timeout, $location) {
}
}

ngFileUpload.directive('ngfThumbnail', ['$parse', '$timeout', function ($parse, $timeout) {
return {
restrict: 'AE',
link: function (scope, elem, attr, file) {
if (window.FileReader) {
scope.$watch(attr.ngfThumbnail, function(file) {
if (file && file.type.indexOf('image') > -1) {
$timeout(function() {
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(e) {
$timeout(function() {
elem.attr('src', e.target.result);
});
}
});
} else {
elem.attr('src', '');
}
});
}
}
}
ngFileUpload.directive('ngfSrc', ['$parse', '$timeout', function ($parse, $timeout) {
return {
restrict: 'AE',
link: function (scope, elem, attr, file) {
if (window.FileReader) {
scope.$watch(attr.ngfSrc, function(file) {
if (file) {
$timeout(function() {
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function(e) {
$timeout(function() {
elem.attr('src', e.target.result);
});
}
});
} else {
elem.attr('src', '');
}
});
}
}
}
}]);

function dropAvailable() {
Expand Down Expand Up @@ -608,7 +608,7 @@ function globStringToRegex(str) {
* AngularJS file upload/drop directive and service with progress and abort
* FileAPI Flash shim for old browsers not supporting FormData
* @author Danial <danial.farid@gmail.com>
* @version 4.0.4
* @version 4.1.0
*/

(function() {
Expand Down
Loading

0 comments on commit 326b736

Please sign in to comment.