forked from FineUploader/integration-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
210 lines (184 loc) · 10.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<!--
Index page for Fine Uploader UI S3 jQuery. Used to demonstrate uploading to S3 without writing a single line
of server-side code.
Maintained by Widen Enterprises.
This example:
- Orders a maximum 50x50 thumbnail to be displayed next to each submitted file.
- Creates a visible drop zone with a text background that is scrollable & restricted in height.
- Ensures file-related buttons all line up in the UI.
- Rejects files that are too large.
- Restricts session to 5 net uploaded files.
- Breaks large files up into separate chunks/requests.
- Utilizes Google as the identity provider.
- Refreshes the AWS credentials before they expire.
- Prompts the user to re-login before the OAuth2 bearer token from Google expires.
- Saves the files in the S3 bucket under a "directory" named after the signed-in user.
Requirements:
- A "modern" browser (not IE9 or older)
- Fine Uploader S3 UI jQuery (4.2+) w/ preview and drag & drop support enabled
- jQuery 1.5+
- AWS JavaScript SDK
- Google+ OAuth JavaScript SDK
- Simple web server to server static content (HTML, JavaScript, & placeholder files)
-->
<head>
<title>S3 server-less example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fine Uploader S3 No Server Demo">
<meta name="author" content="Widen">
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader">
<div class="qq-upload-button-selector qq-upload-button">
<div>Select Files</div>
</div>
<div class="qq-upload-drop-area-selector uploader-drop-zone">
<span class="drop-zone-text">Drop Files Here</span>
<ul class="qq-upload-list-selector qq-upload-list">
<li class="file-container">
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<div class="file-info">
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<img class="qq-thumbnail-selector" qq-max-size="50" qq-server-scale>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
</div>
<button class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</button>
<button class="qq-upload-retry-selector qq-upload-retry" href="#">Retry</button>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
<a class="view-btn" target="_blank" style="display: none;">
<input type="button" value="View">
</a>
</li>
</ul>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
</div>
</script>
<script>
var s3DemoGlobals = {};
</script>
<link href="//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'>
<link href="fineuploader-4.2.1.min.css" rel='stylesheet' type='text/css'>
<link href="custom.css" rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<a href="http://fineuploader.com"><img style="display:block; margin-left: auto; margin-right: auto;" src="https://raw.github.com/Widen/fine-uploader/gh-pages/img/fineuploader-header-logo.png" /></a>
<br/>
<h2 class="demo-title">Upload files to Amazon S3 - No server-side code required</h2>
<!-- Only lods the content between the "if tags" if you are not running IE9 or older -->
<!--[if !IE | gt IE 9]> -->
<!-- Required for the Amazon & Facebook JavaScript SDKs -->
<div id="amazon-root"></div>
<div id="fb-root"></div>
<!-- Scripts required for this demo -->
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="s3.jquery.fineuploader-4.2.1.min.js"></script>
<script src="aws-sdk-glue.js"></script>
<script src="google-auth.js"></script>
<script src="amazon-auth.js"></script>
<script src="facebook-auth.js"></script>
<script src="fineuploader-glue.js"></script>
<script src="//sdk.amazonaws.com/js/aws-sdk-2.0.0-rc4.min.js"></script>
<div class="row-fluid">
<div class="span8">
<h4>Don't want to write ANY server-side code at all?</h4>
<p>Leave EVERYTHING up to the browser and S3.</p>
<div style="text-align: left;">
<p>Fine Uploader can handle the S3 request signing for you. Just provide temporary credentials for
your locked-down IAM user and pass them off to Fine Uploader S3. You can do this all client-side,
easily and securely, using Google, Facebook, or Amazon as an identity provider, and the AWS JavaScript SDK.
Need more details? Read the blog post that covers step-by-step setup for this workflow.</p>
<p>This demo uses only client-side code to authenticate and upload files to S3. We have not written
any server-side code at all. In fact, the entire example is hosted in an S3 bucket. Try it out
by choosing one of the identity providers to the right.</p>
</div>
</div>
<div class="span4">
<div class="sign-in-buttons">
<!-- Google sign-in button -->
<div id="google-signin" class="signin-button" style="position:relative; top:18px;">
<span
class="g-signin"
data-callback="s3GoogleOauthHandler"
data-clientid="932310502780-qioh5co92p5dhk010rmi6vjk9dnotcnh.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-scope="https://www.googleapis.com/auth/plus.login"
data-approvalprompt="force">
</span>
</div>
<!-- Amazon sign-in button -->
<a href="#" id="amazon-signin" class="signin-button">
<img border="0" alt="Login with Amazon"
src="https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_156x32.png"
width="156" height="32" />
</a>
<!-- Facebook sign-in button -->
<a href="#" id="facebook-signin" class="signin-button">
<img border="0" alt="Login with Facebook"
src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/851579_604690072906757_1648100996_n.png"
width="156" height="32" />
</a>
</div>
</div>
</div>
<div id="uploader"></div>
<hr>
<h3>Additional links:</h3>
<p>
<ul>
<li><a href="https://github.com/Widen/fine-uploader-examples/tree/master/src/s3-no-server">Source code for this demo</a></li>
<li><a href="http://wp.me/p3FpYP-9w">Blog post describing this demo</a></li>
<li><a href="http://docs.fineuploader.com/features/no-server-uploads.html">Client-side signing feature documentation</a></li>
</ul>
</p>
<div class="hero-unit"><p><strong>Note:</strong> If you simply want to avoid the signature HTTP requests for each file/chunk, and need
to support legacy browsers, you can do that too, but some server-side code will be required
to utilize the AWS temporary credentials calls. See the client-side signing feature page
in the documentation for more details.</p></div>
<!-- <![endif]-->
<!-- Displayed in place of login buttons & uploader if the browser is IE9 or older. -->
<!--[if lt IE 10]>
<div>Sorry, this demo is only functional in modern browsers, such as IE10+, Chrome, Firefox, Opera, and Safari.</div>
<![endif]-->
</div>
<footer class="footer">
<div class="container">
<img style="float:right;" src="https://raw.github.com/Widen/fine-uploader/gh-pages/img/HTML5_Badge_64.png" alt="Fine Uploader uses HTML5" width="64" height="64" />
<p><a href="index.html"><img src="https://raw.github.com/Widen/fine-uploader/gh-pages/img/FineUploaderWhite_logo.png" alt="Fine Uploader Logo" /></a></p>
<h5 style="font-weight:normal; color: #ffffff;">A Product of <a href="http://www.widen.com/"><img class="widenIcon" src="https://raw.github.com/Widen/fine-uploader/gh-pages/img/WidenLogo.png" alt="Widen logo" /></a></h5>
<div class="row-fluid">
<div class="span10">
<ul class="footer-links">
<li>
<a href="http://fineuploader.com/about.html">About</a>
</li>
<li>
<a href="http://fineuploader.com/licensing.html" target="_blank">Licensing</a>
</li>
<li>
<a href="http://fineuploader.com/support.html">Support</a>
</li>
<li>
<a href="http://docs.fineuploader.com" target="_blank">Readme</a>
</li>
<li>
<a href="https://twitter.com/intent/follow?original_referer=http%3A%2F%2Flocalhost.yden.us%2F®ion=follow_link&screen_name=fineuploader&tw_p=followbutton&variant=2.0">
Twitter</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>