I'm planning to use file stream api in the browser. By searching, I found this filestream module.
https://github.com/DamonOehlman/filestream
The author wrote a example usage code. Here it is. (File name : drag-n-drop.js)
var crel = require('crel');
var detect = require('feature/detect');
var dnd = require('drag-and-drop-files');
var img = crel('img');
var video = crel('video', { autoplay: true });
var FileReadStream = require('filestream/read');
var FileWriteStream = require('filestream/write');
function upload(files) {
var queue = [].concat(files);
function sendNext() {
var writer = new FileWriteStream();
var next = queue.shift();
console.log('sending file');
new FileReadStream(next).pipe(writer).on('file', function(file) {
console.log('file created: ', file);
img.src = detect('URL').createObjectURL(file);
// video.src = detect('URL').createObjectURL(next);
if (queue.length > 0) {
sendNext();
}
});
}
sendNext();
}
dnd(document.body, upload);
document.body.appendChild(crel('style', 'body, html { margin: 0; width: 100%; height: 100% }'));
document.body.appendChild(img);
document.body.appendChild(video);
In this code... I'm totally frustrated. Which side this code works for? Server side? Or client side code?
If server side code, where is the create-server methods and how document.body.~ codes are read?
If client side code, how to use 'require' method in the browser?
Most of all, is this runnable code?
Putting aside the previous questions, I tried to run this code. To do that, I installed 'crel', 'feature', 'drag-and-drop-files' modules, and give command : $node drag-n-drop.js
But, it doesn't works, and the error message is like this. This also frustrate me...
[appPath]/node_modules/crel/crel.js:91
element = crel[isElementString](element) ? element : d.createElement(e
^
TypeError: undefined is not a function
at crel ([appPath]/node_modules/crel/crel.js:91:64)
at Object.<anonymous> ([appPath]/node_modules/filestream/examples/drag-n-drop.js:4:11)
Help!
Update. 3.
Hey. Can I ask you one more question? I'm adapting the filestream module to my code, referencing with the above example code. While doing, I got stuck in the detect('URL') code. I read the 'feature' module in the npm page and read the description carefully, but I still can't understand that. Refer to this page link , I don't know why author use detect('URL'), rather than window.URL. Can you explain it? I really appreciate with you.
Question 1:
document.body usually is a window object's property, so the example is for client side. Or you can use some module, for example: jsdom. Then you can use window in node.
require is a function in CommonJS module specifications. you can use browserify or webpack to compile it for client side.
Question 2:
As above, you should use CommonJS module build tool or use jsdom for server side.
createElement is a method on window.document.
Update:
Question 3:
require('feature/detect');
will require detect.js in feature npm module
As you can see, it tests ms, o, moz, webkit prefixs with target feature on window.
In the bottom of below link, there is a Browser compatibility table.
https://developer.mozilla.org/en-US/docs/Web/API/Window/URL
In Chrome 8.0, Opera 15.0 and Safari 6.0 URL exists as webkitURL.
This is why author do that.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments