medvedych/fotostore
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'master' of github.com:alpha6/fotostore

Browse source
This commit is contained in:
Denis Fedoseev 2018-09-09 16:43:19 +03:00
commit 140a179a8b
50 changed files with 877 additions and 3616 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
cpanfile
View file

@ -1,4 +1,4 @@
requires 'Mojolicious'; requires 'Mojolicious', '>= 7.88';
requires 'Mojolicious::Plugin::Authentication'; requires 'Mojolicious::Plugin::Authentication';
requires 'Imager'; requires 'Imager';
requires 'File::Basename'; requires 'File::Basename';

146
fotostore.pl
View file

@ -4,11 +4,14 @@ use warnings;
use lib 'lib'; use lib 'lib';
use Mojolicious::Lite; # app, get, post is exported. use Mojolicious::Lite; # app, get, post is exported.
use Mojo::Promise;
use Mojo::IOLoop;
use File::Basename 'basename'; use File::Basename qw/basename fileparse/;
use File::Path 'mkpath'; use File::Path 'mkpath';
use File::Spec 'catfile'; use File::Spec 'catfile';
use Cwd; use Cwd;
use POSIX;
use Imager; use Imager;
use DBI; use DBI;
@ -43,6 +46,8 @@ my $sha = Digest::SHA->new('sha256');
# Directory to save image files # Directory to save image files
my $IMAGE_DIR = File::Spec->catfile( getcwd(), 'public', $IMAGE_BASE ); my $IMAGE_DIR = File::Spec->catfile( getcwd(), 'public', $IMAGE_BASE );
my $log = Mojo::Log->new();
plugin 'authentication', { plugin 'authentication', {
autoload_user => 1, autoload_user => 1,
load_user => sub { load_user => sub {
@ -92,10 +97,10 @@ get '/register' => ( authenticated => 0 ) => sub {
post '/register' => ( authenticated => 0 ) => sub { post '/register' => ( authenticated => 0 ) => sub {
my $self = shift; my $self = shift;
my $username = $self->req->param('username'); my $username = $self->req->param('username') || "";
my $password = $self->req->param('password'); my $password = $self->req->param('password') || "";
my $fullname = $self->req->param('fullname'); my $fullname = $self->req->param('fullname') || "";
my $invite = $self->req->param('invite'); my $invite = $self->req->param('invite') || "";
if ( $invite eq $config->{'invite_code'} ) { if ( $invite eq $config->{'invite_code'} ) {
@ -141,10 +146,21 @@ get '/' => sub {
get '/get_images' => ( authenticated => 1 ) => sub { get '/get_images' => ( authenticated => 1 ) => sub {
my $self = shift; my $self = shift;
#Getting current user
my $current_user = $self->current_user; my $current_user = $self->current_user;
my $user_id = $current_user->{'user_id'}; my $user_id = $current_user->{'user_id'};
my $files_list = $db->get_files( $current_user->{'user_id'}, 20 ); #Getting images list with paging
my $page = $self->param('page') || 1;
my $items = $self->param('per-page') || 20;
if (($page !~ /^\d+$/) || ($page <= 1)) { $page = 1}
if (($items !~ /^\d+$/) || ($items <= 0)) { $items = 20}
# process images list
my $req_result = $db->get_files( $current_user->{'user_id'}, $items , $page);
my $files_list = $req_result->{'images_list'};
my $pages_count = ceil($req_result->{'total_rows'}/$items);
my $thumbs_dir = my $thumbs_dir =
File::Spec->catfile( $IMAGE_DIR, $current_user->{'user_id'}, File::Spec->catfile( $IMAGE_DIR, $current_user->{'user_id'},
@ -157,6 +173,7 @@ get '/get_images' => ( authenticated => 1 ) => sub {
for my $img_item (@$files_list) { for my $img_item (@$files_list) {
my $file = $img_item->{'file_name'}; my $file = $img_item->{'file_name'};
my $img_hash = {}; my $img_hash = {};
$img_hash->{'id'} = $img_item->{'file_id'};
$img_hash->{'filename'} = $img_item->{'original_filename'}; $img_hash->{'filename'} = $img_item->{'original_filename'};
$img_hash->{'original_url'} = $img_hash->{'original_url'} =
File::Spec->catfile( '/', $IMAGE_BASE, $current_user->{'user_id'}, File::Spec->catfile( '/', $IMAGE_BASE, $current_user->{'user_id'},
@ -185,10 +202,14 @@ get '/get_images' => ( authenticated => 1 ) => sub {
$img_hash->{'scales'} = \@scaled; $img_hash->{'scales'} = \@scaled;
push( @$images, $img_hash ); push( @$images, $img_hash );
} }
my $reply_data = { current_page => $page, items_per_page => $items, pages_count => $pages_count, images_list => $images };
# Render # Render
return $self->render( json => $images ); return $self->render( json => $reply_data );
}; };
# Upload image file # Upload image file
@ -201,7 +222,6 @@ post '/upload' => ( authenticated => 1 ) => sub {
my $user = $self->current_user(); my $user = $self->current_user();
my $user_id = $user->{'user_id'}; my $user_id = $user->{'user_id'};
$self->app->log->debug( "user:" . Dumper($user) );
# Not upload # Not upload
unless ($image) { unless ($image) {
@ -213,7 +233,11 @@ post '/upload' => ( authenticated => 1 ) => sub {
# Check file type # Check file type
my $image_type = $image->headers->content_type; my $image_type = $image->headers->content_type;
my %valid_types = map { $_ => 1 } qw(image/gif image/jpeg image/png); my %valid_types = (
'image/gif' => 'gif',
'image/jpeg' => 'jpg',
'image/png' => 'png'
);
# Content type is wrong # Content type is wrong
unless ( $valid_types{$image_type} ) { unless ( $valid_types{$image_type} ) {
@ -223,13 +247,7 @@ post '/upload' => ( authenticated => 1 ) => sub {
); );
} }
# Extention my $ext = $valid_types{$image_type};
my $exts = {
'image/gif' => 'gif',
'image/jpeg' => 'jpg',
'image/png' => 'png'
};
my $ext = $exts->{$image_type};
# Image file # Image file
my $filename = sprintf( '%s.%s', create_hash( $image->slurp() ), $ext ); my $filename = sprintf( '%s.%s', create_hash( $image->slurp() ), $ext );
@ -239,14 +257,63 @@ post '/upload' => ( authenticated => 1 ) => sub {
# Save to file # Save to file
$image->move_to($image_file); $image->move_to($image_file);
my $promise = store_image($image_file, $image->filename, $user_id);
#TODO: add errors handling
Mojo::Promise->all($promise)->then(sub {
$self->render(
json => {
files => [
{
name => $image->filename,
size => $image->size,
url => sprintf( '/images/orig/%s', $filename ),
thumbnailUrl => sprintf( '/images/200/%s', $filename ),
}
]
}
);
})->wait;
} => 'upload';
sub create_hash {
my $data_to_hash = shift;
$sha->add($data_to_hash);
return $sha->hexdigest();
}
sub get_path {
my ( $user_id, $size ) = @_;
my $path = File::Spec->catfile( $IMAGE_DIR, $user_id, $size );
unless ( -d $path ) {
mkpath $path or die "Cannot create directory: $path";
}
return $path;
}
sub store_image {
my $image_file = shift;
my $original_filename = shift;
my $user_id = shift;
my $promise = Mojo::Promise->new;
# Process and store uploaded file in a separate process
Mojo::IOLoop->subprocess(
sub {
my $subprocess = shift;
my $filename = fileparse($image_file);
my $imager = Imager->new(); my $imager = Imager->new();
$imager->read( file => $image_file ) or die $imager->errstr; $imager->read( file => $image_file ) or die $imager->errstr;
#http://sylvana.net/jpegcrop/exif_orientation.html #http://sylvana.net/jpegcrop/exif_orientation.html
#http://myjaphoo.de/docs/exifidentifiers.html #http://myjaphoo.de/docs/exifidentifiers.html
my $rotation_angle = $imager->tags( name => "exif_orientation" ) || 1; my $rotation_angle = $imager->tags( name => "exif_orientation" ) || 1;
$self->app->log->info( $log->debug(
"Rotation angle [" . $rotation_angle . "] [" . $image->filename . "]" ); "Rotation angle [" . $rotation_angle . "]" );
if ( $rotation_angle == 3 ) { if ( $rotation_angle == 3 ) {
$imager = $imager->rotate( degrees => 180 ); $imager = $imager->rotate( degrees => 180 );
@ -271,43 +338,24 @@ post '/upload' => ( authenticated => 1 ) => sub {
or die $scaled->errstr; or die $scaled->errstr;
} }
if ( !$db->add_file( $user->{'user_id'}, $filename, $image->filename ) ) { if ( !$db->add_file( $user_id, $filename, $original_filename ) ) {
#TODO: Send error msg $log->error(sprintf('Can\'t save file %s', $filename));
die sprintf('Can\'t save file %s', $filename);
} }
$self->render( return $filename;
json => { },
files => [ sub {
{ my ($subprocess, $err, @results) = @_;
name => $image->filename, $log->error("Subprocess error: $err") and return if $err;
size => $image->size, $promise->reject("Subprocess error: $err @results") if $err;
url => sprintf( '/images/orig/%s', $filename ), $promise->resolve(1, @results);
thumbnailUrl => sprintf( '/images/200/%s', $filename ),
}
]
} }
); );
# Redirect to top page return $promise;
# $self->redirect_to('index');
} => 'upload';
sub create_hash {
my $data_to_hash = shift;
$sha->add($data_to_hash);
return $sha->hexdigest();
}
sub get_path {
my ( $user_id, $size ) = @_;
my $path = File::Spec->catfile( $IMAGE_DIR, $user_id, $size );
unless ( -d $path ) {
mkpath $path or die "Cannot create directory: $path";
}
return $path;
} }
Mojo::IOLoop->start;
app->start; app->start;

14
lib/FotoStore/DB.pm
View file

@ -1,5 +1,6 @@
package FotoStore::DB; package FotoStore::DB;
use v5.20;
use strict; use strict;
use warnings; use warnings;
@ -59,8 +60,17 @@ sub add_file($self, $user_id, $filename, $original_filename) {
return $rows; return $rows;
} }
sub get_files($self, $user_id, $count=20, $start_at=0) { sub get_files($self, $user_id, $items_count=20, $page=1) {
return $self->{'dbh'}->selectall_arrayref(q~select * from images where owner_id=? order by created_time desc~, { Slice => {} }, $user_id );
# Calculate offset
# Pages in UI starts from 1, but here we need it to start from 0
$page = 1 if ($page < 1);
my $start_at = --$page * $items_count;
my ($rows_count) = $self->{'dbh'}->selectrow_array(q~select count(*) from images where owner_id=? ~, undef , $user_id);
my $images_list = $self->{'dbh'}->selectall_arrayref(q~select * from images where owner_id=? order by created_time desc LIMIT ? OFFSET ? ~, { Slice => {} }, $user_id, $items_count, $start_at );
return { total_rows => $rows_count, images_list => $images_list };
} }
1; 1;

23
public/css/main.css
View file

@ -15,6 +15,15 @@
padding: 5px; padding: 5px;
} }
.copy-img:before {
content: url(/img/copy_icon.png);
width: 32px;
height: 32px;
overflow: hidden;
cursor: pointer;
position: relative;
}
.copy-img { .copy-img {
content: url(/img/copy_icon.png); content: url(/img/copy_icon.png);
width: 32px; width: 32px;
@ -24,6 +33,15 @@
position: relative; position: relative;
} }
.copy-bb-more:before {
content: url(/img/more_icon.png);
width: 32px;
height: 32px;
overflow: hidden;
cursor: pointer;
position: relative;
}
.copy-bb-more { .copy-bb-more {
content: url(/img/more_icon.png); content: url(/img/more_icon.png);
width: 32px; width: 32px;
@ -38,3 +56,8 @@
padding-right: 5px; padding-right: 5px;
position: relative; position: relative;
} }
.upload-form {
height: 100px;
padding: 10px;
}

3
public/file_uploader/.gitignore vendored
View file

@ -1,3 +0,0 @@
.DS_Store
*.pyc
node_modules

81
public/file_uploader/.jshintrc
View file

@ -1,81 +0,0 @@
{
"bitwise" : true, // true: Prohibit bitwise operators (&, |, ^, etc.)
"camelcase" : true, // true: Identifiers must be in camelCase
"curly" : true, // true: Require {} for every new block or scope
"eqeqeq" : true, // true: Require triple equals (===) for comparison
"forin" : true, // true: Require filtering for..in loops with obj.hasOwnProperty()
"immed" : true, // true: Require immediate invocations to be wrapped in parens
// e.g. `(function () { } ());`
"indent" : 4, // {int} Number of spaces to use for indentation
"latedef" : true, // true: Require variables/functions to be defined before being used
"newcap" : true, // true: Require capitalization of all constructor functions e.g. `new F()`
"noarg" : true, // true: Prohibit use of `arguments.caller` and `arguments.callee`
"noempty" : true, // true: Prohibit use of empty blocks
"nonew" : true, // true: Prohibit use of constructors for side-effects (without assignment)
"plusplus" : false, // true: Prohibit use of `++` & `--`
"quotmark" : "single", // Quotation mark consistency:
// false : do nothing (default)
// true : ensure whatever is used is consistent
// "single" : require single quotes
// "double" : require double quotes
"undef" : true, // true: Require all non-global variables to be declared (prevents global leaks)
"unused" : true, // true: Require all defined variables be used
"strict" : true, // true: Requires all functions run in ES5 Strict Mode
"trailing" : true, // true: Prohibit trailing whitespaces
"maxparams" : false, // {int} Max number of formal params allowed per function
"maxdepth" : false, // {int} Max depth of nested blocks (within functions)
"maxstatements" : false, // {int} Max number statements per function
"maxcomplexity" : false, // {int} Max cyclomatic complexity per function
"maxlen" : false, // {int} Max number of characters per line
// Relaxing
"asi" : false, // true: Tolerate Automatic Semicolon Insertion (no semicolons)
"boss" : false, // true: Tolerate assignments where comparisons would be expected
"debug" : false, // true: Allow debugger statements e.g. browser breakpoints.
"eqnull" : false, // true: Tolerate use of `== null`
"es5" : false, // true: Allow ES5 syntax (ex: getters and setters)
"esnext" : false, // true: Allow ES.next (ES6) syntax (ex: `const`)
"moz" : false, // true: Allow Mozilla specific syntax (extends and overrides esnext features)
// (ex: `for each`, multiple try/catch, function expression…)
"evil" : false, // true: Tolerate use of `eval` and `new Function()`
"expr" : false, // true: Tolerate `ExpressionStatement` as Programs
"funcscope" : false, // true: Tolerate defining variables inside control statements"
"globalstrict" : false, // true: Allow global "use strict" (also enables 'strict')
"iterator" : false, // true: Tolerate using the `__iterator__` property
"lastsemic" : false, // true: Tolerate omitting a semicolon for the last statement of a 1-line block
"laxbreak" : false, // true: Tolerate possibly unsafe line breakings
"laxcomma" : false, // true: Tolerate comma-first style coding
"loopfunc" : false, // true: Tolerate functions being defined in loops
"multistr" : false, // true: Tolerate multi-line strings
"proto" : false, // true: Tolerate using the `__proto__` property
"scripturl" : false, // true: Tolerate script-targeted URLs
"smarttabs" : false, // true: Tolerate mixed tabs/spaces when used for alignment
"shadow" : false, // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
"sub" : false, // true: Tolerate using `[]` notation when it can still be expressed in dot notation
"supernew" : false, // true: Tolerate `new function () { ... };` and `new Object;`
"validthis" : false, // true: Tolerate using this in a non-constructor function
// Environments
"browser" : false, // Web Browser (window, document, etc)
"couch" : false, // CouchDB
"devel" : false, // Development/debugging (alert, confirm, etc)
"dojo" : false, // Dojo Toolkit
"jquery" : false, // jQuery
"mootools" : false, // MooTools
"node" : false, // Node.js
"nonstandard" : false, // Widely adopted globals (escape, unescape, etc)
"prototypejs" : false, // Prototype and Scriptaculous
"rhino" : false, // Rhino
"worker" : false, // Web Workers
"wsh" : false, // Windows Scripting Host
"yui" : false, // Yahoo User Interface
// Legacy
"nomen" : true, // true: Prohibit dangling `_` in variables
"onevar" : true, // true: Allow only one `var` statement per function
"passfail" : false, // true: Stop on first error
"white" : true, // true: Check against strict whitespace and indentation rules
// Custom Globals
"globals" : {} // additional predefined global variables
}

20
public/file_uploader/.npmignore
View file

@ -1,20 +0,0 @@
*
!css/jquery.fileupload-noscript.css
!css/jquery.fileupload-ui-noscript.css
!css/jquery.fileupload-ui.css
!css/jquery.fileupload.css
!img/loading.gif
!img/progressbar.gif
!js/cors/jquery.postmessage-transport.js
!js/cors/jquery.xdr-transport.js
!js/vendor/jquery.ui.widget.js
!js/jquery.fileupload-angular.js
!js/jquery.fileupload-audio.js
!js/jquery.fileupload-image.js
!js/jquery.fileupload-jquery-ui.js
!js/jquery.fileupload-process.js
!js/jquery.fileupload-ui.js
!js/jquery.fileupload-validate.js
!js/jquery.fileupload-video.js
!js/jquery.fileupload.js
!js/jquery.iframe-transport.js

15
public/file_uploader/CONTRIBUTING.md
View file

@ -1,15 +0,0 @@
Please follow these pull request guidelines:
1. Update your fork to the latest upstream version.
2. Follow the coding conventions of the original source files (indentation, spaces, brackets layout).
3. Code changes must pass JSHint validation with the `.jshintrc` settings of this project.
4. Code changes must pass the QUnit tests defined in the `test` folder.
5. New features should be covered by accompanying QUnit tests.
6. Keep your commits as atomic as possible, i.e. create a new commit for every single bug fix or feature added.
7. Always add meaningful commit messages.

20
public/file_uploader/LICENSE
View file

@ -1,20 +0,0 @@
The MIT License (MIT)
Copyright (c) 2017 jQuery-File-Upload Authors
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

107
public/file_uploader/README.md
View file

@ -1,107 +0,0 @@
# jQuery File Upload Plugin
## Demo
[Demo File Upload](https://blueimp.github.io/jQuery-File-Upload/)
## Description
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.
## Setup
* [How to setup the plugin on your website](https://github.com/blueimp/jQuery-File-Upload/wiki/Setup)
* [How to use only the basic plugin (minimal setup guide).](https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin)
## Features
* **Multiple file upload:**
Allows to select multiple files at once and upload them simultaneously.
* **Drag & Drop support:**
Allows to upload files by dragging them from your desktop or filemanager and dropping them on your browser window.
* **Upload progress bar:**
Shows a progress bar indicating the upload progress for individual files and for all uploads combined.
* **Cancelable uploads:**
Individual file uploads can be canceled to stop the upload progress.
* **Resumable uploads:**
Aborted uploads can be resumed with browsers supporting the Blob API.
* **Chunked uploads:**
Large files can be uploaded in smaller chunks with browsers supporting the Blob API.
* **Client-side image resizing:**
Images can be automatically resized on client-side with browsers supporting the required JS APIs.
* **Preview images, audio and video:**
A preview of image, audio and video files can be displayed before uploading with browsers supporting the required APIs.
* **No browser plugins (e.g. Adobe Flash) required:**
The implementation is based on open standards like HTML5 and JavaScript and requires no additional browser plugins.
* **Graceful fallback for legacy browsers:**
Uploads files via XMLHttpRequests if supported and uses iframes as fallback for legacy browsers.
* **HTML file upload form fallback:**
Allows progressive enhancement by using a standard HTML file upload form as widget element.
* **Cross-site file uploads:**
Supports uploading files to a different domain with cross-site XMLHttpRequests or iframe redirects.
* **Multiple plugin instances:**
Allows to use multiple plugin instances on the same webpage.
* **Customizable and extensible:**
Provides an API to set individual options and define callBack methods for various upload events.
* **Multipart and file contents stream uploads:**
Files can be uploaded as standard "multipart/form-data" or file contents stream (HTTP PUT file upload).
* **Compatible with any server-side application platform:**
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.
## Requirements
### Mandatory requirements
* [jQuery](https://jquery.com/) v. 1.6+
* [jQuery UI widget factory](https://api.jqueryui.com/jQuery.widget/) v. 1.9+ (included): Required for the basic File Upload plugin, but very lightweight without any other dependencies from the jQuery UI suite.
* [jQuery Iframe Transport plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.iframe-transport.js) (included): Required for [browsers without XHR file upload support](https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support).
### Optional requirements
* [JavaScript Templates engine](https://github.com/blueimp/JavaScript-Templates) v. 2.5.4+: Used to render the selected and uploaded files for the Basic Plus UI and jQuery UI versions.
* [JavaScript Load Image library](https://github.com/blueimp/JavaScript-Load-Image) v. 1.13.0+: Required for the image previews and resizing functionality.
* [JavaScript Canvas to Blob polyfill](https://github.com/blueimp/JavaScript-Canvas-to-Blob) v. 2.1.1+:Required for the image previews and resizing functionality.
* [blueimp Gallery](https://github.com/blueimp/Gallery) v. 2.15.1+: Used to display the uploaded images in a lightbox.
* [Bootstrap](http://getbootstrap.com/) v. 3.2.0+
* [Glyphicons](http://glyphicons.com/)
The user interface of all versions except the jQuery UI version is built with [Bootstrap](http://getbootstrap.com/) and icons from [Glyphicons](http://glyphicons.com/).
### Cross-domain requirements
[Cross-domain File Uploads](https://github.com/blueimp/jQuery-File-Upload/wiki/Cross-domain-uploads) using the [Iframe Transport plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.iframe-transport.js) require a redirect back to the origin server to retrieve the upload results. The [example implementation](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/main.js) makes use of [result.html](https://github.com/blueimp/jQuery-File-Upload/blob/master/cors/result.html) as a static redirect page for the origin server.
The repository also includes the [jQuery XDomainRequest Transport plugin](https://github.com/blueimp/jQuery-File-Upload/blob/master/js/cors/jquery.xdr-transport.js), which enables limited cross-domain AJAX requests in Microsoft Internet Explorer 8 and 9 (IE 10 supports cross-domain XHR requests).
The XDomainRequest object allows GET and POST requests only and doesn't support file uploads. It is used on the [Demo](https://blueimp.github.io/jQuery-File-Upload/) to delete uploaded files from the cross-domain demo file upload service.
### Custom Backends
You can add support for various backends by adhering to the specification [outlined here](https://github.com/blueimp/jQuery-File-Upload/wiki/JSON-Response).
## Browsers
### Desktop browsers
The File Upload plugin is regularly tested with the latest browser versions and supports the following minimal versions:
* Google Chrome
* Apple Safari 4.0+
* Mozilla Firefox 3.0+
* Opera 11.0+
* Microsoft Internet Explorer 6.0+
### Mobile browsers
The File Upload plugin has been tested with and supports the following mobile browsers:
* Apple Safari on iOS 6.0+
* Google Chrome on iOS 6.0+
* Google Chrome on Android 4.0+
* Default Browser on Android 2.3+
* Opera Mobile 12.0+
### Supported features
For a detailed overview of the features supported by each browser version, please have a look at the [Extended browser support information](https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support).
## Contributing
**Bug fixes** and **new features** can be proposed using [pull requests](https://github.com/blueimp/jQuery-File-Upload/pulls).
Please read the [contribution guidelines](https://github.com/blueimp/jQuery-File-Upload/blob/master/CONTRIBUTING.md) before submitting a pull request.
## Support
This project is actively maintained, but there is no official support channel.
If you have a question that another developer might help you with, please post to [Stack Overflow](http://stackoverflow.com/questions/tagged/blueimp+jquery+file-upload) and tag your question with `blueimp jquery file upload`.
## License
Released under the [MIT license](https://opensource.org/licenses/MIT).

211
public/file_uploader/angularjs.html
View file

@ -1,211 +0,0 @@
<!DOCTYPE HTML>
<!--
/*
* jQuery File Upload Plugin AngularJS Demo
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2013, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* https://opensource.org/licenses/MIT
*/
-->
<html lang="en">
<head>
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta charset="utf-8">
<title>jQuery File Upload Demo - AngularJS version</title>
<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.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap styles -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Generic page styles -->
<link rel="stylesheet" href="css/style.css">
<!-- blueimp Gallery styles -->
<link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="css/jquery.fileupload.css">
<link rel="stylesheet" href="css/jquery.fileupload-ui.css">
<!-- CSS adjustments for browsers with JavaScript disabled -->
<noscript><link rel="stylesheet" href="css/jquery.fileupload-noscript.css"></noscript>
<noscript><link rel="stylesheet" href="css/jquery.fileupload-ui-noscript.css"></noscript>
<style>
/* Hide Angular JS elements before initializing */
.ng-cloak {
display: none;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-fixed-top .navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://github.com/blueimp/jQuery-File-Upload">jQuery File Upload</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="https://github.com/blueimp/jQuery-File-Upload/tags">Download</a></li>
<li><a href="https://github.com/blueimp/jQuery-File-Upload">Source Code</a></li>
<li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki">Documentation</a></li>
<li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<h1>jQuery File Upload Demo</h1>
<h2 class="lead">AngularJS version</h2>
<ul class="nav nav-tabs">
<li><a href="basic.html">Basic</a></li>
<li><a href="basic-plus.html">Basic Plus</a></li>
<li><a href="index.html">Basic Plus UI</a></li>
<li class="active"><a href="angularjs.html">AngularJS</a></li>
<li><a href="jquery-ui.html">jQuery UI</a></li>
</ul>
<br>
<blockquote>
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for AngularJS.<br>
Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
</blockquote>
<br>
<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data" data-ng-app="demo" data-ng-controller="DemoFileUploadController" data-file-upload="options" data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple ng-disabled="disabled">
</span>
<button type="button" class="btn btn-primary start" data-ng-click="submit()">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="button" class="btn btn-warning cancel" data-ng-click="cancel()">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fade" data-ng-class="{in: active()}">
<!-- The global progress bar -->
<div class="progress progress-striped active" data-file-upload-progress="progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
<!-- The extended global progress state -->
<div class="progress-extended">&nbsp;</div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table class="table table-striped files ng-cloak">
<tr data-ng-repeat="file in queue" data-ng-class="{'processing': file.$processing()}">
<td data-ng-switch data-on="!!file.thumbnailUrl">
<div class="preview" data-ng-switch-when="true">
<a data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery><img data-ng-src="{{file.thumbnailUrl}}" alt=""></a>
</div>
<div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
</td>
<td>
<p class="name" data-ng-switch data-on="!!file.url">
<span data-ng-switch-when="true" data-ng-switch data-on="!!file.thumbnailUrl">
<a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery>{{file.name}}</a>
<a data-ng-switch-default data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}">{{file.name}}</a>
</span>
<span data-ng-switch-default>{{file.name}}</span>
</p>
<strong data-ng-show="file.error" class="error text-danger">{{file.error}}</strong>
</td>
<td>
<p class="size">{{file.size | formatFileSize}}</p>
<div class="progress progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-file-upload-progress="file.$progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
</td>
<td>
<button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit || options.autoUpload" data-ng-disabled="file.$state() == 'pending' || file.$state() == 'rejected'">
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button data-ng-controller="FileDestroyController" type="button" class="btn btn-danger destroy" data-ng-click="file.$destroy()" data-ng-hide="!file.$destroy">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</td>
</tr>
</table>
</form>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Demo Notes</h3>
</div>
<div class="panel-body">
<ul>
<li>The maximum file size for uploads in this demo is <strong>999 KB</strong> (default file size is unlimited).</li>
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
<li>Uploaded files will be deleted automatically after <strong>5 minutes or less</strong> (demo files are stored in memory).</li>
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage (see <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support">Browser support</a>).</li>
<li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.</li>
<li>Built with the <a href="http://getbootstrap.com/">Bootstrap</a> CSS framework and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.</li>
</ul>
</div>
</div>
</div>
<!-- The blueimp Gallery widget -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- blueimp Gallery script -->
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="js/jquery.fileupload-validate.js"></script>
<!-- The File Upload Angular JS module -->
<script src="js/jquery.fileupload-angular.js"></script>
<!-- The main application script -->
<script src="js/app.js"></script>
</body>
</html>

226
public/file_uploader/basic-plus.html
View file

@ -1,226 +0,0 @@
<!DOCTYPE HTML>
<!--
/*
* jQuery File Upload Plugin Basic Plus Demo
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2013, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* https://opensource.org/licenses/MIT
*/
-->
<html lang="en">
<head>
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta charset="utf-8">
<title>jQuery File Upload Demo - Basic Plus version</title>
<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.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap styles -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Generic page styles -->
<link rel="stylesheet" href="css/style.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="css/jquery.fileupload.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-fixed-top .navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://github.com/blueimp/jQuery-File-Upload">jQuery File Upload</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="https://github.com/blueimp/jQuery-File-Upload/tags">Download</a></li>
<li><a href="https://github.com/blueimp/jQuery-File-Upload">Source Code</a></li>
<li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki">Documentation</a></li>
<li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<h1>jQuery File Upload Demo</h1>
<h2 class="lead">Basic Plus version</h2>
<ul class="nav nav-tabs">
<li><a href="basic.html">Basic</a></li>
<li class="active"><a href="basic-plus.html">Basic Plus</a></li>
<li><a href="index.html">Basic Plus UI</a></li>
<li><a href="angularjs.html">AngularJS</a></li>
<li><a href="jquery-ui.html">jQuery UI</a></li>
</ul>
<br>
<blockquote>
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images, audio and video for jQuery.<br>
Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
</blockquote>
<br>
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Demo Notes</h3>
</div>
<div class="panel-body">
<ul>
<li>The maximum file size for uploads in this demo is <strong>999 KB</strong> (default file size is unlimited).</li>
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
<li>Uploaded files will be deleted automatically after <strong>5 minutes or less</strong> (demo files are stored in memory).</li>
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage (see <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support">Browser support</a>).</li>
<li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.</li>
<li>Built with the <a href="http://getbootstrap.com/">Bootstrap</a> CSS framework and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.</li>
</ul>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="js/jquery.fileupload-validate.js"></script>
<script>
/*jslint unparam: true, regexp: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === 'blueimp.github.io' ?
'//jquery-file-upload.appspot.com/' : 'server/php/',
uploadButton = $('<button/>')
.addClass('btn btn-primary')
.prop('disabled', true)
.text('Processing...')
.on('click', function () {
var $this = $(this),
data = $this.data();
$this
.off('click')
.text('Abort')
.on('click', function () {
$this.remove();
data.abort();
});
data.submit().always(function () {
$this.remove();
});
});
$('#fileupload').fileupload({
url: url,
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 999000,
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: true
}).on('fileuploadadd', function (e, data) {
data.context = $('<div/>').appendTo('#files');
$.each(data.files, function (index, file) {
var node = $('<p/>')
.append($('<span/>').text(file.name));
if (!index) {
node
.append('<br>')
.append(uploadButton.clone(true).data(data));
}
node.appendTo(data.context);
});
}).on('fileuploadprocessalways', function (e, data) {
var index = data.index,
file = data.files[index],
node = $(data.context.children()[index]);
if (file.preview) {
node
.prepend('<br>')
.prepend(file.preview);
}
if (file.error) {
node
.append('<br>')
.append($('<span class="text-danger"/>').text(file.error));
}
if (index + 1 === data.files.length) {
data.context.find('button')
.text('Upload')
.prop('disabled', !!data.files.error);
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}).on('fileuploaddone', function (e, data) {
$.each(data.result.files, function (index, file) {
if (file.url) {
var link = $('<a>')
.attr('target', '_blank')
.prop('href', file.url);
$(data.context.children()[index])
.wrap(link);
} else if (file.error) {
var error = $('<span class="text-danger"/>').text(file.error);
$(data.context.children()[index])
.append('<br>')
.append(error);
}
});
}).on('fileuploadfail', function (e, data) {
$.each(data.files, function (index) {
var error = $('<span class="text-danger"/>').text('File upload failed.');
$(data.context.children()[index])
.append('<br>')
.append(error);
});
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
</body>
</html>

136
public/file_uploader/basic.html
View file

@ -1,136 +0,0 @@
<!DOCTYPE HTML>
<!--
/*
* jQuery File Upload Plugin Basic Demo
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2013, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* https://opensource.org/licenses/MIT
*/
-->
<html lang="en">
<head>
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta charset="utf-8">
<title>jQuery File Upload Demo - Basic version</title>
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support and progress bar for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap styles -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Generic page styles -->
<link rel="stylesheet" href="css/style.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="css/jquery.fileupload.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-fixed-top .navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://github.com/blueimp/jQuery-File-Upload">jQuery File Upload</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="https://github.com/blueimp/jQuery-File-Upload/tags">Download</a></li>
<li><a href="https://github.com/blueimp/jQuery-File-Upload">Source Code</a></li>
<li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki">Documentation</a></li>
<li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<h1>jQuery File Upload Demo</h1>
<h2 class="lead">Basic version</h2>
<ul class="nav nav-tabs">
<li class="active"><a href="basic.html">Basic</a></li>
<li><a href="basic-plus.html">Basic Plus</a></li>
<li><a href="index.html">Basic Plus UI</a></li>
<li><a href="angularjs.html">AngularJS</a></li>
<li><a href="jquery-ui.html">jQuery UI</a></li>
</ul>
<br>
<blockquote>
<p>File Upload widget with multiple file selection, drag&amp;drop support and progress bar for jQuery.<br>
Supports cross-domain, chunked and resumable file uploads.<br>
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
</blockquote>
<br>
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Select files...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Demo Notes</h3>
</div>
<div class="panel-body">
<ul>
<li>The maximum file size for uploads in this demo is <strong>999 KB</strong> (default file size is unlimited).</li>
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
<li>Uploaded files will be deleted automatically after <strong>5 minutes or less</strong> (demo files are stored in memory).</li>
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage (see <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support">Browser support</a>).</li>
<li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.</li>
<li>Built with the <a href="http://getbootstrap.com/">Bootstrap</a> CSS framework and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.</li>
</ul>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === 'blueimp.github.io' ?
'//jquery-file-upload.appspot.com/' : 'server/php/';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
</body>
</html>

16
public/file_uploader/bower-version-update.js
View file

@ -1,16 +0,0 @@
#!/usr/bin/env node
'use strict';
var path = require('path');
var packageJSON = require(path.join(__dirname, 'package.json'));
var bowerFile = path.join(__dirname, 'bower.json');
var bowerJSON = require('bower-json').parse(
require(bowerFile),
{normalize: true}
);
bowerJSON.version = packageJSON.version;
require('fs').writeFileSync(
bowerFile,
JSON.stringify(bowerJSON, null, 2) + '\n'
);

64
public/file_uploader/bower.json
View file

@ -1,64 +0,0 @@
{
"name": "blueimp-file-upload",
"version": "9.18.0",
"title": "jQuery File Upload",
"description": "File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images.",
"keywords": [
"jquery",
"file",
"upload",
"widget",
"multiple",
"selection",
"drag",
"drop",
"progress",
"preview",
"cross-domain",
"cross-site",
"chunk",
"resume",
"gae",
"go",
"python",
"php",
"bootstrap"
],
"homepage": "https://github.com/blueimp/jQuery-File-Upload",
"author": {
"name": "Sebastian Tschan",
"url": "https://blueimp.net"
},
"maintainers": [
{
"name": "Sebastian Tschan",
"url": "https://blueimp.net"
}
],
"repository": {
"type": "git",
"url": "git://github.com/blueimp/jQuery-File-Upload.git"
},
"bugs": "https://github.com/blueimp/jQuery-File-Upload/issues",
"license": "MIT",
"dependencies": {
"jquery": ">=1.6",
"blueimp-tmpl": ">=2.5.4",
"blueimp-load-image": ">=1.13.0",
"blueimp-canvas-to-blob": ">=2.1.1"
},
"main": [
"js/jquery.fileupload.js"
],
"ignore": [
"/*.*",
"/cors",
"css/demo-ie8.css",
"css/demo.css",
"css/style.css",
"js/app.js",
"js/main.js",
"server",
"test"
]
}

75
public/file_uploader/cors/postmessage.html
View file

@ -1,75 +0,0 @@
<!DOCTYPE HTML>
<!--
/*
* jQuery File Upload Plugin postMessage API
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2011, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* https://opensource.org/licenses/MIT
*/
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery File Upload Plugin postMessage API</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<script>
/*jslint unparam: true, regexp: true */
/*global $, Blob, FormData, location */
'use strict';
var origin = /^http:\/\/example.org/,
target = new RegExp('^(http(s)?:)?\\/\\/' + location.host + '\\/');
$(window).on('message', function (e) {
e = e.originalEvent;
var s = e.data,
xhr = $.ajaxSettings.xhr(),
f;
if (!origin.test(e.origin)) {
throw new Error('Origin "' + e.origin + '" does not match ' + origin);
}
if (!target.test(e.data.url)) {
throw new Error('Target "' + e.data.url + '" does not match ' + target);
}
$(xhr.upload).on('progress', function (ev) {
ev = ev.originalEvent;
e.source.postMessage({
id: s.id,
type: ev.type,
timeStamp: ev.timeStamp,
lengthComputable: ev.lengthComputable,
loaded: ev.loaded,
total: ev.total
}, e.origin);
});
s.xhr = function () {
return xhr;
};
if (!(s.data instanceof Blob)) {
f = new FormData();
$.each(s.data, function (i, v) {
f.append(v.name, v.value);
});
s.data = f;
}
$.ajax(s).always(function (result, statusText, jqXHR) {
if (!jqXHR.done) {
jqXHR = result;
result = null;
}
e.source.postMessage({
id: s.id,
status: jqXHR.status,
statusText: statusText,
result: result,
headers: jqXHR.getAllResponseHeaders()
}, e.origin);
});
});
</script>
</body>
</html>

24
public/file_uploader/cors/result.html
View file

@ -1,24 +0,0 @@
<!DOCTYPE HTML>
<!--
/*
* jQuery Iframe Transport Plugin Redirect Page
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2010, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* https://opensource.org/licenses/MIT
*/
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Iframe Transport Plugin Redirect Page</title>
</head>
<body>
<script>
document.body.innerText=document.body.textContent=decodeURIComponent(window.location.search.slice(1));
</script>
</body>
</html>

0
public/file_uploader/css/demo-ie8.css → public/file_uploader/css/jquery-ui-demo-ie8.css Executable file → Normal file
View file

0
public/file_uploader/css/demo.css → public/file_uploader/css/jquery-ui-demo.css Executable file → Normal file
View file

0
public/file_uploader/css/jquery.fileupload-noscript.css Executable file → Normal file
View file

0
public/file_uploader/css/jquery.fileupload-ui-noscript.css Executable file → Normal file
View file

0
public/file_uploader/css/jquery.fileupload-ui.css Executable file → Normal file
View file

0
public/file_uploader/css/jquery.fileupload.css Executable file → Normal file
View file

0
public/file_uploader/css/style.css Executable file → Normal file
View file

0
public/file_uploader/img/loading.gif Executable file → Normal file
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

0
public/file_uploader/img/progressbar.gif Executable file → Normal file
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

255
public/file_uploader/index.html
View file

@ -1,255 +0,0 @@
<!DOCTYPE HTML>
<!--
/*
* jQuery File Upload Plugin Demo
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2010, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* https://opensource.org/licenses/MIT
*/
-->
<html lang="en">
<head>
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta charset="utf-8">
<title>jQuery File Upload Demo</title>
<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.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap styles -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Generic page styles -->
<link rel="stylesheet" href="css/style.css">
<!-- blueimp Gallery styles -->
<link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="css/jquery.fileupload.css">
<link rel="stylesheet" href="css/jquery.fileupload-ui.css">
<!-- CSS adjustments for browsers with JavaScript disabled -->
<noscript><link rel="stylesheet" href="css/jquery.fileupload-noscript.css"></noscript>
<noscript><link rel="stylesheet" href="css/jquery.fileupload-ui-noscript.css"></noscript>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-fixed-top .navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://github.com/blueimp/jQuery-File-Upload">jQuery File Upload</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="https://github.com/blueimp/jQuery-File-Upload/tags">Download</a></li>
<li><a href="https://github.com/blueimp/jQuery-File-Upload">Source Code</a></li>
<li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki">Documentation</a></li>
<li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<h1>jQuery File Upload Demo</h1>
<h2 class="lead">Basic Plus UI version</h2>
<ul class="nav nav-tabs">
<li><a href="basic.html">Basic</a></li>
<li><a href="basic-plus.html">Basic Plus</a></li>
<li class="active"><a href="index.html">Basic Plus UI</a></li>
<li><a href="angularjs.html">AngularJS</a></li>
<li><a href="jquery-ui.html">jQuery UI</a></li>
</ul>
<br>
<blockquote>
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for jQuery.<br>
Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
</blockquote>
<br>
<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" class="toggle">
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>
<!-- The extended global progress state -->
<div class="progress-extended">&nbsp;</div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</form>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Demo Notes</h3>
</div>
<div class="panel-body">
<ul>
<li>The maximum file size for uploads in this demo is <strong>999 KB</strong> (default file size is unlimited).</li>
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
<li>Uploaded files will be deleted automatically after <strong>5 minutes or less</strong> (demo files are stored in memory).</li>
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage (see <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support">Browser support</a>).</li>
<li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.</li>
<li>Built with the <a href="http://getbootstrap.com/">Bootstrap</a> CSS framework and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.</li>
</ul>
</div>
</div>
</div>
<!-- The blueimp Gallery widget -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class="btn btn-primary start" disabled>
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
<td>
<span class="preview">
{% if (file.thumbnailUrl) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
{% } %}
</span>
</td>
<td>
<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
{% if (file.deleteUrl) { %}
<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle">
{% } else { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="//blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- blueimp Gallery script -->
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="js/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="js/jquery.fileupload-ui.js"></script>
<!-- The main application script -->
<script src="js/main.js"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
<!--[if (gte IE 8)&(lt IE 10)]>
<script src="js/cors/jquery.xdr-transport.js"></script>
<![endif]-->
</body>
</html>

250
public/file_uploader/jquery-ui.html
View file

@ -1,250 +0,0 @@
<!DOCTYPE HTML>
<!--
/*
* jQuery File Upload Plugin jQuery UI Demo
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2013, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* https://opensource.org/licenses/MIT
*/
-->
<html lang="en">
<head>
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta charset="utf-8">
<title>jQuery File Upload Demo - jQuery UI version</title>
<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.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery UI styles -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/dark-hive/jquery-ui.css" id="theme">
<!-- Demo styles -->
<link rel="stylesheet" href="css/demo.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/demo-ie8.css">
<![endif]-->
<style>
/* Adjust the jQuery UI widget font-size: */
.ui-widget {
font-size: 0.95em;
}
</style>
<!-- blueimp Gallery styles -->
<link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="css/jquery.fileupload.css">
<link rel="stylesheet" href="css/jquery.fileupload-ui.css">
<!-- CSS adjustments for browsers with JavaScript disabled -->
<noscript><link rel="stylesheet" href="css/jquery.fileupload-noscript.css"></noscript>
<noscript><link rel="stylesheet" href="css/jquery.fileupload-ui-noscript.css"></noscript>
</head>
<body>
<ul class="navigation">
<li><h3><a href="https://github.com/blueimp/jQuery-File-Upload">jQuery File Upload</a></h3></li>
<li><a href="https://github.com/blueimp/jQuery-File-Upload/tags">Download</a></li>
<li><a href="https://github.com/blueimp/jQuery-File-Upload">Source Code</a></li>
<li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki">Documentation</a></li>
<li><a href="https://blueimp.net">&copy; blueimp.net</a></li>
</ul>
<h1>jQuery File Upload Demo</h1>
<h2>jQuery UI version</h2>
<form>
<label for="theme-switcher">Theme:</label>
<select id="theme-switcher" class="pull-right">
<option value="black-tie">Black Tie</option>
<option value="blitzer">Blitzer</option>
<option value="cupertino">Cupertino</option>
<option value="dark-hive" selected>Dark Hive</option>
<option value="dot-luv">Dot Luv</option>
<option value="eggplant">Eggplant</option>
<option value="excite-bike">Excite Bike</option>
<option value="flick">Flick</option>
<option value="hot-sneaks">Hot sneaks</option>
<option value="humanity">Humanity</option>
<option value="le-frog">Le Frog</option>
<option value="mint-choc">Mint Choc</option>
<option value="overcast">Overcast</option>
<option value="pepper-grinder">Pepper Grinder</option>
<option value="redmond">Redmond</option>
<option value="smoothness">Smoothness</option>
<option value="south-street">South Street</option>
<option value="start">Start</option>
<option value="sunny">Sunny</option>
<option value="swanky-purse">Swanky Purse</option>
<option value="trontastic">Trontastic</option>
<option value="ui-darkness">UI Darkness</option>
<option value="ui-lightness">UI Lightness</option>
<option value="vader">Vader</option>
</select>
</form>
<ul class="navigation">
<li><a href="basic.html">Basic</a></li>
<li><a href="basic-plus.html">Basic Plus</a></li>
<li><a href="index.html">Basic Plus UI</a></li>
<li><a href="angularjs.html">AngularJS</a></li>
<li class="active"><a href="jquery-ui.html">jQuery UI</a></li>
</ul>
<blockquote>
<p>File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for jQuery UI.<br>
Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
</blockquote>
<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="fileupload-buttonbar">
<div class="fileupload-buttons">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="fileinput-button">
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="start">Start upload</button>
<button type="reset" class="cancel">Cancel upload</button>
<button type="button" class="delete">Delete</button>
<input type="checkbox" class="toggle">
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="fileupload-progress fade" style="display:none">
<!-- The global progress bar -->
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
<!-- The extended global progress state -->
<div class="progress-extended">&nbsp;</div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation"><tbody class="files"></tbody></table>
</form>
<br>
<h3>Demo Notes</h3>
<ul>
<li>The maximum file size for uploads in this demo is <strong>999 KB</strong> (default file size is unlimited).</li>
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
<li>Uploaded files will be deleted automatically after <strong>5 minutes or less</strong> (demo files are stored in memory).</li>
<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage (see <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support">Browser support</a>).</li>
<li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.</li>
<li>Built with <a href="https://jqueryui.com">jQuery UI</a>.</li>
</ul>
<!-- The blueimp Gallery widget -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
<strong class="error"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress"></div>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class="start" disabled>Start</button>
{% } %}
{% if (!i) { %}
<button class="cancel">Cancel</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
<td>
<span class="preview">
{% if (file.thumbnailUrl) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
{% } %}
</span>
</td>
<td>
<p class="name">
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
</p>
{% if (file.error) { %}
<div><span class="error">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
<button class="delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>Delete</button>
<input type="checkbox" name="delete" value="1" class="toggle">
</td>
</tr>
{% } %}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="//blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- blueimp Gallery script -->
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="js/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="js/jquery.fileupload-ui.js"></script>
<!-- The File Upload jQuery UI plugin -->
<script src="js/jquery.fileupload-jquery-ui.js"></script>
<!-- The main application script -->
<script src="js/main.js"></script>
<script>
// Initialize the jQuery UI theme switcher:
$('#theme-switcher').change(function () {
var theme = $('#theme');
theme.prop(
'href',
theme.prop('href').replace(
/[\w\-]+\/jquery-ui.css/,
$(this).val() + '/jquery-ui.css'
)
);
});
</script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
<!--[if (gte IE 8)&(lt IE 10)]>
<script src="js/cors/jquery.xdr-transport.js"></script>
<![endif]-->
</body>
</html>

0
public/file_uploader/js/app.js Executable file → Normal file
View file

0
public/file_uploader/js/cors/jquery.postmessage-transport.js Executable file → Normal file
View file

0
public/file_uploader/js/cors/jquery.xdr-transport.js Executable file → Normal file
View file

0
public/file_uploader/js/jquery.fileupload-angular.js vendored Executable file → Normal file
View file

0
public/file_uploader/js/jquery.fileupload-audio.js vendored Executable file → Normal file
View file

0
public/file_uploader/js/jquery.fileupload-image.js vendored Executable file → Normal file
View file

0
public/file_uploader/js/jquery.fileupload-jquery-ui.js Executable file → Normal file
View file

0
public/file_uploader/js/jquery.fileupload-process.js vendored Executable file → Normal file
View file

1
public/file_uploader/js/jquery.fileupload-ui.js vendored Executable file → Normal file
View file

@ -30,6 +30,7 @@
require('jquery'), require('jquery'),
require('blueimp-tmpl'), require('blueimp-tmpl'),
require('./jquery.fileupload-image'), require('./jquery.fileupload-image'),
require('./jquery.fileupload-audio'),
require('./jquery.fileupload-video'), require('./jquery.fileupload-video'),
require('./jquery.fileupload-validate') require('./jquery.fileupload-validate')
); );

0
public/file_uploader/js/jquery.fileupload-validate.js vendored Executable file → Normal file
View file

0
public/file_uploader/js/jquery.fileupload-video.js vendored Executable file → Normal file
View file

16
public/file_uploader/js/jquery.fileupload.js vendored Executable file → Normal file
View file

@ -43,7 +43,7 @@
'|(Kindle/(1\\.0|2\\.[05]|3\\.0))' '|(Kindle/(1\\.0|2\\.[05]|3\\.0))'
).test(window.navigator.userAgent) || ).test(window.navigator.userAgent) ||
// Feature detection for all other devices: // Feature detection for all other devices:
$('<input type="file">').prop('disabled')); $('<input type="file"/>').prop('disabled'));
// The FileReader API is not actually used, but works as feature detection, // The FileReader API is not actually used, but works as feature detection,
// as some Safari versions (5?) support XHR file uploads via the FormData API, // as some Safari versions (5?) support XHR file uploads via the FormData API,
@ -453,7 +453,7 @@
} }
if (!multipart || options.blob || !this._isInstanceOf('File', file)) { if (!multipart || options.blob || !this._isInstanceOf('File', file)) {
options.headers['Content-Disposition'] = 'attachment; filename="' + options.headers['Content-Disposition'] = 'attachment; filename="' +
encodeURI(file.name) + '"'; encodeURI(file.uploadName || file.name) + '"';
} }
if (!multipart) { if (!multipart) {
options.contentType = file.type || 'application/octet-stream'; options.contentType = file.type || 'application/octet-stream';
@ -489,7 +489,11 @@
}); });
} }
if (options.blob) { if (options.blob) {
formData.append(paramName, options.blob, file.name); formData.append(
paramName,
options.blob,
file.uploadName || file.name
);
} else { } else {
$.each(options.files, function (index, file) { $.each(options.files, function (index, file) {
// This check allows the tests to run with // This check allows the tests to run with
@ -730,7 +734,7 @@
promise = dfd.promise(), promise = dfd.promise(),
jqXHR, jqXHR,
upload; upload;
if (!(this._isXHRUpload(options) && slice && (ub || mcs < fs)) || if (!(this._isXHRUpload(options) && slice && (ub || ($.type(mcs) === 'function' ? mcs(options) : mcs) < fs)) ||
options.data) { options.data) {
return false; return false;
} }
@ -753,7 +757,7 @@
o.blob = slice.call( o.blob = slice.call(
file, file,
ub, ub,
ub + mcs, ub + ($.type(mcs) === 'function' ? mcs(o) : mcs),
file.type file.type
); );
// Store the current chunk size, as the blob itself // Store the current chunk size, as the blob itself
@ -1126,7 +1130,7 @@
dirReader = entry.createReader(); dirReader = entry.createReader();
readEntries(); readEntries();
} else { } else {
// Return an empy list for file system items // Return an empty list for file system items
// other than files or directories: // other than files or directories:
dfd.resolve([]); dfd.resolve([]);
} }

0
public/file_uploader/js/jquery.iframe-transport.js Executable file → Normal file
View file

0
public/file_uploader/js/main.js Executable file → Normal file
View file

384
public/file_uploader/js/vendor/jquery.ui.widget.js vendored Executable file → Normal file
View file

@ -1,39 +1,48 @@
/*! jQuery UI - v1.11.4+CommonJS - 2015-08-28 /*! jQuery UI - v1.12.1+CommonJS - 2018-02-10
* http://jqueryui.com * http://jqueryui.com
* Includes: widget.js * Includes: widget.js
* Copyright 2015 jQuery Foundation and other contributors; Licensed MIT */ * Copyright jQuery Foundation and other contributors; Licensed MIT */
(function( factory ) { (function( factory ) {
if ( typeof define === "function" && define.amd ) { if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module. // AMD. Register as an anonymous module.
define([ "jquery" ], factory ); define([ "jquery" ], factory );
} else if ( typeof exports === "object" ) { } else if ( typeof exports === "object" ) {
// Node/CommonJS // Node/CommonJS
factory( require( "jquery" ) ); factory( require( "jquery" ) );
} else { } else {
// Browser globals // Browser globals
factory( jQuery ); factory( jQuery );
} }
}(function( $ ) { }(function( $ ) {
$.ui = $.ui || {};
var version = $.ui.version = "1.12.1";
/*! /*!
* jQuery UI Widget 1.11.4 * jQuery UI Widget 1.12.1
* http://jqueryui.com * http://jqueryui.com
* *
* Copyright jQuery Foundation and other contributors * Copyright jQuery Foundation and other contributors
* Released under the MIT license. * Released under the MIT license.
* http://jquery.org/license * http://jquery.org/license
*
* http://api.jqueryui.com/jQuery.widget/
*/ */
//>>label: Widget
//>>group: Core
//>>description: Provides a factory for creating stateful widgets with a common API.
//>>docs: http://api.jqueryui.com/jQuery.widget/
//>>demos: http://jqueryui.com/widget/
var widget_uuid = 0,
widget_slice = Array.prototype.slice;
var widgetUuid = 0;
var widgetSlice = Array.prototype.slice;
$.cleanData = ( function( orig ) { $.cleanData = ( function( orig ) {
return function( elems ) { return function( elems ) {
@ -47,7 +56,7 @@ $.cleanData = (function( orig ) {
$( elem ).triggerHandler( "remove" ); $( elem ).triggerHandler( "remove" );
} }
// http://bugs.jquery.com/ticket/8235 // Http://bugs.jquery.com/ticket/8235
} catch ( e ) {} } catch ( e ) {}
} }
orig( elems ); orig( elems );
@ -55,21 +64,26 @@ $.cleanData = (function( orig ) {
} )( $.cleanData ); } )( $.cleanData );
$.widget = function( name, base, prototype ) { $.widget = function( name, base, prototype ) {
var fullName, existingConstructor, constructor, basePrototype, var existingConstructor, constructor, basePrototype;
// proxiedPrototype allows the provided prototype to remain unmodified
// so that it can be used as a mixin for multiple widgets (#8876)
proxiedPrototype = {},
namespace = name.split( "." )[ 0 ];
// ProxiedPrototype allows the provided prototype to remain unmodified
// so that it can be used as a mixin for multiple widgets (#8876)
var proxiedPrototype = {};
var namespace = name.split( "." )[ 0 ];
name = name.split( "." )[ 1 ]; name = name.split( "." )[ 1 ];
fullName = namespace + "-" + name; var fullName = namespace + "-" + name;
if ( !prototype ) { if ( !prototype ) {
prototype = base; prototype = base;
base = $.Widget; base = $.Widget;
} }
// create selector for plugin if ( $.isArray( prototype ) ) {
prototype = $.extend.apply( null, [ {} ].concat( prototype ) );
}
// Create selector for plugin
$.expr[ ":" ][ fullName.toLowerCase() ] = function( elem ) { $.expr[ ":" ][ fullName.toLowerCase() ] = function( elem ) {
return !!$.data( elem, fullName ); return !!$.data( elem, fullName );
}; };
@ -77,30 +91,35 @@ $.widget = function( name, base, prototype ) {
$[ namespace ] = $[ namespace ] || {}; $[ namespace ] = $[ namespace ] || {};
existingConstructor = $[ namespace ][ name ]; existingConstructor = $[ namespace ][ name ];
constructor = $[ namespace ][ name ] = function( options, element ) { constructor = $[ namespace ][ name ] = function( options, element ) {
// allow instantiation without "new" keyword
// Allow instantiation without "new" keyword
if ( !this._createWidget ) { if ( !this._createWidget ) {
return new constructor( options, element ); return new constructor( options, element );
} }
// allow instantiation without initializing for simple inheritance // Allow instantiation without initializing for simple inheritance
// must use "new" keyword (the code above always passes args) // must use "new" keyword (the code above always passes args)
if ( arguments.length ) { if ( arguments.length ) {
this._createWidget( options, element ); this._createWidget( options, element );
} }
}; };
// extend with the existing constructor to carry over any static properties
// Extend with the existing constructor to carry over any static properties
$.extend( constructor, existingConstructor, { $.extend( constructor, existingConstructor, {
version: prototype.version, version: prototype.version,
// copy the object used to create the prototype in case we need to
// Copy the object used to create the prototype in case we need to
// redefine the widget later // redefine the widget later
_proto: $.extend( {}, prototype ), _proto: $.extend( {}, prototype ),
// track widgets that inherit from this widget in case this widget is
// Track widgets that inherit from this widget in case this widget is
// redefined after a widget inherits from it // redefined after a widget inherits from it
_childConstructors: [] _childConstructors: []
} ); } );
basePrototype = new base(); basePrototype = new base();
// we need to make the options hash a property directly on the new instance
// We need to make the options hash a property directly on the new instance
// otherwise we'll modify the options hash on the prototype that we're // otherwise we'll modify the options hash on the prototype that we're
// inheriting from // inheriting from
basePrototype.options = $.widget.extend( {}, basePrototype.options ); basePrototype.options = $.widget.extend( {}, basePrototype.options );
@ -110,16 +129,18 @@ $.widget = function( name, base, prototype ) {
return; return;
} }
proxiedPrototype[ prop ] = ( function() { proxiedPrototype[ prop ] = ( function() {
var _super = function() { function _super() {
return base.prototype[ prop ].apply( this, arguments ); return base.prototype[ prop ].apply( this, arguments );
}, }
_superApply = function( args ) {
function _superApply( args ) {
return base.prototype[ prop ].apply( this, args ); return base.prototype[ prop ].apply( this, args );
}; }
return function() { return function() {
var __super = this._super, var __super = this._super;
__superApply = this._superApply, var __superApply = this._superApply;
returnValue; var returnValue;
this._super = _super; this._super = _super;
this._superApply = _superApply; this._superApply = _superApply;
@ -134,6 +155,7 @@ $.widget = function( name, base, prototype ) {
} )(); } )();
} ); } );
constructor.prototype = $.widget.extend( basePrototype, { constructor.prototype = $.widget.extend( basePrototype, {
// TODO: remove support for widgetEventPrefix // TODO: remove support for widgetEventPrefix
// always use the name + a colon as the prefix, e.g., draggable:start // always use the name + a colon as the prefix, e.g., draggable:start
// don't prefix for widgets that aren't DOM-based // don't prefix for widgets that aren't DOM-based
@ -153,11 +175,13 @@ $.widget = function( name, base, prototype ) {
$.each( existingConstructor._childConstructors, function( i, child ) { $.each( existingConstructor._childConstructors, function( i, child ) {
var childPrototype = child.prototype; var childPrototype = child.prototype;
// redefine the child widget using the same prototype that was // Redefine the child widget using the same prototype that was
// originally used, but inherit from the new version of the base // originally used, but inherit from the new version of the base
$.widget( childPrototype.namespace + "." + childPrototype.widgetName, constructor, child._proto ); $.widget( childPrototype.namespace + "." + childPrototype.widgetName, constructor,
child._proto );
} ); } );
// remove the list of existing child constructors from the old constructor
// Remove the list of existing child constructors from the old constructor
// so the old child constructors can be garbage collected // so the old child constructors can be garbage collected
delete existingConstructor._childConstructors; delete existingConstructor._childConstructors;
} else { } else {
@ -170,21 +194,25 @@ $.widget = function( name, base, prototype ) {
}; };
$.widget.extend = function( target ) { $.widget.extend = function( target ) {
var input = widget_slice.call( arguments, 1 ), var input = widgetSlice.call( arguments, 1 );
inputIndex = 0, var inputIndex = 0;
inputLength = input.length, var inputLength = input.length;
key, var key;
value; var value;
for ( ; inputIndex < inputLength; inputIndex++ ) { for ( ; inputIndex < inputLength; inputIndex++ ) {
for ( key in input[ inputIndex ] ) { for ( key in input[ inputIndex ] ) {
value = input[ inputIndex ][ key ]; value = input[ inputIndex ][ key ];
if ( input[ inputIndex ].hasOwnProperty( key ) && value !== undefined ) { if ( input[ inputIndex ].hasOwnProperty( key ) && value !== undefined ) {
// Clone objects // Clone objects
if ( $.isPlainObject( value ) ) { if ( $.isPlainObject( value ) ) {
target[ key ] = $.isPlainObject( target[ key ] ) ? target[ key ] = $.isPlainObject( target[ key ] ) ?
$.widget.extend( {}, target[ key ], value ) : $.widget.extend( {}, target[ key ], value ) :
// Don't extend strings, arrays, etc. with objects // Don't extend strings, arrays, etc. with objects
$.widget.extend( {}, value ); $.widget.extend( {}, value );
// Copy everything else by reference // Copy everything else by reference
} else { } else {
target[ key ] = value; target[ key ] = value;
@ -198,26 +226,39 @@ $.widget.extend = function( target ) {
$.widget.bridge = function( name, object ) { $.widget.bridge = function( name, object ) {
var fullName = object.prototype.widgetFullName || name; var fullName = object.prototype.widgetFullName || name;
$.fn[ name ] = function( options ) { $.fn[ name ] = function( options ) {
var isMethodCall = typeof options === "string", var isMethodCall = typeof options === "string";
args = widget_slice.call( arguments, 1 ), var args = widgetSlice.call( arguments, 1 );
returnValue = this; var returnValue = this;
if ( isMethodCall ) { if ( isMethodCall ) {
// If this is an empty collection, we need to have the instance method
// return undefined instead of the jQuery instance
if ( !this.length && options === "instance" ) {
returnValue = undefined;
} else {
this.each( function() { this.each( function() {
var methodValue, var methodValue;
instance = $.data( this, fullName ); var instance = $.data( this, fullName );
if ( options === "instance" ) { if ( options === "instance" ) {
returnValue = instance; returnValue = instance;
return false; return false;
} }
if ( !instance ) { if ( !instance ) {
return $.error( "cannot call methods on " + name + " prior to initialization; " + return $.error( "cannot call methods on " + name +
" prior to initialization; " +
"attempted to call method '" + options + "'" ); "attempted to call method '" + options + "'" );
} }
if ( !$.isFunction( instance[ options ] ) || options.charAt( 0 ) === "_" ) { if ( !$.isFunction( instance[ options ] ) || options.charAt( 0 ) === "_" ) {
return $.error( "no such method '" + options + "' for " + name + " widget instance" ); return $.error( "no such method '" + options + "' for " + name +
" widget instance" );
} }
methodValue = instance[ options ].apply( instance, args ); methodValue = instance[ options ].apply( instance, args );
if ( methodValue !== instance && methodValue !== undefined ) { if ( methodValue !== instance && methodValue !== undefined ) {
returnValue = methodValue && methodValue.jquery ? returnValue = methodValue && methodValue.jquery ?
returnValue.pushStack( methodValue.get() ) : returnValue.pushStack( methodValue.get() ) :
@ -225,6 +266,7 @@ $.widget.bridge = function( name, object ) {
return false; return false;
} }
} ); } );
}
} else { } else {
// Allow multiple hashes to be passed on init // Allow multiple hashes to be passed on init
@ -256,21 +298,25 @@ $.Widget.prototype = {
widgetName: "widget", widgetName: "widget",
widgetEventPrefix: "", widgetEventPrefix: "",
defaultElement: "<div>", defaultElement: "<div>",
options: { options: {
classes: {},
disabled: false, disabled: false,
// callbacks // Callbacks
create: null create: null
}, },
_createWidget: function( options, element ) { _createWidget: function( options, element ) {
element = $( element || this.defaultElement || this )[ 0 ]; element = $( element || this.defaultElement || this )[ 0 ];
this.element = $( element ); this.element = $( element );
this.uuid = widget_uuid++; this.uuid = widgetUuid++;
this.eventNamespace = "." + this.widgetName + this.uuid; this.eventNamespace = "." + this.widgetName + this.uuid;
this.bindings = $(); this.bindings = $();
this.hoverable = $(); this.hoverable = $();
this.focusable = $(); this.focusable = $();
this.classesElementLookup = {};
if ( element !== this ) { if ( element !== this ) {
$.data( element, this.widgetFullName, this ); $.data( element, this.widgetFullName, this );
@ -282,9 +328,11 @@ $.Widget.prototype = {
} }
} ); } );
this.document = $( element.style ? this.document = $( element.style ?
// element within the document
// Element within the document
element.ownerDocument : element.ownerDocument :
// element is window or document
// Element is window or document
element.document || element ); element.document || element );
this.window = $( this.document[ 0 ].defaultView || this.document[ 0 ].parentWindow ); this.window = $( this.document[ 0 ].defaultView || this.document[ 0 ].parentWindow );
} }
@ -295,36 +343,46 @@ $.Widget.prototype = {
options ); options );
this._create(); this._create();
if ( this.options.disabled ) {
this._setOptionDisabled( this.options.disabled );
}
this._trigger( "create", null, this._getCreateEventData() ); this._trigger( "create", null, this._getCreateEventData() );
this._init(); this._init();
}, },
_getCreateOptions: $.noop,
_getCreateOptions: function() {
return {};
},
_getCreateEventData: $.noop, _getCreateEventData: $.noop,
_create: $.noop, _create: $.noop,
_init: $.noop, _init: $.noop,
destroy: function() { destroy: function() {
var that = this;
this._destroy(); this._destroy();
// we can probably remove the unbind calls in 2.0 $.each( this.classesElementLookup, function( key, value ) {
that._removeClass( value, key );
} );
// We can probably remove the unbind calls in 2.0
// all event bindings should go through this._on() // all event bindings should go through this._on()
this.element this.element
.unbind( this.eventNamespace ) .off( this.eventNamespace )
.removeData( this.widgetFullName ) .removeData( this.widgetFullName );
// support: jquery <1.6.3
// http://bugs.jquery.com/ticket/9413
.removeData( $.camelCase( this.widgetFullName ) );
this.widget() this.widget()
.unbind( this.eventNamespace ) .off( this.eventNamespace )
.removeAttr( "aria-disabled" ) .removeAttr( "aria-disabled" );
.removeClass(
this.widgetFullName + "-disabled " +
"ui-state-disabled" );
// clean up events and states // Clean up events and states
this.bindings.unbind( this.eventNamespace ); this.bindings.off( this.eventNamespace );
this.hoverable.removeClass( "ui-state-hover" );
this.focusable.removeClass( "ui-state-focus" );
}, },
_destroy: $.noop, _destroy: $.noop,
widget: function() { widget: function() {
@ -332,18 +390,20 @@ $.Widget.prototype = {
}, },
option: function( key, value ) { option: function( key, value ) {
var options = key, var options = key;
parts, var parts;
curOption, var curOption;
i; var i;
if ( arguments.length === 0 ) { if ( arguments.length === 0 ) {
// don't return a reference to the internal hash
// Don't return a reference to the internal hash
return $.widget.extend( {}, this.options ); return $.widget.extend( {}, this.options );
} }
if ( typeof key === "string" ) { if ( typeof key === "string" ) {
// handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } }
// Handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } }
options = {}; options = {};
parts = key.split( "." ); parts = key.split( "." );
key = parts.shift(); key = parts.shift();
@ -370,6 +430,7 @@ $.Widget.prototype = {
return this; return this;
}, },
_setOptions: function( options ) { _setOptions: function( options ) {
var key; var key;
@ -379,42 +440,152 @@ $.Widget.prototype = {
return this; return this;
}, },
_setOption: function( key, value ) { _setOption: function( key, value ) {
if ( key === "classes" ) {
this._setOptionClasses( value );
}
this.options[ key ] = value; this.options[ key ] = value;
if ( key === "disabled" ) { if ( key === "disabled" ) {
this.widget() this._setOptionDisabled( value );
.toggleClass( this.widgetFullName + "-disabled", !!value );
// If the widget is becoming disabled, then nothing is interactive
if ( value ) {
this.hoverable.removeClass( "ui-state-hover" );
this.focusable.removeClass( "ui-state-focus" );
}
} }
return this; return this;
}, },
_setOptionClasses: function( value ) {
var classKey, elements, currentElements;
for ( classKey in value ) {
currentElements = this.classesElementLookup[ classKey ];
if ( value[ classKey ] === this.options.classes[ classKey ] ||
!currentElements ||
!currentElements.length ) {
continue;
}
// We are doing this to create a new jQuery object because the _removeClass() call
// on the next line is going to destroy the reference to the current elements being
// tracked. We need to save a copy of this collection so that we can add the new classes
// below.
elements = $( currentElements.get() );
this._removeClass( currentElements, classKey );
// We don't use _addClass() here, because that uses this.options.classes
// for generating the string of classes. We want to use the value passed in from
// _setOption(), this is the new value of the classes option which was passed to
// _setOption(). We pass this value directly to _classes().
elements.addClass( this._classes( {
element: elements,
keys: classKey,
classes: value,
add: true
} ) );
}
},
_setOptionDisabled: function( value ) {
this._toggleClass( this.widget(), this.widgetFullName + "-disabled", null, !!value );
// If the widget is becoming disabled, then nothing is interactive
if ( value ) {
this._removeClass( this.hoverable, null, "ui-state-hover" );
this._removeClass( this.focusable, null, "ui-state-focus" );
}
},
enable: function() { enable: function() {
return this._setOptions( { disabled: false } ); return this._setOptions( { disabled: false } );
}, },
disable: function() { disable: function() {
return this._setOptions( { disabled: true } ); return this._setOptions( { disabled: true } );
}, },
_on: function( suppressDisabledCheck, element, handlers ) { _classes: function( options ) {
var delegateElement, var full = [];
instance = this; var that = this;
// no suppressDisabledCheck flag, shuffle arguments options = $.extend( {
element: this.element,
classes: this.options.classes || {}
}, options );
function processClassString( classes, checkOption ) {
var current, i;
for ( i = 0; i < classes.length; i++ ) {
current = that.classesElementLookup[ classes[ i ] ] || $();
if ( options.add ) {
current = $( $.unique( current.get().concat( options.element.get() ) ) );
} else {
current = $( current.not( options.element ).get() );
}
that.classesElementLookup[ classes[ i ] ] = current;
full.push( classes[ i ] );
if ( checkOption && options.classes[ classes[ i ] ] ) {
full.push( options.classes[ classes[ i ] ] );
}
}
}
this._on( options.element, {
"remove": "_untrackClassesElement"
} );
if ( options.keys ) {
processClassString( options.keys.match( /\S+/g ) || [], true );
}
if ( options.extra ) {
processClassString( options.extra.match( /\S+/g ) || [] );
}
return full.join( " " );
},
_untrackClassesElement: function( event ) {
var that = this;
$.each( that.classesElementLookup, function( key, value ) {
if ( $.inArray( event.target, value ) !== -1 ) {
that.classesElementLookup[ key ] = $( value.not( event.target ).get() );
}
} );
},
_removeClass: function( element, keys, extra ) {
return this._toggleClass( element, keys, extra, false );
},
_addClass: function( element, keys, extra ) {
return this._toggleClass( element, keys, extra, true );
},
_toggleClass: function( element, keys, extra, add ) {
add = ( typeof add === "boolean" ) ? add : extra;
var shift = ( typeof element === "string" || element === null ),
options = {
extra: shift ? keys : extra,
keys: shift ? element : keys,
element: shift ? this.element : element,
add: add
};
options.element.toggleClass( this._classes( options ), add );
return this;
},
_on: function( suppressDisabledCheck, element, handlers ) {
var delegateElement;
var instance = this;
// No suppressDisabledCheck flag, shuffle arguments
if ( typeof suppressDisabledCheck !== "boolean" ) { if ( typeof suppressDisabledCheck !== "boolean" ) {
handlers = element; handlers = element;
element = suppressDisabledCheck; element = suppressDisabledCheck;
suppressDisabledCheck = false; suppressDisabledCheck = false;
} }
// no element argument, shuffle and use this.element // No element argument, shuffle and use this.element
if ( !handlers ) { if ( !handlers ) {
handlers = element; handlers = element;
element = this.element; element = this.element;
@ -426,7 +597,8 @@ $.Widget.prototype = {
$.each( handlers, function( event, handler ) { $.each( handlers, function( event, handler ) {
function handlerProxy() { function handlerProxy() {
// allow widgets to customize the disabled handling
// Allow widgets to customize the disabled handling
// - disabled as an array instead of boolean // - disabled as an array instead of boolean
// - disabled class as method for disabling individual parts // - disabled class as method for disabling individual parts
if ( !suppressDisabledCheck && if ( !suppressDisabledCheck &&
@ -438,19 +610,20 @@ $.Widget.prototype = {
.apply( instance, arguments ); .apply( instance, arguments );
} }
// copy the guid so direct unbinding works // Copy the guid so direct unbinding works
if ( typeof handler !== "string" ) { if ( typeof handler !== "string" ) {
handlerProxy.guid = handler.guid = handlerProxy.guid = handler.guid =
handler.guid || handlerProxy.guid || $.guid++; handler.guid || handlerProxy.guid || $.guid++;
} }
var match = event.match( /^([\w:-]*)\s*(.*)$/ ), var match = event.match( /^([\w:-]*)\s*(.*)$/ );
eventName = match[1] + instance.eventNamespace, var eventName = match[ 1 ] + instance.eventNamespace;
selector = match[2]; var selector = match[ 2 ];
if ( selector ) { if ( selector ) {
delegateElement.delegate( selector, eventName, handlerProxy ); delegateElement.on( eventName, selector, handlerProxy );
} else { } else {
element.bind( eventName, handlerProxy ); element.on( eventName, handlerProxy );
} }
} ); } );
}, },
@ -458,7 +631,7 @@ $.Widget.prototype = {
_off: function( element, eventName ) { _off: function( element, eventName ) {
eventName = ( eventName || "" ).split( " " ).join( this.eventNamespace + " " ) + eventName = ( eventName || "" ).split( " " ).join( this.eventNamespace + " " ) +
this.eventNamespace; this.eventNamespace;
element.unbind( eventName ).undelegate( eventName ); element.off( eventName ).off( eventName );
// Clear the stack to avoid memory leaks (#10056) // Clear the stack to avoid memory leaks (#10056)
this.bindings = $( this.bindings.not( element ).get() ); this.bindings = $( this.bindings.not( element ).get() );
@ -479,10 +652,10 @@ $.Widget.prototype = {
this.hoverable = this.hoverable.add( element ); this.hoverable = this.hoverable.add( element );
this._on( element, { this._on( element, {
mouseenter: function( event ) { mouseenter: function( event ) {
$( event.currentTarget ).addClass( "ui-state-hover" ); this._addClass( $( event.currentTarget ), null, "ui-state-hover" );
}, },
mouseleave: function( event ) { mouseleave: function( event ) {
$( event.currentTarget ).removeClass( "ui-state-hover" ); this._removeClass( $( event.currentTarget ), null, "ui-state-hover" );
} }
} ); } );
}, },
@ -491,28 +664,29 @@ $.Widget.prototype = {
this.focusable = this.focusable.add( element ); this.focusable = this.focusable.add( element );
this._on( element, { this._on( element, {
focusin: function( event ) { focusin: function( event ) {
$( event.currentTarget ).addClass( "ui-state-focus" ); this._addClass( $( event.currentTarget ), null, "ui-state-focus" );
}, },
focusout: function( event ) { focusout: function( event ) {
$( event.currentTarget ).removeClass( "ui-state-focus" ); this._removeClass( $( event.currentTarget ), null, "ui-state-focus" );
} }
} ); } );
}, },
_trigger: function( type, event, data ) { _trigger: function( type, event, data ) {
var prop, orig, var prop, orig;
callback = this.options[ type ]; var callback = this.options[ type ];
data = data || {}; data = data || {};
event = $.Event( event ); event = $.Event( event );
event.type = ( type === this.widgetEventPrefix ? event.type = ( type === this.widgetEventPrefix ?
type : type :
this.widgetEventPrefix + type ).toLowerCase(); this.widgetEventPrefix + type ).toLowerCase();
// the original event may come from any element
// The original event may come from any element
// so we need to reset the target on the new event // so we need to reset the target on the new event
event.target = this.element[ 0 ]; event.target = this.element[ 0 ];
// copy original event properties over to the new event // Copy original event properties over to the new event
orig = event.originalEvent; orig = event.originalEvent;
if ( orig ) { if ( orig ) {
for ( prop in orig ) { for ( prop in orig ) {
@ -534,21 +708,26 @@ $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
if ( typeof options === "string" ) { if ( typeof options === "string" ) {
options = { effect: options }; options = { effect: options };
} }
var hasOptions,
effectName = !options ? var hasOptions;
var effectName = !options ?
method : method :
options === true || typeof options === "number" ? options === true || typeof options === "number" ?
defaultEffect : defaultEffect :
options.effect || defaultEffect; options.effect || defaultEffect;
options = options || {}; options = options || {};
if ( typeof options === "number" ) { if ( typeof options === "number" ) {
options = { duration: options }; options = { duration: options };
} }
hasOptions = !$.isEmptyObject( options ); hasOptions = !$.isEmptyObject( options );
options.complete = callback; options.complete = callback;
if ( options.delay ) { if ( options.delay ) {
element.delay( options.delay ); element.delay( options.delay );
} }
if ( hasOptions && $.effects && $.effects.effect[ effectName ] ) { if ( hasOptions && $.effects && $.effects.effect[ effectName ] ) {
element[ method ]( options ); element[ method ]( options );
} else if ( effectName !== method && element[ effectName ] ) { } else if ( effectName !== method && element[ effectName ] ) {
@ -569,4 +748,5 @@ var widget = $.widget;
})); }));

55
public/file_uploader/package.json
View file

@ -1,55 +0,0 @@
{
"name": "blueimp-file-upload",
"version": "9.18.0",
"title": "jQuery File Upload",
"description": "File Upload widget with multiple file selection, drag&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.",
"keywords": [
"jquery",
"file",
"upload",
"widget",
"multiple",
"selection",
"drag",
"drop",
"progress",
"preview",
"cross-domain",
"cross-site",
"chunk",
"resume",
"gae",
"go",
"python",
"php",
"bootstrap"
],
"homepage": "https://github.com/blueimp/jQuery-File-Upload",
"author": {
"name": "Sebastian Tschan",
"url": "https://blueimp.net"
},
"repository": {
"type": "git",
"url": "git://github.com/blueimp/jQuery-File-Upload.git"
},
"license": "MIT",
"optionalDependencies": {
"blueimp-canvas-to-blob": "3.5.0",
"blueimp-load-image": "2.12.2",
"blueimp-tmpl": "3.6.0"
},
"devDependencies": {
"bower-json": "0.8.1",
"jshint": "2.9.3"
},
"scripts": {
"bower-version-update": "./bower-version-update.js",
"lint": "jshint *.js js/*.js js/cors/*.js",
"test": "npm run lint",
"preversion": "npm test",
"version": "npm run bower-version-update && git add bower.json",
"postversion": "git push --tags origin master && npm publish"
},
"main": "js/jquery.fileupload.js"
}

172
public/file_uploader/test/index.html
View file

@ -1,172 +0,0 @@
<!DOCTYPE HTML>
<!--
/*
* jQuery File Upload Plugin Test
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2010, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* https://opensource.org/licenses/MIT
*/
-->
<html lang="en">
<head>
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta charset="utf-8">
<title>jQuery File Upload Plugin Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//codeorigin.jquery.com/qunit/qunit-1.14.0.css">
</head>
<body>
<h1 id="qunit-header">jQuery File Upload Plugin Test</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="../server/php/" method="POST" enctype="multipart/form-data">
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="icon-upload icon-white"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="icon-ban-circle icon-white"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="icon-trash icon-white"></i>
<span>Delete</span>
</button>
<input type="checkbox" class="toggle">
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fileupload-progress">
<!-- The global progress bar -->
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>
<!-- The extended global progress state -->
<div class="progress-extended">&nbsp;</div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</form>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class="btn btn-primary start" disabled>
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download">
<td>
<span class="preview">
{% if (file.thumbnailUrl) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
{% } %}
</span>
</td>
<td>
<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
{% if (file.deleteUrl) { %}
<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle">
{% } else { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/vendor/jquery.ui.widget.js"></script>
<script src="//blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<script src="../js/jquery.iframe-transport.js"></script>
<script src="../js/jquery.fileupload.js"></script>
<script>
/* global window, $ */
window.testBasicWidget = $.blueimp.fileupload;
</script>
<script src="../js/jquery.fileupload-process.js"></script>
<script src="../js/jquery.fileupload-image.js"></script>
<script src="../js/jquery.fileupload-audio.js"></script>
<script src="../js/jquery.fileupload-video.js"></script>
<script src="../js/jquery.fileupload-validate.js"></script>
<script src="../js/jquery.fileupload-ui.js"></script>
<script>
/* global window, $ */
window.testUIWidget = $.blueimp.fileupload;
</script>
<script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script>
<script src="test.js"></script>
</body>
</html>

1292
public/file_uploader/test/test.js
View file

File diff suppressed because it is too large Load diff

BIN
public/img/copy_icon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 600 B

BIN
public/img/more_icon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 416 B

45
templates/includes/images_list.html.ep
View file

@ -1,5 +1,5 @@
<div class="container"> <div class="container upload-form" id="upload-form">
<div class"upload-form">
<input id="fileupload" type="file" name="image" data-url="/upload" multiple> <input id="fileupload" type="file" name="image" data-url="/upload" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/file_uploader/js/vendor/jquery.ui.widget.js"></script> <script src="/file_uploader/js/vendor/jquery.ui.widget.js"></script>
@ -17,7 +17,7 @@
sequentialUploads: true, sequentialUploads: true,
progressall: function (e, data) { progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10); var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css( $('#progress .progress-bar').css(
'width', 'width',
progress + '%' progress + '%'
); );
@ -26,11 +26,10 @@
}); });
</script> </script>
</div> <div id="progress" class="container">
<div id="progress">
<div class="progress-bar" style="width: 0%;"></div> <div class="progress-bar" style="width: 0%;"></div>
</div> </div>
<div id="lastUploadLog"></div> <div id="lastUploadLog" class="container"></div>
</div> </div>
<!-- display images from server --> <!-- display images from server -->
@ -68,7 +67,20 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container paginator">
<div class="btn-group">
<button type="button" class="btn btn-default">Prev</button>
<button type="button" class="btn btn-default" v-for="pageNumber in pagesCount" v-on:click="fetchData(pageNumber)">{{ pageNumber }}</button>
<button type="button" class="btn btn-default">Next</button>
</div> </div>
<div class="container">
<div class="items-per-page-form">Fotos per page: <input v-model="imagesPerPage">
<button type="button" class="btn btn-default" v-on:click="fetchData()">Update</button>
</div>
</div>
</div>
</div>
</div> </div>
<script> <script>
@ -78,27 +90,32 @@
var demo = new Vue({ var demo = new Vue({
el: '#images_list', el: '#images_list',
data: { data: {
imagesList: null imagesList: null,
pageNumber: 1,
pagesCount: 5,
imagesPerPage: 20,
}, },
created: function () { created: function () {
this.fetchData() this.fetchData(this.pageNumber)
}, },
methods: { methods: {
fetchData: function () { fetchData: function (pageNumber) {
var xhr = new XMLHttpRequest() var xhr = new XMLHttpRequest()
var self = this var self = this
xhr.open('GET', apiURL) xhr.open('GET', apiURL+"?page="+pageNumber+"&per-page="+self.imagesPerPage)
xhr.onload = function () { xhr.onload = function () {
self.imagesList = JSON.parse(xhr.responseText) var result = JSON.parse(xhr.responseText);
self.imagesList = result.images_list;
console.dir(self.imagesList);
self.pagesCount = result.pages_count;
} }
xhr.send() xhr.send()
}, },
copyText(event) { copyText(event) {
//TODO: rewrite it to vue/JS from jquery //TODO: rewrite it to vue or pure JS from jQuery
var $temp = $("<input>"); var $temp = $("<input>");
$("body").append($temp); $("body").append($temp);
$temp.val($(event.target).text().trim()).select(); $temp.val($(event.target).text().trim()).select();
@ -107,5 +124,5 @@
}, },
} }
}) });
</script> </script>