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

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

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';

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,58 +257,24 @@ post '/upload' => ( authenticated => 1 ) => sub {
# Save to file # Save to file
$image->move_to($image_file); $image->move_to($image_file);
my $imager = Imager->new();
$imager->read( file => $image_file ) or die $imager->errstr;
#http://sylvana.net/jpegcrop/exif_orientation.html my $promise = store_image($image_file, $image->filename, $user_id);
#http://myjaphoo.de/docs/exifidentifiers.html
my $rotation_angle = $imager->tags( name => "exif_orientation" ) || 1;
$self->app->log->info(
"Rotation angle [" . $rotation_angle . "] [" . $image->filename . "]" );
if ( $rotation_angle == 3 ) { #TODO: add errors handling
$imager = $imager->rotate( degrees => 180 ); Mojo::Promise->all($promise)->then(sub {
} $self->render(
elsif ( $rotation_angle == 6 ) { json => {
$imager = $imager->rotate( degrees => 90 ); files => [
} {
name => $image->filename,
my $original_width = $imager->getwidth(); size => $image->size,
url => sprintf( '/images/orig/%s', $filename ),
for my $scale (@scale_width) { thumbnailUrl => sprintf( '/images/200/%s', $filename ),
}
#Skip sizes which more than original image ]
if ( $scale >= $original_width ) {
next;
}
my $scaled = $imager->scale( xpixels => $scale );
$scaled->write( file =>
File::Spec->catfile( get_path( $user_id, $scale ), $filename ) )
or die $scaled->errstr;
}
if ( !$db->add_file( $user->{'user_id'}, $filename, $image->filename ) ) {
#TODO: Send error msg
}
$self->render(
json => {
files => [
{
name => $image->filename,
size => $image->size,
url => sprintf( '/images/orig/%s', $filename ),
thumbnailUrl => sprintf( '/images/200/%s', $filename ),
} }
] );
} })->wait;
);
# Redirect to top page
# $self->redirect_to('index');
} => 'upload'; } => 'upload';
@ -310,4 +294,68 @@ sub get_path {
return $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();
$imager->read( file => $image_file ) or die $imager->errstr;
#http://sylvana.net/jpegcrop/exif_orientation.html
#http://myjaphoo.de/docs/exifidentifiers.html
my $rotation_angle = $imager->tags( name => "exif_orientation" ) || 1;
$log->debug(
"Rotation angle [" . $rotation_angle . "]" );
if ( $rotation_angle == 3 ) {
$imager = $imager->rotate( degrees => 180 );
}
elsif ( $rotation_angle == 6 ) {
$imager = $imager->rotate( degrees => 90 );
}
my $original_width = $imager->getwidth();
for my $scale (@scale_width) {
#Skip sizes which more than original image
if ( $scale >= $original_width ) {
next;
}
my $scaled = $imager->scale( xpixels => $scale );
$scaled->write( file =>
File::Spec->catfile( get_path( $user_id, $scale ), $filename ) )
or die $scaled->errstr;
}
if ( !$db->add_file( $user_id, $filename, $original_filename ) ) {
$log->error(sprintf('Can\'t save file %s', $filename));
die sprintf('Can\'t save file %s', $filename);
}
return $filename;
},
sub {
my ($subprocess, $err, @results) = @_;
$log->error("Subprocess error: $err") and return if $err;
$promise->reject("Subprocess error: $err @results") if $err;
$promise->resolve(1, @results);
}
);
return $promise;
}
Mojo::IOLoop->start;
app->start; app->start;

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;

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;
}

View file

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

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
}

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

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.

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.

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).

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>

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>

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>

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'
);

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"
]
}

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>

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>

View 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

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

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

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>

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

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

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

File diff suppressed because it is too large Load diff

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"
}

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>

File diff suppressed because it is too large Load diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 600 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 416 B

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 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> </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;
xhr.send() console.dir(self.imagesList);
self.pagesCount = result.pages_count;
}
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>

View file

@ -14,7 +14,7 @@
<link rel="stylesheet" href="/file_uploader/css/jquery.fileupload-ui.css"> <link rel="stylesheet" href="/file_uploader/css/jquery.fileupload-ui.css">
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/css/main.css">
<script src="https://vuejs.org/js/vue.min.js"></script> <script src="https://vuejs.org/js/vue.min.js"></script>
</head> </head>
<body> <body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">