├── Html5UploadDemo
├── Views
│ ├── _ViewStart.cshtml
│ ├── Shared
│ │ ├── Error.cshtml
│ │ └── _Layout.cshtml
│ └── Web.config
├── Global.asax
├── packages.config
├── Controllers
│ └── FileController.cs
├── Content
│ └── styles
│ │ └── styles.css
├── Global.asax.cs
├── Web.Debug.config
├── Web.Release.config
├── Properties
│ └── AssemblyInfo.cs
├── Web.config
├── Scripts
│ ├── knockout-models.js
│ ├── main.js
│ ├── domReady.js
│ ├── src
│ │ └── html5Upload.js
│ ├── require.js
│ ├── knockout-2.1.0.js
│ └── jquery-1.8.2.min.js
├── index.html
└── Html5UploadDemo.csproj
├── packages
└── repositories.config
├── .gitignore
├── license.txt
├── Html5Upload.sln
└── README.md
/Html5UploadDemo/Views/_ViewStart.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 | Layout = "~/Views/Shared/_Layout.cshtml";
3 | }
--------------------------------------------------------------------------------
/Html5UploadDemo/Global.asax:
--------------------------------------------------------------------------------
1 | <%@ Application Codebehind="Global.asax.cs" Inherits="Html5UploadDemo.MvcApplication" Language="C#" %>
2 |
--------------------------------------------------------------------------------
/packages/repositories.config:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/Html5UploadDemo/packages.config:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/Html5UploadDemo/Views/Shared/Error.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 | Layout = null;
3 | }
4 |
5 |
6 |
7 |
8 |
9 |
10 |
HTML5 Ajax Uploader Demo
11 |
12 |
13 |
14 |
Drag images here
15 |
Or, if you prefer...
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
RequireJS, Knockout and Uploader Harmony
25 |
26 | Scripts are loaded using module loader RequireJS . This demo
27 | demonstrates how to use html5 ajax uploader and knockout to customize UI for uploads.
28 |
29 |
30 |
Show me the code
31 |
32 |
33 |
34 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
--------------------------------------------------------------------------------
/Html5UploadDemo/Scripts/domReady.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @license RequireJS domReady 2.0.1 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
3 | * Available via the MIT or new BSD license.
4 | * see: http://github.com/requirejs/domReady for details
5 | */
6 | /*jslint */
7 | /*global require: false, define: false, requirejs: false,
8 | window: false, clearInterval: false, document: false,
9 | self: false, setInterval: false */
10 |
11 |
12 | define(function () {
13 | 'use strict';
14 |
15 | var isTop, testDiv, scrollIntervalId,
16 | isBrowser = typeof window !== "undefined" && window.document,
17 | isPageLoaded = !isBrowser,
18 | doc = isBrowser ? document : null,
19 | readyCalls = [];
20 |
21 | function runCallbacks(callbacks) {
22 | var i;
23 | for (i = 0; i < callbacks.length; i += 1) {
24 | callbacks[i](doc);
25 | }
26 | }
27 |
28 | function callReady() {
29 | var callbacks = readyCalls;
30 |
31 | if (isPageLoaded) {
32 | //Call the DOM ready callbacks
33 | if (callbacks.length) {
34 | readyCalls = [];
35 | runCallbacks(callbacks);
36 | }
37 | }
38 | }
39 |
40 | /**
41 | * Sets the page as loaded.
42 | */
43 | function pageLoaded() {
44 | if (!isPageLoaded) {
45 | isPageLoaded = true;
46 | if (scrollIntervalId) {
47 | clearInterval(scrollIntervalId);
48 | }
49 |
50 | callReady();
51 | }
52 | }
53 |
54 | if (isBrowser) {
55 | if (document.addEventListener) {
56 | //Standards. Hooray! Assumption here that if standards based,
57 | //it knows about DOMContentLoaded.
58 | document.addEventListener("DOMContentLoaded", pageLoaded, false);
59 | window.addEventListener("load", pageLoaded, false);
60 | } else if (window.attachEvent) {
61 | window.attachEvent("onload", pageLoaded);
62 |
63 | testDiv = document.createElement('div');
64 | try {
65 | isTop = window.frameElement === null;
66 | } catch (e) {}
67 |
68 | //DOMContentLoaded approximation that uses a doScroll, as found by
69 | //Diego Perini: http://javascript.nwbox.com/IEContentLoaded/,
70 | //but modified by other contributors, including jdalton
71 | if (testDiv.doScroll && isTop && window.external) {
72 | scrollIntervalId = setInterval(function () {
73 | try {
74 | testDiv.doScroll();
75 | pageLoaded();
76 | } catch (e) {}
77 | }, 30);
78 | }
79 | }
80 |
81 | //Check if document already complete, and if so, just trigger page load
82 | //listeners. Latest webkit browsers also use "interactive", and
83 | //will fire the onDOMContentLoaded before "interactive" but not after
84 | //entering "interactive" or "complete". More details:
85 | //http://dev.w3.org/html5/spec/the-end.html#the-end
86 | //http://stackoverflow.com/questions/3665561/document-readystate-of-interactive-vs-ondomcontentloaded
87 | //Hmm, this is more complicated on further use, see "firing too early"
88 | //bug: https://github.com/requirejs/domReady/issues/1
89 | //so removing the || document.readyState === "interactive" test.
90 | //There is still a window.onload binding that should get fired if
91 | //DOMContentLoaded is missed.
92 | if (document.readyState === "complete") {
93 | pageLoaded();
94 | }
95 | }
96 |
97 | /** START OF PUBLIC API **/
98 |
99 | /**
100 | * Registers a callback for DOM ready. If DOM is already ready, the
101 | * callback is called immediately.
102 | * @param {Function} callback
103 | */
104 | function domReady(callback) {
105 | if (isPageLoaded) {
106 | callback(doc);
107 | } else {
108 | readyCalls.push(callback);
109 | }
110 | return domReady;
111 | }
112 |
113 | domReady.version = '2.0.1';
114 |
115 | /**
116 | * Loader Plugin API method
117 | */
118 | domReady.load = function (name, req, onLoad, config) {
119 | if (config.isBuild) {
120 | onLoad(null);
121 | } else {
122 | domReady(onLoad);
123 | }
124 | };
125 |
126 | /** END OF PUBLIC API **/
127 |
128 | return domReady;
129 | });
130 |
--------------------------------------------------------------------------------
/Html5UploadDemo/Html5UploadDemo.csproj:
--------------------------------------------------------------------------------
1 |
2 |