133 |
195 |
196 |
201 |
202 |
203 |
204 |
205 |
299 |
300 |
315 |
316 |
317 |
318 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vimeo-upload",
3 | "version": "0.1.6",
4 | "description": "Upload videos to your Vimeo account and update their metadata directly from a browser or a Node.js app.",
5 | "main": "vimeo-upload.js",
6 | "homepage": "https://github.com/websemantics/vimeo-upload#readme",
7 | "repository" : {
8 | "type" : "git",
9 | "url" : "websemantics/vimeo-upload.git"
10 | },
11 | "bugs": {
12 | "url": "https://github.com/websemantics/vimeo-upload/issues"
13 | },
14 | "keywords": [
15 | "vimeo",
16 | "video",
17 | "upload",
18 | "node",
19 | "browser"
20 | ],
21 | "deploy": {
22 | "name": "iAyeBot",
23 | "email": "iayebot@websemantics.ca",
24 | "dist": "dist",
25 | "message": "Deploy to gh-pages"
26 | },
27 | "scripts": {
28 | "deploy": "cd $npm_package_deploy_dist && git push --force --quiet \"https://${GH_TOKEN}@${GH_REF}\" master:gh-pages > /dev/null 2>&1 ",
29 | "predeploy": "mkdir -p ${npm_package_deploy_dist} && npm run copy -s&& cd $npm_package_deploy_dist && git init && git config user.name $npm_package_deploy_name && git config user.email $npm_package_deploy_email && git add -A . && git commit -am \"$npm_package_deploy_message\" ",
30 | "copy": "cp -r ./img $npm_package_deploy_dist && cp ./index.html $npm_package_deploy_dist && cp ./vimeo-upload.js $npm_package_deploy_dist "
31 | },
32 | "author": "Adnan M.Sagar, PhD.",
33 | "license": "Apache 2.0"
34 | }
35 |
--------------------------------------------------------------------------------
/upload-cordova.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | /**
4 | * Helper for implementing retries with backoff. Initial retry
5 | * delay is 1 second, increasing by 2x (+jitter) for subsequent retries
6 | *
7 | * @constructor
8 | */
9 | var RetryHandler = function() {
10 | this.interval = 1000; // Start at one second
11 | this.maxInterval = 60 * 1000; // Don't wait longer than a minute
12 | };
13 |
14 | /**
15 | * Invoke the function after waiting
16 | *
17 | * @param {function} fn Function to invoke
18 | */
19 | RetryHandler.prototype.retry = function(fn) {
20 | setTimeout(fn, this.interval);
21 | this.interval = this.nextInterval_();
22 | };
23 |
24 | /**
25 | * Reset the counter (e.g. after successful request.)
26 | */
27 | RetryHandler.prototype.reset = function() {
28 | this.interval = 1000;
29 | };
30 |
31 | /**
32 | * Calculate the next wait time.
33 | * @return {number} Next wait interval, in milliseconds
34 | *
35 | * @private
36 | */
37 | RetryHandler.prototype.nextInterval_ = function() {
38 | var interval = this.interval * 2 + this.getRandomInt_(0, 1000);
39 | return Math.min(interval, this.maxInterval);
40 | };
41 |
42 | /**
43 | * Get a random int in the range of min to max. Used to add jitter to wait times.
44 | *
45 | * @param {number} min Lower bounds
46 | * @param {number} max Upper bounds
47 | * @private
48 | */
49 | RetryHandler.prototype.getRandomInt_ = function(min, max) {
50 | return Math.floor(Math.random() * (max - min + 1) + min);
51 | };
52 |
53 |
54 | /**
55 | * Helper class for resumable uploads using XHR/CORS. Can upload any Blob-like item, whether
56 | * files or in-memory constructs.
57 | *
58 | * @example
59 | * var content = new Blob(["Hello world"], {"type": "text/plain"});
60 | * var uploader = new MediaUploader({
61 | * file: content,
62 | * token: accessToken,
63 | * onComplete: function(data) { ... }
64 | * onError: function(data) { ... }
65 | * });
66 | * uploader.upload();
67 | *
68 | * @constructor
69 | * @param {object} options Hash of options
70 | * @param {string} options.token Access token
71 | * @param {blob} options.file Blob-like item to upload
72 | * @param {string} [options.fileId] ID of file if replacing
73 | * @param {object} [options.params] Additional query parameters
74 | * @param {string} [options.contentType] Content-type, if overriding the type of the blob.
75 | * @param {object} [options.metadata] File metadata
76 | * @param {function} [options.onComplete] Callback for when upload is complete
77 | * @param {function} [options.onProgress] Callback for status for the in-progress upload
78 | * @param {function} [options.onError] Callback if upload fails
79 | */
80 | var MediaUploader = function(options) {
81 | var noop = function() {};
82 | this.isCordovaApp = options.isCordovaApp;
83 | this.realUrl = options.realUrl;
84 | this.file = options.file;
85 | this.contentType = options.contentType || this.file.type || 'application/octet-stream';
86 | this.metadata = options.metadata || {
87 | 'title': this.file.name,
88 | 'mimeType': this.contentType
89 | };
90 | this.token = options.token;
91 | this.onComplete = options.onComplete || noop;
92 | this.onProgress = options.onProgress || noop;
93 | this.onError = options.onError || noop;
94 | this.offset = options.offset || 0;
95 | this.chunkSize = options.chunkSize || 0;
96 | this.retryHandler = new RetryHandler();
97 |
98 | this.url = options.url;
99 |
100 | if (!this.url) {
101 | var params = options.params || {};
102 | // params.uploadType = 'resumable';
103 | this.url = this.buildUrl_(options.fileId, params, options.baseUrl);
104 | }
105 |
106 | this.httpMethod = options.fileId ? 'PUT' : 'POST';
107 |
108 | this.currentXHR = null;
109 | this.chunkProgress = 0;
110 | };
111 |
112 | MediaUploader.prototype.destroy = function() {
113 | this.isCordovaApp = null;
114 | this.realUrl = null;
115 | this.file = null;
116 | this.contentType = null;
117 | this.metadata = null;
118 | this.token = null;
119 | this.onComplete = null;
120 | this.onProgress = null;
121 | this.onError = null;
122 | this.offset = null;
123 | this.chunkSize = null;
124 | this.retryHandler = null;
125 | this.url = null;
126 | this.httpMethod = null;
127 |
128 | this.currentXHR = null;
129 | this.chunkProgress = null;
130 |
131 | this.user = null;
132 | this.ticket_id = null;
133 | this.complete_url = null;
134 | this.token = null;
135 |
136 | this.offset = null;
137 | }
138 |
139 | /**
140 | * Initiate the upload (Get vimeo ticket number and upload url)
141 | */
142 | MediaUploader.prototype.upload = function() {
143 |
144 | var xhr = new XMLHttpRequest();
145 |
146 | xhr.open(this.httpMethod, this.url, true);
147 | xhr.setRequestHeader('Authorization', 'Bearer ' + this.token);
148 | xhr.setRequestHeader('Content-Type', 'application/json');
149 |
150 | xhr.onload = function(e) {
151 | // get vimeo upload url, user (for available quote), ticket id and complete url
152 | if (e.target.status < 400) {
153 | var response = JSON.parse(e.target.responseText);
154 | this.url = response.upload_link_secure;
155 | this.user = response.user;
156 | this.ticket_id = response.ticket_id;
157 | this.complete_url = "https://api.vimeo.com"+response.complete_uri;
158 | this.sendFile_();
159 | } else {
160 | this.onUploadError_(e);
161 | }
162 | }.bind(this);
163 |
164 | xhr.onerror = this.onUploadError_.bind(this);
165 | xhr.send(JSON.stringify({
166 | type:'streaming'
167 | }));
168 |
169 | this.currentXHR = xhr;
170 | };
171 |
172 | MediaUploader.prototype.abort = function() {
173 | this.currentXHR.abort()
174 | this.onError("Upload aborted");
175 | };
176 |
177 | /**
178 | * Send the actual file content.
179 | * New @ 16 June 2015
180 | * This has been modified to support Cordova FileTransfer plugin
181 | *
182 | * @private
183 | */
184 | MediaUploader.prototype.sendFile_ = function() {
185 | var content = this.file;
186 | var end = this.file.size;
187 |
188 | if (this.offset || this.chunkSize) {
189 | // Only bother to slice the file if we're either resuming or uploading in chunks
190 | if (this.chunkSize) {
191 | end = Math.min(this.offset + this.chunkSize, this.file.size);
192 | }
193 | content = content.slice(this.offset, end);
194 | }
195 |
196 | this.chunkProgress = end
197 |
198 | if(this.isCordovaApp) {
199 | // Read the video file,
200 | var reader = new FileReader();
201 |
202 | reader.onloadend = function (evt) {
203 | this.send_(evt.target.result, end);
204 | }.bind(this);
205 |
206 | reader.readAsArrayBuffer(content);
207 |
208 | } else{
209 | this.send_(content, end);
210 | }
211 |
212 | };
213 |
214 |
215 | /**
216 | * Send the file
217 | * Added @ 16 June 2015, ..
218 | * @private
219 | */
220 | MediaUploader.prototype.send_ = function(content, end) {
221 | self = this
222 |
223 | var xhr = new XMLHttpRequest();
224 | xhr.open('PUT', this.url, true);
225 | xhr.setRequestHeader('Content-Type', this.contentType);
226 | // xhr.setRequestHeader('Content-Length', this.file.size);
227 | xhr.setRequestHeader('Content-Range', "bytes " + this.offset + "-" + (end - 1) + "/" + this.file.size);
228 |
229 | if (xhr.upload) {
230 | // xhr.upload.addEventListener('progress', this.onProgress);
231 | xhr.upload.addEventListener('progress', function(xmlHttpRequestProgressEvent) {
232 | loaded = self.offset + xmlHttpRequestProgressEvent.loaded;
233 | total = self.file.size;
234 | self.onProgress(loaded, total);
235 | });
236 | }
237 | xhr.onload = this.onContentUploadSuccess_.bind(this);
238 | xhr.onerror = this.onContentUploadError_.bind(this);
239 | xhr.send(content);
240 |
241 | this.currentXHR = xhr
242 | }
243 |
244 | /**
245 | * Verify for the state of the file for completion.
246 | * Added @ 16 June 2015, ..
247 | * @private
248 | */
249 | MediaUploader.prototype.verify_ = function() {
250 | var xhr = new XMLHttpRequest();
251 | xhr.open('PUT', this.url, true);
252 | xhr.setRequestHeader('Content-Length', "0");
253 | xhr.setRequestHeader('Content-Range', "bytes */*");
254 |
255 | xhr.onload = function(e) {
256 | if (e.target.status == 200 || e.target.status == 201) {
257 | // console.log('verify success!!');
258 | } else if (e.target.status == 308) {
259 | // console.log('status 308');
260 | }
261 |
262 | };
263 |
264 | xhr.onerror = function(e) {
265 | if (e.target.status && e.target.status < 500) {
266 | // console.log(e.target.response);
267 | } else {
268 | // Do nothing,
269 | }
270 | };
271 | xhr.send();
272 | this.currentXHR = xhr
273 | };
274 |
275 | /**
276 | * Query for the state of the file for resumption.
277 | *
278 | * @private
279 | */
280 | MediaUploader.prototype.resume_ = function() {
281 | self = this
282 | var xhr = new XMLHttpRequest();
283 | xhr.open('PUT', this.url, true);
284 | xhr.setRequestHeader('Content-Range', "bytes */" + this.file.size);
285 | xhr.setRequestHeader('X-Upload-Content-Type', this.file.type);
286 | if (xhr.upload) {
287 | // xhr.upload.addEventListener('progress', this.onProgress);
288 | xhr.upload.addEventListener('progress', function(xmlHttpRequestProgressEvent) {
289 | loaded = self.offset + xmlHttpRequestProgressEvent.loaded;
290 | total = self.file.size;
291 | self.onProgress(loaded, total);
292 | });
293 | }
294 | xhr.onload = this.onContentUploadSuccess_.bind(this);
295 | xhr.onerror = this.onContentUploadError_.bind(this);
296 | xhr.send();
297 | this.currentXHR = xhr
298 | };
299 |
300 | /**
301 | * The final step is to call vimeo.videos.upload.complete to queue up
302 | * the video for transcoding.
303 | *
304 | * If successful call 'onComplete'
305 | *
306 | * @private
307 | */
308 | MediaUploader.prototype.complete_ = function() {
309 |
310 | var xhr = new XMLHttpRequest();
311 | xhr.open('DELETE', this.complete_url, true);
312 | xhr.setRequestHeader('Authorization', 'Bearer ' + this.token);
313 |
314 | xhr.onload = function(e) {
315 |
316 | // Get the video location (videoId)
317 | if (e.target.status < 400) {
318 |
319 | var location = e.target.getResponseHeader('Location');
320 |
321 | // Example of location: ' /videos/115365719', extract the video id only
322 | var video_id = location.split('/').pop();
323 |
324 | this.onComplete(video_id);
325 |
326 | } else {
327 | this.onCompleteError_(e);
328 | }
329 | }.bind(this);
330 |
331 | xhr.onerror = this.onCompleteError_.bind(this);
332 | xhr.send();
333 | };
334 |
335 | /**
336 | * Handle successful responses for uploads. Depending on the context,
337 | * may continue with uploading the next chunk of the file or, if complete,
338 | * invokes vimeo complete service.
339 | *
340 | * @private
341 | * @param {object} e XHR event
342 | */
343 | MediaUploader.prototype.onContentUploadSuccess_ = function(e) {
344 |
345 | if (e.target.status == 200 || e.target.status == 201 || e.target.status == 308) {
346 | this.offset = this.chunkProgress;
347 |
348 | if (this.offset == this.file.size) {
349 | this.complete_();
350 | } else {
351 | this.retryHandler.reset();
352 | this.sendFile_();
353 | }
354 | }
355 | };
356 |
357 | /**
358 | * Handles errors for uploads. Either retries or aborts depending
359 | * on the error.
360 | *
361 | * @private
362 | * @param {object} e XHR event
363 | */
364 | MediaUploader.prototype.onContentUploadError_ = function(e) {
365 | console.error("MediaUploader.prototype.onContentUploadError_ e.target.status: ", e.target.status)
366 | if (e.target.status && e.target.status < 500) {
367 | this.onError(e.target.response);
368 | } else {
369 | this.retryHandler.retry(this.resume_.bind(this));
370 | }
371 | };
372 |
373 | /**
374 | * Handles errors for the complete request.
375 | *
376 | * @private
377 | * @param {object} e XHR event
378 | */
379 | MediaUploader.prototype.onCompleteError_ = function(e) {
380 | console.error("MediaUploader.prototype.onCompleteError_ e.target.response: ", e.target.response)
381 | this.onError(e.target.response); // TODO - Retries for initial upload
382 | };
383 |
384 | /**
385 | * Handles errors for the initial request.
386 | *
387 | * @private
388 | * @param {object} e XHR event
389 | */
390 | MediaUploader.prototype.onUploadError_ = function(e) {
391 | console.error("MediaUploader.prototype.onUploadError_ e.target.response: ", e.target.response)
392 | this.onError(e.target.response); // TODO - Retries for initial upload
393 | };
394 |
395 | /**
396 | * Construct a query string from a hash/object
397 | *
398 | * @private
399 | * @param {object} [params] Key/value pairs for query string
400 | * @return {string} query string
401 | */
402 | MediaUploader.prototype.buildQuery_ = function(params) {
403 | params = params || {};
404 | return Object.keys(params).map(function(key) {
405 | return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
406 | }).join('&');
407 | };
408 |
409 | /**
410 | * Build the drive upload URL
411 | *
412 | * @private
413 | * @param {string} [id] File ID if replacing
414 | * @param {object} [params] Query parameters
415 | * @return {string} URL
416 | */
417 | MediaUploader.prototype.buildUrl_ = function(id, params, baseUrl) {
418 | var url = baseUrl || 'https://api.vimeo.com/me/videos/';
419 | if (id) {
420 | url += id;
421 | }
422 | var query = this.buildQuery_(params);
423 | if (query) {
424 | url += '?' + query;
425 | }
426 | return url;
427 | };
428 |
429 |
--------------------------------------------------------------------------------
/vimeo-upload.js:
--------------------------------------------------------------------------------
1 | /*
2 | | Vimeo-Upload: Upload videos to your Vimeo account directly from a
3 | | browser or a Node.js app
4 | |
5 | | ╭───╮╭─╮
6 | | │ ││ │╭─╮╭──┬──┬─╮╭───╮╭───╮
7 | | │ ││ │├─┤│ ╭╮ ╭╮ ││ ─ ││╭╮ │ ╭────────┬─────────────────────╮
8 | | ╰╮ ╰╯╭╯│ ││ ││ ││ ││ ─┤│╰╯ │ | UPLOAD │ ▒▒▒▒▒▒▒▒▒▒▒░░░░ %75 |
9 | | ╰────╯ ╰─╯╰─╯╰─╯╰─╯╰───╯╰───╯ ╰────────┴─────────────────────╯
10 | |
11 | |
12 | | This project was released under Apache 2.0" license.
13 | |
14 | | @link http://websemantics.ca
15 | | @author Web Semantics, Inc. Dev Team
134 | 
135 |
136 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 | Download
150 | Contributors
151 | Github
152 |
153 |
135 | Uploading video files directly with vanilla Javascript to your Vimeo account.
137 | 138 | 139 |Enter vimeo access token, name and description then drag your video file into the dotted area below to upload to your vimeo account.
154 |
155 |
157 |
158 |
159 |
163 |
160 |
161 |
162 |
164 |
194 |
165 |
186 |
166 |
167 |
169 | Create an access token here: https://developer.vimeo.com/apps
168 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
179 |
180 |
181 |
184 |
185 |
187 |
189 | 192 |
193 | Drop Files Here
188 | 189 | 192 |