Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

progress bar

  • Loading branch information...
commit 8a087b7866592551397d1bc15ea0c3a077b0bc8b 1 parent 7488d54
@drewlesueur authored
View
1  app.coffee
@@ -93,6 +93,7 @@ app.post "/", (req, res) ->
# or you could use drews.doneMaker
map files, (file, cb) ->
extension = s(file.path.split("."), 1).join "."
+ console.log JSON.stringify file
createFileHash file.path, (err, hash) ->
fileName = "#{hash}.#{extension}"
moveFile file.path, "./public/files/#{fileName}", (err) ->
View
79 public/filebox.coffee
@@ -1,3 +1,4 @@
+# https://developer.mozilla.org/En/Using_XMLHttpRequest
#TODO: implement ajax something like this
define "filebox", ->
_ = require "underscore"
@@ -5,37 +6,63 @@ define "filebox", ->
require "nimble"
$ = require "jquery"
{"on":bind, trigger, s, log, eachArray} = _
- self = {}
- self.getEl = () ->
+ FileBox = (options={}) ->
+ _.extend options,
+ color: "blue"
+ backgroundColor: "yellow"
+ self = {}
form = $ """
- <form id="file-form" enctype="multipart-form" method="POST" action="files">
- <input type="file" id="files" name="files" multiple/>
- </form>
+ <form id="file-form" enctype="multipart-form" method="POST" action="files">
+ <input type="file" id="files" name="files" multiple/>
+ </form>
"""
form.bind "change", () ->
files = form.find("#files")[0].files
trigger self, "filesready", files
- form
- bind self, "filesready", (files) ->
- log "here are the fiels"
- eachArray files, (file) ->
- log "the file is"
- log file
- formData = new FormData
- formData.append "name", file.name
- formData.append "size", file.size
- formData.append "type", file.type
- formData.append "file", file
- reader = new FileReader()
- xhr = new XMLHttpRequest()
- xhr.open("POST", "http://filebox.drewl.us/");
- xhr.onload = (e) ->
- console.log "done!"
- res = JSON.parse e.currentTarget.responseText
- trigger self, "uploaded", res
- xhr.send formData
- self
-
+ bars = $ """
+ <div class="progress-bar-wrapper"></div>
+ """
+
+ self.getEl = () ->
+ form
+
+ self.getProgressBars = () ->
+ bars
+ bind self, "filesready", (files) ->
+ log "here are the fiels"
+ eachArray files, (file) ->
+ bar = $ """
+ <div style="border: 1px solid black; width:50px; height: 10px; margin: 0; padding: 0; background-color: #{options.backgroundColor}" class="progress-bar">
+ <div style="height: 10px; width: 0px; margin: 0; padding: 0; background-color: #{options.color};" class="progress"></div>
+ </div>
+ """
+ bar.appendTo bars
+ log "the file is"
+ log file
+ formData = new FormData
+ formData.append "name", file.name
+ formData.append "size", file.size
+ formData.append "type", file.type
+ formData.append "file", file
+ reader = new FileReader()
+ xhr = new XMLHttpRequest()
+ xhr.open("POST", "http://filebox.drewl.us/");
+ xhr.onload = (e) ->
+ console.log "done!"
+ res = JSON.parse e.currentTarget.responseText
+ trigger self, "uploaded", res
+ xhr.upload.onprogress = (e) ->
+ console.log e
+ progress = e.position / e.totalSize
+ width = bar.width()
+ console.log "the width is #{width}"
+ bar.find(".progress").css "width", "#{width * progress}px"
+
+ console.log "there are progress"
+ console.log progress
+ trigger self, "progress", progress
+ xhr.send formData
+ self
View
84 public/filebox.js
@@ -1,45 +1,71 @@
(function() {
define("filebox", function() {
- var $, bind, drews, eachArray, log, s, self, trigger, _;
+ var $, FileBox, bind, drews, eachArray, log, s, trigger, _;
_ = require("underscore");
drews = require("drews-mixins");
require("nimble");
$ = require("jquery");
bind = _["on"], trigger = _.trigger, s = _.s, log = _.log, eachArray = _.eachArray;
- self = {};
- self.getEl = function() {
- var form;
+ return FileBox = function(options) {
+ var bars, form, self;
+ if (options == null) {
+ options = {};
+ }
+ _.extend(options, {
+ color: "blue",
+ backgroundColor: "yellow"
+ });
+ self = {};
form = $("<form id=\"file-form\" enctype=\"multipart-form\" method=\"POST\" action=\"files\">\n<input type=\"file\" id=\"files\" name=\"files\" multiple/>\n</form>");
form.bind("change", function() {
var files;
files = form.find("#files")[0].files;
return trigger(self, "filesready", files);
});
- return form;
- };
- bind(self, "filesready", function(files) {
- log("here are the fiels");
- return eachArray(files, function(file) {
- var formData, reader, xhr;
- log("the file is");
- log(file);
- formData = new FormData;
- formData.append("name", file.name);
- formData.append("size", file.size);
- formData.append("type", file.type);
- formData.append("file", file);
- reader = new FileReader();
- xhr = new XMLHttpRequest();
- xhr.open("POST", "http://filebox.drewl.us/");
- xhr.onload = function(e) {
- var res;
- console.log("done!");
- res = JSON.parse(e.currentTarget.responseText);
- return trigger(self, "uploaded", res);
- };
- return xhr.send(formData);
+ bars = $("<div class=\"progress-bar-wrapper\"></div>");
+ self.getEl = function() {
+ return form;
+ };
+ self.getProgressBars = function() {
+ return bars;
+ };
+ bind(self, "filesready", function(files) {
+ log("here are the fiels");
+ return eachArray(files, function(file) {
+ var bar, formData, reader, xhr;
+ 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>");
+ bar.appendTo(bars);
+ log("the file is");
+ log(file);
+ formData = new FormData;
+ formData.append("name", file.name);
+ formData.append("size", file.size);
+ formData.append("type", file.type);
+ formData.append("file", file);
+ reader = new FileReader();
+ xhr = new XMLHttpRequest();
+ xhr.open("POST", "http://filebox.drewl.us/");
+ xhr.onload = function(e) {
+ var res;
+ console.log("done!");
+ res = JSON.parse(e.currentTarget.responseText);
+ return trigger(self, "uploaded", res);
+ };
+ xhr.upload.onprogress = function(e) {
+ var progress, width;
+ console.log(e);
+ progress = e.position / e.totalSize;
+ width = bar.width();
+ console.log("the width is " + width);
+ bar.find(".progress").css("width", "" + (width * progress) + "px");
+ console.log("there are progress");
+ console.log(progress);
+ return trigger(self, "progress", progress);
+ };
+ return xhr.send(formData);
+ });
});
- });
- return self;
+ return self;
+ };
});
}).call(this);
View
8 public/index.coffee
@@ -2,12 +2,14 @@
_ = require "underscore"
$ = require "jquery"
drews = require "drews-mixins"
-filebox = require "filebox"
+FileBox = require "filebox"
$ ->
{"on": bind, log, each} = _
+ filebox = FileBox()
fileForm = filebox.getEl()
+ progressBar = filebox.getProgressBars()
log fileForm
- $(document.body).append fileForm
+ $(document.body).append(fileForm).append progressBar
bind filebox, "uploaded", (urls) ->
log "the urls are "
log urls
@@ -15,6 +17,8 @@ $ ->
$(document.body).append $ """
<a href="#{url}" target="_blank">file</a>
"""
+ bind filebox, "progress", (progress) ->
+
View
13 public/index.js
@@ -1,21 +1,24 @@
(function() {
- var $, drews, filebox, _;
+ var $, FileBox, drews, _;
_ = require("underscore");
$ = require("jquery");
drews = require("drews-mixins");
- filebox = require("filebox");
+ FileBox = require("filebox");
$(function() {
- var bind, each, fileForm, log;
+ var bind, each, fileForm, filebox, log, progressBar;
bind = _["on"], log = _.log, each = _.each;
+ filebox = FileBox();
fileForm = filebox.getEl();
+ progressBar = filebox.getProgressBars();
log(fileForm);
- $(document.body).append(fileForm);
- return bind(filebox, "uploaded", function(urls) {
+ $(document.body).append(fileForm).append(progressBar);
+ bind(filebox, "uploaded", function(urls) {
log("the urls are ");
log(urls);
return each(urls, function(url) {
return $(document.body).append($("<a href=\"" + url + "\" target=\"_blank\">file</a>"));
});
});
+ return bind(filebox, "progress", function(progress) {});
});
}).call(this);

0 comments on commit 8a087b7

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