Skip to content

Commit 28d6990

Browse files
blueimpblueimp
committed
Added plugins for audio & video previews. Closes blueimp#2328.
1 parent 11f70c6 commit 28d6990

10 files changed

+263
-15
lines changed

‎angularjs.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE HTML>
22
<!--
33
/*
4-
* jQuery File Upload Plugin AngularJS Demo 1.0.1
4+
* jQuery File Upload Plugin AngularJS Demo 1.1
55
* https://github.com/blueimp/jQuery-File-Upload
66
*
77
* Copyright 2013, Sebastian Tschan
@@ -17,7 +17,7 @@
1717
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
1818
<meta charset="utf-8">
1919
<title>jQuery File Upload Demo - AngularJS version</title>
20-
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images for AngularJS. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.">
20+
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for AngularJS. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.">
2121
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2222
<!-- Bootstrap CSS Toolkit styles -->
2323
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
@@ -68,7 +68,7 @@ <h2 class="lead">AngularJS version</h2>
6868
<li class="active"><a href="angularjs.html">AngularJS</a></li>
6969
</ul>
7070
<blockquote>
71-
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images for AngularJS.<br>
71+
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for AngularJS.<br>
7272
Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>
7373
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
7474
</blockquote>
@@ -200,6 +200,10 @@ <h3 class="modal-title"></h3>
200200
<script src="js/jquery.fileupload-process.js"></script>
201201
<!-- The File Upload image preview & resize plugin -->
202202
<script src="js/jquery.fileupload-image.js"></script>
203+
<!-- The File Upload audio preview plugin -->
204+
<script src="js/jquery.fileupload-audio.js"></script>
205+
<!-- The File Upload video preview plugin -->
206+
<script src="js/jquery.fileupload-video.js"></script>
203207
<!-- The File Upload validation plugin -->
204208
<script src="js/jquery.fileupload-validate.js"></script>
205209
<!-- The File Upload Angular JS module -->

‎basic-plus.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE HTML>
22
<!--
33
/*
4-
* jQuery File Upload Plugin Basic Plus Demo 1.0
4+
* jQuery File Upload Plugin Basic Plus Demo 1.1
55
* https://github.com/blueimp/jQuery-File-Upload
66
*
77
* Copyright 2013, Sebastian Tschan
@@ -17,7 +17,7 @@
1717
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
1818
<meta charset="utf-8">
1919
<title>jQuery File Upload Demo - Basic Plus version</title>
20-
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.">
20+
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.">
2121
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2222
<!-- Bootstrap CSS Toolkit styles -->
2323
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
@@ -64,7 +64,7 @@ <h2 class="lead">Basic Plus version</h2>
6464
<li><a href="angularjs.html">AngularJS</a></li>
6565
</ul>
6666
<blockquote>
67-
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images for jQuery.<br>
67+
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images, audio and video for jQuery.<br>
6868
Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>
6969
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
7070
</blockquote>
@@ -83,7 +83,7 @@ <h2 class="lead">Basic Plus version</h2>
8383
<div class="bar"></div>
8484
</div>
8585
<!-- The container for the uploaded files -->
86-
<div id="files"></div>
86+
<div id="files" class="files"></div>
8787
<br>
8888
<div class="well">
8989
<h3>Demo Notes</h3>
@@ -112,6 +112,10 @@ <h3>Demo Notes</h3>
112112
<script src="js/jquery.fileupload-process.js"></script>
113113
<!-- The File Upload image preview & resize plugin -->
114114
<script src="js/jquery.fileupload-image.js"></script>
115+
<!-- The File Upload audio preview plugin -->
116+
<script src="js/jquery.fileupload-audio.js"></script>
117+
<!-- The File Upload video preview plugin -->
118+
<script src="js/jquery.fileupload-video.js"></script>
115119
<!-- The File Upload validation plugin -->
116120
<script src="js/jquery.fileupload-validate.js"></script>
117121
<script>

‎basic.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ <h2 class="lead">Basic version</h2>
8383
<div class="bar"></div>
8484
</div>
8585
<!-- The container for the uploaded files -->
86-
<div id="files"></div>
86+
<div id="files" class="files"></div>
8787
<br>
8888
<div class="well">
8989
<h3>Demo Notes</h3>

‎css/jquery.fileupload-ui.css

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@charset "UTF-8";
22
/*
3-
* jQuery File Upload UI Plugin CSS 8.0
3+
* jQuery File Upload UI Plugin CSS 8.1
44
* https://github.com/blueimp/jQuery-File-Upload
55
*
66
* Copyright 2010, Sebastian Tschan
@@ -45,6 +45,10 @@
4545
.fileupload-processing .fileupload-loading {
4646
display: block;
4747
}
48+
.files audio,
49+
.files video {
50+
max-width: 300px;
51+
}
4852

4953
@media (max-width: 767px) {
5054
.fileupload-buttonbar .toggle,
@@ -56,4 +60,8 @@
5660
width: 80px;
5761
word-wrap: break-word;
5862
}
63+
.files audio,
64+
.files video {
65+
max-width: 80px;
66+
}
5967
}

‎index.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE HTML>
22
<!--
33
/*
4-
* jQuery File Upload Plugin Demo 8.0.1
4+
* jQuery File Upload Plugin Demo 8.1
55
* https://github.com/blueimp/jQuery-File-Upload
66
*
77
* Copyright 2010, Sebastian Tschan
@@ -17,7 +17,7 @@
1717
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
1818
<meta charset="utf-8">
1919
<title>jQuery File Upload Demo</title>
20-
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.">
20+
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.">
2121
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2222
<!-- Bootstrap CSS Toolkit styles -->
2323
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
@@ -68,7 +68,7 @@ <h2 class="lead">Basic Plus UI version</h2>
6868
<li><a href="angularjs.html">AngularJS</a></li>
6969
</ul>
7070
<blockquote>
71-
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images for jQuery.<br>
71+
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for jQuery.<br>
7272
Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>
7373
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
7474
</blockquote>
@@ -242,6 +242,10 @@ <h3 class="modal-title"></h3>
242242
<script src="js/jquery.fileupload-process.js"></script>
243243
<!-- The File Upload image preview & resize plugin -->
244244
<script src="js/jquery.fileupload-image.js"></script>
245+
<!-- The File Upload audio preview plugin -->
246+
<script src="js/jquery.fileupload-audio.js"></script>
247+
<!-- The File Upload video preview plugin -->
248+
<script src="js/jquery.fileupload-video.js"></script>
245249
<!-- The File Upload validation plugin -->
246250
<script src="js/jquery.fileupload-validate.js"></script>
247251
<!-- The File Upload user interface plugin -->

‎js/jquery.fileupload-angular.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* jQuery File Upload AngularJS Plugin 1.1.2
2+
* jQuery File Upload AngularJS Plugin 1.2
33
* https://github.com/blueimp/jQuery-File-Upload
44
*
55
* Copyright 2013, Sebastian Tschan
@@ -20,6 +20,8 @@
2020
'jquery',
2121
'angular',
2222
'./jquery.fileupload-image',
23+
'./jquery.fileupload-audio',
24+
'./jquery.fileupload-video',
2325
'./jquery.fileupload-validate'
2426
], factory);
2527
} else {

‎js/jquery.fileupload-audio.js

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
/*
2+
* jQuery File Upload Audio Preview Plugin 1.0
3+
* https://github.com/blueimp/jQuery-File-Upload
4+
*
5+
* Copyright 2013, Sebastian Tschan
6+
* https://blueimp.net
7+
*
8+
* Licensed under the MIT license:
9+
* http://www.opensource.org/licenses/MIT
10+
*/
11+
12+
/*jslint nomen: true, unparam: true, regexp: true */
13+
/*global define, window, document */
14+
15+
(function (factory) {
16+
'use strict';
17+
if (typeof define === 'function' && define.amd) {
18+
// Register as an anonymous AMD module:
19+
define([
20+
'jquery',
21+
'load-image',
22+
'./jquery.fileupload-process'
23+
], factory);
24+
} else {
25+
// Browser globals:
26+
factory(
27+
window.jQuery,
28+
window.loadImage
29+
);
30+
}
31+
}(function ($, loadImage) {
32+
'use strict';
33+
34+
// Prepend to the default processQueue:
35+
$.blueimp.fileupload.prototype.options.processQueue.unshift(
36+
{
37+
action: 'loadAudio',
38+
// Always trigger this action,
39+
// even if the previous action was rejected:
40+
always: true,
41+
fileTypes: '@loadAudioFileTypes',
42+
maxFileSize: '@loadAudioMaxFileSize',
43+
disabled: '@disableAudioLoad'
44+
},
45+
{
46+
action: 'setAudio',
47+
name: '@audioPreviewName',
48+
disabled: '@disableAudioPreview'
49+
}
50+
);
51+
52+
// The File Upload Audio Preview plugin extends the fileupload widget
53+
// with audio preview functionality:
54+
$.widget('blueimp.fileupload', $.blueimp.fileupload, {
55+
56+
options: {
57+
// The regular expression for the types of audio files to load,
58+
// matched against the file type:
59+
loadAudioFileTypes: /^audio\/.*$/
60+
},
61+
62+
_audioElement: document.createElement('audio'),
63+
64+
processActions: {
65+
66+
// Loads the audio file given via data.files and data.index
67+
// as audio element if the browser supports playing it.
68+
// Accepts the options fileTypes (regular expression)
69+
// and maxFileSize (integer) to limit the files to load:
70+
loadAudio: function (data, options) {
71+
if (options.disabled) {
72+
return data;
73+
}
74+
var that = this,
75+
file = data.files[data.index],
76+
dfd = $.Deferred(),
77+
url,
78+
audio;
79+
if (this._audioElement.canPlayType &&
80+
this._audioElement.canPlayType(file.type) &&
81+
($.type(options.maxFileSize) !== 'number' ||
82+
file.size <= options.maxFileSize) &&
83+
(!options.fileTypes ||
84+
options.fileTypes.test(file.type))) {
85+
url = loadImage.createObjectURL(file);
86+
if (url) {
87+
audio = this._audioElement.cloneNode();
88+
audio.src = url;
89+
audio.controls = true;
90+
data.audio = audio;
91+
dfd.resolveWith(that, [data]);
92+
return dfd.promise();
93+
}
94+
}
95+
dfd.rejectWith(that, [data]);
96+
return dfd.promise();
97+
},
98+
99+
// Sets the audio element as a property of the file object:
100+
setAudio: function (data, options) {
101+
if (data.audio && !options.disabled) {
102+
data.files[data.index][options.name || 'preview'] = data.audio;
103+
}
104+
return data;
105+
}
106+
107+
}
108+
109+
});
110+
111+
}));

‎js/jquery.fileupload-ui.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* jQuery File Upload User Interface Plugin 8.2.3
2+
* jQuery File Upload User Interface Plugin 8.3
33
* https://github.com/blueimp/jQuery-File-Upload
44
*
55
* Copyright 2010, Sebastian Tschan
@@ -20,6 +20,8 @@
2020
'jquery',
2121
'tmpl',
2222
'./jquery.fileupload-image',
23+
'./jquery.fileupload-audio',
24+
'./jquery.fileupload-video',
2325
'./jquery.fileupload-validate'
2426
], factory);
2527
} else {

0 commit comments

Comments
 (0)