ng-file-upload-haikulearning

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width"> <link type="text/css" rel="stylesheet" href="common.css"> <title>Angular file upload sample</title> <script type="text/javascript"> FileAPI = { debug: true, //forceLoad: true, html5: false //to debug flash in HTML5 browsers //wrapInsideDiv: true, //experimental for fixing css issues //only one of jsPath or jsUrl. //jsPath: '/js/FileAPI.min.js/folder/', //jsUrl: 'yourcdn.com/js/FileAPI.min.js', //only one of staticPath or flashUrl. //staticPath: '/flash/FileAPI.flash.swf/folder/' //flashUrl: 'yourcdn.com/js/FileAPI.flash.swf' }; </script>  <script type="text/javascript"> // load angularjs specific version var angularVersion = window.location.hash.substring(1); if (angularVersion.indexOf('/') == 0) angularVersion = angularVersion.substring(1); document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/' + (angularVersion || '1.2.24') + '/angular.js"><\/script>'); </script> <script src="js/ng-file-upload-shim.js"></script> <script src="js/ng-file-upload.js"></script> <script src="js/upload.js"></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.8.0/codemirror.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.8.0/codemirror.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.8.0/mode/htmlmixed/htmlmixed.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.8.0/mode/htmlembedded/htmlembedded.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.8.0/mode/xml/xml.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.8.0/mode/javascript/javascript.min.js"></script> </head> <body ng-app="fileUpload" ng-controller="MyCtrl"> <div class="ng-v"> Angular Version: <input type="text" ng-model="angularVersion"> <input type="button" data-ng-click="changeAngularVersion()" value="Go"> </div> <h2>Angular file upload Demo</h2> <h3> Visit <a href="https://github.com/danialfarid/ng-file-upload">ng-file-upload</a> on github </h3> <div class="upload-div"> <div class="edit-div"> <a ng-click="showEdit = !showEdit" href="javascript:void(0)">+ edit upload html</a>       <a ng-show="showEdit" ng-click="confirm() && (editHtml = defaultHtml)" href="javascript:void(0)">reset to default</a><br/><br/> <div ng-show="showEdit" id="htmlEdit"></div> </div> <div class="upload-buttons"> <div id="editArea"> <div> <div> <form name="myForm"> <fieldset> aaaa{{d}} <legend>Upload on form submit</legend> Username: <input type="text" name="userName" ng-model="username" size="39" required> <i ng-show="myForm.userName.$error.required">*required</i><br> Profile Picture: <input type="file" ngf-select ng-model="picFile" name="file" ngf-accept="'image/*'" required> <i ng-show="myForm.file.$error.required">*required</i> <br/> <button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile)">Submit</button> <img ngf-src="picFile" class="thumb"> <span class="progress" ng-show="picFile.progress >= 0"> <div style="width:{{picFile.progress}}%" ng-bind="picFile.progress + '%'"></div> </span> <span ng-show="picFile.result">Upload Successful</span> </fieldset> <br/> </form> </div> <fieldset> <legend>Play with options</legend> <div class="up-buttons"> <div ngf-select ngf-drop ng-model="files" ngf-model-invalid="invalidFiles" ng-model-options="modelOptionsObj" ngf-multiple="multiple" ngf-pattern="pattern" ngf-accept="acceptSelect" ng-disabled="disabled" ngf-capture="capture" ngf-drag-over-class="dragOverClassObj" ngf-validate="validateObj" ngf-resize="resizeObj" ngf-resize-if="resizeIfFn($file, $width, $height)" ngf-dimensions="dimensionsFn($file, $width, $height)" ngf-duration="durationFn($file, $duration)" ngf-keep="keepDistinct ? 'distinct' : keep" ngf-fix-orientation="orientation" ngf-allow-dir="allowDir" class="drop-box" ngf-drop-available="dropAvailable">Select File <span ng-show="dropAvailable"> or Drop File</span> </div> <br/> <div ngf-drop ng-model="files" ngf-model-invalid="invalidFiles" ng-model-options="modelOptionsObj" ngf-multiple="multiple" ngf-pattern="'image/*'" ng-disabled="disabled" ngf-drag-over-class="dragOverClassObj" ngf-validate="validateObj" ngf-resize="resizeObj" ngf-resize-if="resizeIfFn($file, $width, $height)" ngf-dimensions="dimensionsFn($file, $width, $height)" ngf-duration="durationFn($file, $duration)" ngf-keep="keepDistinct ? 'distinct' : keep" ngf-enable-firefox-paste="true" ngf-fix-orientation="orientation" ngf-allow-dir="allowDir" class="drop-box" ng-show="dropAvailable"> <span>Paste or Drop Image from browser</span></div> </div> <div class="custom"> <label>accept (for select browser dependent): <input type="text" ng-model="acceptSelect"></label><br/> <label>ngf-capture (for mobile): <input type="text" ng-model="capture"></label><br/> <label>ngf-pattern (validate file model): <input type="text" ng-model="pattern"></label><br/> <label>ngf-validate: <input type="text" ng-model="validate" size="49"></label><br/> <label>ngf-drag-over-class (chrome): <input size="31" type="text" ng-model="dragOverClass"></label><br/> <label>ng-model-options: <input type="text" size="43" ng-model="modelOptions"></label><br/> <label>ngf-resize: <input type="text" size="43" ng-model="resize"></label><br/> <label>ngf-resize-if: <input type="text" size="43" ng-model="resizeIf"></label><br/> <label>ngf-dimensions: <input type="text" size="43" ng-model="dimensions"></label><br/> <label>ngf-duration: <input type="text" size="43" ng-model="duration"></label><br/> <label><input type="checkbox" ng-model="multiple">ngf-multiple (allow multiple files)</label> <label><input type="checkbox" ng-model="disabled">ng-disabled</label><br/> <label><input type="checkbox" ng-model="allowDir">ngf-allow-dir (allow directory drop Chrome only)</label><br/> <label><input type="checkbox" ng-model="keep">ngf-keep (keep the previous model values in ng-model)</label><br/> <label><input type="checkbox" ng-model="keepDistinct">ngf-keep="distinct" (do not allow duplicates)</label><br/> <label><input type="checkbox" ng-model="orientation">ngf-fix-orientation (for exif jpeg files)</label><br/> <label>Upload resumable chunk size: <input type="text" ng-model="chunkSize"></label><br/> </div> <div class="preview"> <div>Preview image/audio/video:</div> <img ngf-src="!files[0].$error && files[0]"> <audio controls ngf-src="!files[0].$error && files[0]"></audio> <video controls ngf-src="!files[0].$error && files[0]"></video> </div> </fieldset> <br/> </div> </div> </div> <ul style="clear:both" class="response"> <li class="sel-file" ng-repeat="f in files"> <div> <img ngf-thumbnail="!f.$error && f" class="thumb"> <span class="progress" ng-show="f.progress >= 0"> <div style="width:{{f.progress}}%">{{f.progress}}%</div> </span> <button class="button" ng-click="f.upload.abort();f.upload.aborted=true" ng-show="f.upload != null && f.progress < 100 && !f.upload.aborted"> Abort<span ng-show="isResumeSupported">/Pause</span> </button> <button class="button" ng-click="upload(f, true);f.upload.aborted=false" ng-show="isResumeSupported && f.upload != null && f.upload.aborted">Resume </button> <button class="button" ng-click="restart(f);f.upload.aborted=false" ng-show="isResumeSupported && f.upload != null && (f.progress == 100 || f.upload.aborted)">Restart </button> {{f.name}} - size: {{f.size}}B - type: {{f.type}} <a ng-show="f.result" href="javascript:void(0)" ng-click="f.showDetail = !f.showDetail">details</a> <div ng-show="f.showDetail"> <br/> <div data-ng-show="f.result.result == null">{{f.result}}</div> <ul> <li ng-repeat="item in f.result.result"> <div data-ng-show="item.name">file name: {{item.name}}</div> <div data-ng-show="item.fieldName">name: {{item.fieldName}}</div> <div data-ng-show="item.size">size on the serve: {{item.size}}</div> <div data-ng-show="item.value">value: {{item.value}}</div> </li> </ul> <div data-ng-show="f.result.requestHeaders" class="reqh">request headers: {{f.result.requestHeaders}}</div> </div> </div> </li> <li class="sel-file" ng-repeat="f in invalidFiles"> <div>Invalid File: {{f.$error}} {{f.$errorParam}}, {{f.name}} - size: {{f.size}}B - type: {{f.type}} </div> </li> </ul> <br/> <div style="clear:both" class="err" ng-show="errorMsg != null">{{errorMsg}}</div> </div> <div style="clear:both" class="server"> <div class="srv-title">How to upload to the server:</div> <div class="howto"> <label><input type="radio" name="howToSend" ng-model="howToSend" value="1" ng-init="howToSend = 1">Upload.upload(): multipart/form-data upload cross browser</label> <br/> <label><input type="radio" name="howToSend" ng-model="howToSend" value="2" ng-disabled="usingFlash">Upload.http(): binary content with file's Content-Type</label> <div class="sub">Can be used to upload files directory into <a href="https://github.com/danialfarid/angular-file-upload/issues/88">CouchDB</a>, <a href="https://github.com/danialfarid/angular-file-upload/issues/87">imgur</a>, etc... without multipart form data (HTML5 FileReader browsers only)<br/> </div> <label><input type="radio" name="howToSend" ng-model="howToSend" value="3">Amazon S3 bucket upload</label> <form ng-show="howToSend==3" class="s3" id="s3form" action="http://localhost:8888" onsubmit="return false"> <br/> Provide S3 upload parameters. <a href="http://aws.amazon.com/articles/1434/" target="_blank">Click here for detailed documentation</a><br/></br> <label>S3 upload url including bucket name:</label> <input type="text" ng-model="s3url"> <br/> <label>AWSAccessKeyId:</label> <input type="Text" name="AWSAccessKeyId" ng-model="AWSAccessKeyId"> <br/> <label>acl (private or public):</label> <input type="text" ng-model="acl" value="private"><br/> <label>success_action_redirect:</label> <input type="text" ng-model="success_action_redirect"><br/> <label>policy:</label> <input type="text" ng-model="policy"><br/> <label>signature:</label> <input type="text" ng-model="signature"><br/> <br/> <button ng-click="showHelper=!showHelper">S3 Policy signing helper (Optional)</button> <br/><br/> <div class="helper" ng-show="showHelper"> If you don't have your policy and signature you can use this tool to generate them by providing these two fields and clicking on sign<br/> <label>AWS Secret Key:</label> <input type="text" ng-model="AWSSecretKey"><br/> <label>JSON policy:</label><br/> <textarea type="text" ng-model="jsonPolicy" rows=10 cols=70></textarea> <button ng-click="generateSignature()">Sign</button> </div> </form> <br/> <br/> <div ng-show="howToSend != 3"> <input type="checkbox" ng-model="generateErrorOnServer">Return server error with http code: <input type="text" ng-model="serverErrorCode" size="5"> and message: <input type="text" ng-model="serverErrorMsg"> <br/> </div> <br/> </div> </div> <a style="position:fixed;bottom:28px;right:10px;font-size:smaller;" target="_blank" href="https://angular-file-upload.appspot.com/donate.html">donate</a> <a style="position:fixed;bottom:45px;right:10px;font-size:smaller;" href="https://github.com/danialfarid/angular-file-upload/issues/new">Feedback/Issues</a> </body> </html>