Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

progress bar

  • Loading branch information...
commit 8a087b7866592551397d1bc15ea0c3a077b0bc8b 1 parent 7488d54
Drew LeSueur authored
1  app.coffee
@@ -93,6 +93,7 @@ app.post "/", (req, res) ->
93 93 # or you could use drews.doneMaker
94 94 map files, (file, cb) ->
95 95 extension = s(file.path.split("."), 1).join "."
  96 + console.log JSON.stringify file
96 97 createFileHash file.path, (err, hash) ->
97 98 fileName = "#{hash}.#{extension}"
98 99 moveFile file.path, "./public/files/#{fileName}", (err) ->
79 public/filebox.coffee
... ... @@ -1,3 +1,4 @@
  1 +# https://developer.mozilla.org/En/Using_XMLHttpRequest
1 2 #TODO: implement ajax something like this
2 3 define "filebox", ->
3 4 _ = require "underscore"
@@ -5,37 +6,63 @@ define "filebox", ->
5 6 require "nimble"
6 7 $ = require "jquery"
7 8 {"on":bind, trigger, s, log, eachArray} = _
8   - self = {}
9   - self.getEl = () ->
  9 + FileBox = (options={}) ->
  10 + _.extend options,
  11 + color: "blue"
  12 + backgroundColor: "yellow"
  13 + self = {}
10 14 form = $ """
11   - <form id="file-form" enctype="multipart-form" method="POST" action="files">
12   - <input type="file" id="files" name="files" multiple/>
13   - </form>
  15 + <form id="file-form" enctype="multipart-form" method="POST" action="files">
  16 + <input type="file" id="files" name="files" multiple/>
  17 + </form>
14 18 """
15 19 form.bind "change", () ->
16 20 files = form.find("#files")[0].files
17 21 trigger self, "filesready", files
18   - form
19   - bind self, "filesready", (files) ->
20   - log "here are the fiels"
21   - eachArray files, (file) ->
22   - log "the file is"
23   - log file
24   - formData = new FormData
25   - formData.append "name", file.name
26   - formData.append "size", file.size
27   - formData.append "type", file.type
28   - formData.append "file", file
29   - reader = new FileReader()
30   - xhr = new XMLHttpRequest()
31   - xhr.open("POST", "http://filebox.drewl.us/");
32   - xhr.onload = (e) ->
33   - console.log "done!"
34   - res = JSON.parse e.currentTarget.responseText
35   - trigger self, "uploaded", res
36   - xhr.send formData
37   - self
38   -
39 22
  23 + bars = $ """
  24 + <div class="progress-bar-wrapper"></div>
  25 + """
  26 +
  27 + self.getEl = () ->
  28 + form
  29 +
  30 + self.getProgressBars = () ->
  31 + bars
40 32
  33 + bind self, "filesready", (files) ->
  34 + log "here are the fiels"
  35 + eachArray files, (file) ->
  36 + bar = $ """
  37 + <div style="border: 1px solid black; width:50px; height: 10px; margin: 0; padding: 0; background-color: #{options.backgroundColor}" class="progress-bar">
  38 + <div style="height: 10px; width: 0px; margin: 0; padding: 0; background-color: #{options.color};" class="progress"></div>
  39 + </div>
  40 + """
  41 + bar.appendTo bars
41 42
  43 + log "the file is"
  44 + log file
  45 + formData = new FormData
  46 + formData.append "name", file.name
  47 + formData.append "size", file.size
  48 + formData.append "type", file.type
  49 + formData.append "file", file
  50 + reader = new FileReader()
  51 + xhr = new XMLHttpRequest()
  52 + xhr.open("POST", "http://filebox.drewl.us/");
  53 + xhr.onload = (e) ->
  54 + console.log "done!"
  55 + res = JSON.parse e.currentTarget.responseText
  56 + trigger self, "uploaded", res
  57 + xhr.upload.onprogress = (e) ->
  58 + console.log e
  59 + progress = e.position / e.totalSize
  60 + width = bar.width()
  61 + console.log "the width is #{width}"
  62 + bar.find(".progress").css "width", "#{width * progress}px"
  63 +
  64 + console.log "there are progress"
  65 + console.log progress
  66 + trigger self, "progress", progress
  67 + xhr.send formData
  68 + self
84 public/filebox.js
... ... @@ -1,45 +1,71 @@
1 1 (function() {
2 2 define("filebox", function() {
3   - var $, bind, drews, eachArray, log, s, self, trigger, _;
  3 + var $, FileBox, bind, drews, eachArray, log, s, trigger, _;
4 4 _ = require("underscore");
5 5 drews = require("drews-mixins");
6 6 require("nimble");
7 7 $ = require("jquery");
8 8 bind = _["on"], trigger = _.trigger, s = _.s, log = _.log, eachArray = _.eachArray;
9   - self = {};
10   - self.getEl = function() {
11   - var form;
  9 + return FileBox = function(options) {
  10 + var bars, form, self;
  11 + if (options == null) {
  12 + options = {};
  13 + }
  14 + _.extend(options, {
  15 + color: "blue",
  16 + backgroundColor: "yellow"
  17 + });
  18 + self = {};
12 19 form = $("<form id=\"file-form\" enctype=\"multipart-form\" method=\"POST\" action=\"files\">\n<input type=\"file\" id=\"files\" name=\"files\" multiple/>\n</form>");
13 20 form.bind("change", function() {
14 21 var files;
15 22 files = form.find("#files")[0].files;
16 23 return trigger(self, "filesready", files);
17 24 });
18   - return form;
19   - };
20   - bind(self, "filesready", function(files) {
21   - log("here are the fiels");
22   - return eachArray(files, function(file) {
23   - var formData, reader, xhr;
24   - log("the file is");
25   - log(file);
26   - formData = new FormData;
27   - formData.append("name", file.name);
28   - formData.append("size", file.size);
29   - formData.append("type", file.type);
30   - formData.append("file", file);
31   - reader = new FileReader();
32   - xhr = new XMLHttpRequest();
33   - xhr.open("POST", "http://filebox.drewl.us/");
34   - xhr.onload = function(e) {
35   - var res;
36   - console.log("done!");
37   - res = JSON.parse(e.currentTarget.responseText);
38   - return trigger(self, "uploaded", res);
39   - };
40   - return xhr.send(formData);
  25 + bars = $("<div class=\"progress-bar-wrapper\"></div>");
  26 + self.getEl = function() {
  27 + return form;
  28 + };
  29 + self.getProgressBars = function() {
  30 + return bars;
  31 + };
  32 + bind(self, "filesready", function(files) {
  33 + log("here are the fiels");
  34 + return eachArray(files, function(file) {
  35 + var bar, formData, reader, xhr;
  36 + bar = $("<div style=\"border: 1px solid black; width:50px; height: 10px; margin: 0; padding: 0; background-color: " + options.backgroundColor + "\" class=\"progress-bar\">\n <div style=\"height: 10px; width: 0px; margin: 0; padding: 0; background-color: " + options.color + ";\" class=\"progress\"></div>\n</div>");
  37 + bar.appendTo(bars);
  38 + log("the file is");
  39 + log(file);
  40 + formData = new FormData;
  41 + formData.append("name", file.name);
  42 + formData.append("size", file.size);
  43 + formData.append("type", file.type);
  44 + formData.append("file", file);
  45 + reader = new FileReader();
  46 + xhr = new XMLHttpRequest();
  47 + xhr.open("POST", "http://filebox.drewl.us/");
  48 + xhr.onload = function(e) {
  49 + var res;
  50 + console.log("done!");
  51 + res = JSON.parse(e.currentTarget.responseText);
  52 + return trigger(self, "uploaded", res);
  53 + };
  54 + xhr.upload.onprogress = function(e) {
  55 + var progress, width;
  56 + console.log(e);
  57 + progress = e.position / e.totalSize;
  58 + width = bar.width();
  59 + console.log("the width is " + width);
  60 + bar.find(".progress").css("width", "" + (width * progress) + "px");
  61 + console.log("there are progress");
  62 + console.log(progress);
  63 + return trigger(self, "progress", progress);
  64 + };
  65 + return xhr.send(formData);
  66 + });
41 67 });
42   - });
43   - return self;
  68 + return self;
  69 + };
44 70 });
45 71 }).call(this);
8 public/index.coffee
@@ -2,12 +2,14 @@
2 2 _ = require "underscore"
3 3 $ = require "jquery"
4 4 drews = require "drews-mixins"
5   -filebox = require "filebox"
  5 +FileBox = require "filebox"
6 6 $ ->
7 7 {"on": bind, log, each} = _
  8 + filebox = FileBox()
8 9 fileForm = filebox.getEl()
  10 + progressBar = filebox.getProgressBars()
9 11 log fileForm
10   - $(document.body).append fileForm
  12 + $(document.body).append(fileForm).append progressBar
11 13 bind filebox, "uploaded", (urls) ->
12 14 log "the urls are "
13 15 log urls
@@ -15,6 +17,8 @@ $ ->
15 17 $(document.body).append $ """
16 18 <a href="#{url}" target="_blank">file</a>
17 19 """
  20 + bind filebox, "progress", (progress) ->
  21 +
18 22
19 23
20 24
13 public/index.js
... ... @@ -1,21 +1,24 @@
1 1 (function() {
2   - var $, drews, filebox, _;
  2 + var $, FileBox, drews, _;
3 3 _ = require("underscore");
4 4 $ = require("jquery");
5 5 drews = require("drews-mixins");
6   - filebox = require("filebox");
  6 + FileBox = require("filebox");
7 7 $(function() {
8   - var bind, each, fileForm, log;
  8 + var bind, each, fileForm, filebox, log, progressBar;
9 9 bind = _["on"], log = _.log, each = _.each;
  10 + filebox = FileBox();
10 11 fileForm = filebox.getEl();
  12 + progressBar = filebox.getProgressBars();
11 13 log(fileForm);
12   - $(document.body).append(fileForm);
13   - return bind(filebox, "uploaded", function(urls) {
  14 + $(document.body).append(fileForm).append(progressBar);
  15 + bind(filebox, "uploaded", function(urls) {
14 16 log("the urls are ");
15 17 log(urls);
16 18 return each(urls, function(url) {
17 19 return $(document.body).append($("<a href=\"" + url + "\" target=\"_blank\">file</a>"));
18 20 });
19 21 });
  22 + return bind(filebox, "progress", function(progress) {});
20 23 });
21 24 }).call(this);

0 comments on commit 8a087b7

Please sign in to comment.
Something went wrong with that request. Please try again.