2014-10-05 08:18:50 +00:00
<!DOCTYPE HTML>
<!--
/*
2017-06-27 00:32:38 +00:00
* jQuery File Upload Plugin AngularJS Demo
2014-10-05 08:18:50 +00:00
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2013, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
2017-06-27 00:32:38 +00:00
* https://opensource.org/licenses/MIT
2014-10-05 08:18:50 +00:00
*/
-->
< 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&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 -->
2019-04-09 01:35:23 +00:00
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous" >
2014-10-05 08:18:50 +00:00
<!-- Generic page styles -->
< link rel = "stylesheet" href = "css/style.css" >
<!-- blueimp Gallery styles -->
2018-10-23 00:00:33 +00:00
< link rel = "stylesheet" href = "https://blueimp.github.io/Gallery/css/blueimp-gallery.min.css" >
2014-10-05 08:18:50 +00:00
<!-- 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" > © 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& 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 -->
2018-10-23 00:00:33 +00:00
< form id = "fileupload" action = "https://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}" >
2014-10-05 08:18:50 +00:00
<!-- 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" > < / 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 >
2017-06-27 00:32:38 +00:00
< li > The maximum file size for uploads in this demo is < strong > 999 KB< / strong > (default file size is unlimited).< / li >
2014-10-05 08:18:50 +00:00
< li > Only image files (< strong > JPG, GIF, PNG< / strong > ) are allowed in this demo (by default there is no file type restriction).< / li >
2017-06-27 00:32:38 +00:00
< li > Uploaded files will be deleted automatically after < strong > 5 minutes or less< / strong > (demo files are stored in memory).< / li >
2014-10-05 08:18:50 +00:00
< li > You can < strong > drag & 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 >
2019-04-09 01:35:23 +00:00
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity = "sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin = "anonymous" > < / script >
< script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" integrity = "sha384-r6jjWwxAypHaESwS5an5J9dkfzwQuKVNV9FZM9B6fnt8PFuY0cVwLhV7BltCZhLy" crossorigin = "anonymous" > < / script >
2014-10-05 08:18:50 +00:00
<!-- 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 -->
2018-10-23 00:00:33 +00:00
< script src = "https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js" > < / script >
2014-10-05 08:18:50 +00:00
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
2018-10-23 00:00:33 +00:00
< script src = "https://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js" > < / script >
2014-10-05 08:18:50 +00:00
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
2019-04-09 01:35:23 +00:00
< script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin = "anonymous" > < / script >
2014-10-05 08:18:50 +00:00
<!-- blueimp Gallery script -->
2018-10-23 00:00:33 +00:00
< script src = "https://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js" > < / script >
2014-10-05 08:18:50 +00:00
<!-- 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 >
2017-06-27 00:32:38 +00:00
< / body >
2014-10-05 08:18:50 +00:00
< / html >