Skip to content

Commit

Permalink
Addition of a NuGet package with Id AngularJS.ngUpload
Browse files Browse the repository at this point in the history
  • Loading branch information
@adebisi-fa
adebisi-fa committed Mar 8, 2013
1 parent 5163fc1 commit 0fb9a58
Show file tree
Hide file tree
Showing 8 changed files with 269 additions and 0 deletions.
Binary file added nuget/ngUpload/AngularJS.ngUpload.0.1.1.nupkg
View file
Binary file not shown.
28 changes: 28 additions & 0 deletions nuget/ngUpload/AngularJS.ngUpload.0.1.1.nuspec
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="utf-8"?>
<package xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">
<metadata>
<id>AngularJS.ngUpload</id>
<version>0.1.1</version>
<title>AngularJS.ngUpload - (using iFrame)</title>
<authors>Tom Wilson,Adebisi-Fa</authors>
<owners>Tom Wilson</owners>
<projectUrl>http://twilson63.github.com/ngUpload</projectUrl>
<iconUrl>http://altdstore.blob.core.windows.net/ngupload/ngUpload-Nuget-Logo.png</iconUrl>
<requireLicenseAcceptance>false</requireLicenseAcceptance>
<description>An AngularJS Directive that uses hidden iFrame for uploading files. It works across browsers (even non-HTML5 complaint one) down to IE6.</description>
<summary />
<language>en-US</language>
<dependencies>
<dependency id="jQuery" version="1.9.1" />
<dependency id="angularjs" version="1.0.5" />
</dependencies>
</metadata>
<files>
<file src="..\..\examples\nodejs\libs\css\images\glyphicons-halflings-white.png" target="content\Content\css\images\glyphicons-halflings-white.png" />
<file src="..\..\examples\nodejs\libs\css\images\glyphicons-halflings.png" target="content\Content\css\images\glyphicons-halflings.png" />
<file src="..\..\examples\nodejs\libs\css\bootstrap.min.css" target="content\Content\css\bootstrap.min.css" />
<file src="..\..\ng-upload.js" target="content\Scripts\ng-upload.js" />
<file src="..\..\ng-upload.min.js" target="content\Scripts\ng-upload.min.js" />
<file src="..\..\examples\nodejs\index.html" target="content\ng-upload-sample.html" />
</files>
</package>
9 changes: 9 additions & 0 deletions nuget/ngUpload/content/Content/css/bootstrap.min.css
View file

Large diffs are not rendered by default.

Binary file added nuget/ngUpload/content/Content/css/images/glyphicons-halflings-white.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added nuget/ngUpload/content/Content/css/images/glyphicons-halflings.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
106 changes: 106 additions & 0 deletions nuget/ngUpload/content/Scripts/ng-upload.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
// Version 0.1.1
// AngularJS simple file upload directive
// this directive uses an iframe as a target
// to enable the uploading of files without
// losing focus in the ng-app.
//
// <div ng-app="app">
// <div ng-controller="mainCtrl">
// <form action="/uploads" ng-upload="results()">
// <input type="file" name="avatar"></input>
// <input type="submit" value="Upload"></input>
// </form>
// </div>
// </div>
//
// angular.module('app', ['ngUpload'])
// .controller('mainCtrl', function($scope) {
// $scope.results = function(content) {
// console.log(content);
// }
// });
//
angular.module('ngUpload', [])
.directive('ngUpload', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {

// Options (just 1 for now)
// Each option should be prefixed with 'upload-Options-' or 'uploadOptions'
// {
// // specify whether to enable the submit button when uploading forms
// enableControls: bool
// }
var options = {};
options.enableControls = attrs['uploadOptionsEnableControls'];

// get scope function to execute on successful form upload
if (attrs['ngUpload']) {

element.attr("target", "upload_iframe");
element.attr("method", "post");
element.attr("enctype", "multipart/form-data");
element.attr("encoding", "multipart/form-data");

// Retrieve the callback function
var fn = attrs['ngUpload'].split('(')[0];
var callbackFn = scope[fn];

// Helper function to create new iframe for each form submission
var addNewDisposableIframe = function (submitControl) {
// create a new iframe
var iframe = $("<iframe id='upload_iframe' name='upload_iframe' border='0' width='0' height='0' style='width: 0px; height: 0px; border: none; display: none' />");

// attach function to load event of the iframe
iframe.bind('load', function () {

// get content - requires jQuery
var content = iframe.contents().find('body').text();

// execute the upload response function in the active scope
scope.$apply(function () { callbackFn(content); });

// remove iframe
if (content != "") // Fixes a bug in Google Chrome that dispose the iframe before content is ready.
setTimeout(function () { iframe.remove(); }, 250);

//if (options.enableControls == null || !(options.enableControls.length >= 0))
submitControl.attr('disabled', null);
submitControl.attr('title', 'Click to start upload.');
});

// add the new iframe to application
element.parent().append(iframe);
};

// 1) get the upload submit control(s) on the form (submitters must be decorated with the 'ng-upload-submit' class)
// 2) attach a handler to the controls' click event
$('.upload-submit', element).click(
function () {

addNewDisposableIframe($(this) /* pass the submit control */);

scope.$apply(function () { callbackFn("Please wait..."); });

//console.log(angular.toJson(options));

var enabled = true;
if (options.enableControls === null || options.enableControls === undefined || options.enableControls.length >= 0) {
// disable the submit control on click
$(this).attr('disabled', 'disabled');
enabled = false;
}

$(this).attr('title', (enabled ? '[ENABLED]: ' : '[DISABLED]: ') + 'Uploading, please wait...');

// submit the form
$(element).submit();
}
).attr('title', 'Click to start upload.');
}
else
console.log("No callback function found on the ngUpload directive.");
}
};
});
2 changes: 2 additions & 0 deletions nuget/ngUpload/content/Scripts/ng-upload.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

124 changes: 124 additions & 0 deletions nuget/ngUpload/content/ng-upload-sample.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf8" />
<title>ngUpload - Examples</title>
<link href="/Content/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
body {
font-family: Verdana;
font-size: 12px;
}

h1 {
font-size: 20px;
font-weight: normal;
border-bottom: 1px solid gray;
padding-bottom: 5px;
margin-bottom: 5px;
display: block;
}
</style>
</head>
<body>
<div class="container" ng-app="ngUploadApp">
<div ng-controller="Example1Ctrl">
<h1>Example 1 - Running with default configuration</h1>
<span>Current value of foo is: <b>{{foo}}</b>. <i>(Works with the active $scope.)</i></span>
<br />
<br />
<form ng-upload="bar" action="/upload?delay=yes">
<p>
<label>Select a file to upload:</label>
<input type="file" name="file" />
</p>
<p>
<input type="submit" class="btn upload-submit" value="Submit" />
<br />
<i>Button is <b>disabled</b> during upload, by default. (See Example 2 to change this).</i>
</p>
</form>
<div class="alert alert-info">Server Response: {{uploadResponse}}</div>
</div>
<div ng-controller="Example2Ctrl">
<h1>Example 2 - Using Options: <b>uploadOptionsEnableControls</b> option</h1>
Add or remove this option to enable or disable the submit control(s) during file upload, respectively.
<br />
<span>Note that this can also be written as:<br />
<ul>
<li>upload-options-enable-controls; or </li>
<li>uploadOptionsEnableControls</li>
</ul>
It is absent by default; hence, submit controls(s) will be disabled while upload is in progress. In this example, uploadOptionsEnableButtons is present or set, which means the submit button will be enabled during the upload.
</span>
<br />
<br />
<form ng-upload="uploadFile" action="/upload?delay=yes" upload-options-enable-controls>
<p>
<label>Select a file to upload:</label>
<input type="file" name="file" />
</p>
<p>
<input type="submit" class="btn upload-submit" value="Submit" />
</p>
</form>
<div class="alert alert-info">Server Response: {{uploadResponse}}</div>
</div>
<div ng-controller="Example3Ctrl">
<h1>Example 3 - Submitting forms with any html element</h1>
<span>This examples show how to use any html element to submit your form. It makes use of a 'div', an 'a', and an 'img' tags to submit the same form.</span>
<br />
<form ng-upload="uploadFile" action="/upload?delay=yes">
<p>
<label>Select a file to upload:</label>
<input type="file" name="file" />
</p>
<div style="width:550px">
<div class="row-fluid">
<div class="span4">
<div class="upload-submit" style="text-align: center; cursor: pointer; padding: 10px; background-color: black; color: white;">
With a div
</div>
</div>
<div class="span4">
<a class="upload-submit" href="javascript:void(0)" style="padding: 10px; display: block;">With a link.</a>
</div>
<div class="span4">
<button class="btn btn-small btn-primary upload-submit"><i class="icon-arrow-up icon-white"></i>&nbsp;With an image button.</button>
</div>
</div>
</div>
</form>
<div class="alert alert-info">Server Response: {{uploadResponse}}</div>
</div>
</div>
<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/ng-upload.js"></script>
<script type="text/javascript">
// TODO add ng-upload module
var app = angular.module('ngUploadApp', ['ngUpload']);
app.controller('Example1Ctrl', function ($scope) {
$scope.foo = "Hello World";
$scope.bar = function (content) {
console.log(content);
$scope.uploadResponse = content;
}
});

app.controller('Example2Ctrl', function ($scope) {
$scope.uploadFile = function (content) {
console.log(content);
$scope.uploadResponse = content;
}
});

app.controller('Example3Ctrl', function ($scope) {
$scope.uploadFile = function (content) {
console.log(content);
$scope.uploadResponse = content;
}
});
</script>
</body>
</html>

0 comments on commit 0fb9a58

Please sign in to comment.