Nodejs - Video streaming problems - node.js

I'm having some problems when trying to stream videos in nodejs. When I tried just pass the video path to the source/video html tag, it doenst worked. Then, I realized that problably I would have to stream the video.
The problem is: When I stream the video, I just get the video being played in the browser, as a direct link to some downloaded video, not the renderized page with some data(video title and path).
I wanna render the page and then run the video.
When I render, I receive the error: "Can't set headers after they're sent".
My code:
const express = require('express')
const multer = require('multer')
const moment = require('moment')
const uuidv4 = require('uuid/v4');
const bodyParser = require('body-parser')
const fs = require('fs')
const videoLib = require('node-video-lib')
const app = express()
const db = require('./db')
let Video = require('./models/videoModel')
//***** STAND LIBRARIES CONFIGURATION **********//
app.use(bodyParser.urlencoded({extended:true}))
app.use(bodyParser.json())
app.set('views', 'views')
app.set('view engine', 'ejs')
app.set(db)
//***** MULTER CONFIGURATION ***************//
let storage = multer.diskStorage({
destination: function(req, file, cb){
cb(null, './uploads')
},
filename: function(req, file, cb){
let mime = file.mimetype.split('/')[1]
let uuid = uuidv4()
cb(null, uuid + "." + mime)
}
})
function fileFilter(req, file, cb){
const extension = file.mimetype.split('/')[0];
if(extension !== 'video'){
return cb(new Error('Something went wrong. Wrong file format'), false);
}
cb(null, true);
};
var upload = multer({storage:storage, fileFilter: fileFilter})
const uploadHandler = upload.single('video')
function uploadVideo(req, res, next){
uploadHandler(req, res, next, function(err){
if(req.fileValidationError){
res.send('Error when upload')
}
console.log(req.file.filename)
next()
})
}
//******************************************//
function newVideo(req, res){
let videoParams = {title: req.body.title, path: req.file.filename}
Video.create(videoParams, function(err, result){
if(err){
console.log(err)
}
else{
console.log("Video salvo com sucesso")
console.log(result)
res.send(result )
}
})
}
app.get('/videos/:id', function(req, res){
let path = req.params.id
Video.find({path:path}, function(err, result){
if(err){
console.log(err);
}
else{
if (true) {
console.log("The url is:" + req.url);
const path = req.url.split('/')[2]
console.log("Path:" + path);
var file = `./uploads/${path}`
var range = req.headers.range;
fs.stat(file, function(err, stats) {
var total = stats.size;
if(range){
console.log('RANGE: ' + range);
var positions = range.replace(/bytes=/, "").split("-");
var start = parseInt(positions[0], 10);
var end = positions[1] ? parseInt(positions[1], 10) : total - 1;
var chunksize = (end - start) + 1;
console.log(req.url, start, end);
res.writeHead(206, {
"Content-Range": "bytes " + start + "-" + end + "/" + total,
"Accept-Ranges": "bytes",
"Content-Length": chunksize,
"Content-Type": "video/mp4"
});
fs.createReadStream(file, { start: start, end: end }).pipe(res);
} else {
res.writeHead(200, { 'Content-Length': total, 'Content-Type': 'video/mp4' });
fs.createReadStream(file).pipe(res);
res.render('videos', {videoData:result})//Erro: can't set header after they're sent
}
});
} else {
console.log(req.url + ' (static)');
next();
}
}
})
})
app.get('/', function(req, res){
Video.find({}, function(err, result){
if(err){
console.log(err);
}
else{
console.log();
res.render('home', {videoData:result})
}
})
})
app.post('/upload', uploadVideo, newVideo)
app.listen(3000, ()=>{
console.log("Server running on port 3000")
})

You can't use both
res.writeHead();
and
res.render();
Read more: Error: Can't set headers after they are sent to the client

Related

File uploads but the multer code is not executed | Node + multer + express + formdata

I am uploading a video file to a local folder using form, multer, express and nodejs.
The video file gets uploaded to the local folder - everytime I upload it through the form. However, the code inside upload executes only occasionally. Once in 5 times. i.e. console.log('33'); inside the app.post doesn't always get printed. However, console.log('1') (the one inside post and before upload) works everytime.
server.js code
var Express = require('express');
var multer = require('multer');
var mkdirp = require('mkdirp');
var app = Express();
var cors = require('cors');
app.use(cors());
var Storage = multer.diskStorage({
destination: function(req, file, cb) {
var dir = './client/public/video/';
mkdirp(dir, function(err) {
if(err) {
console.error(err);
}
cb(null, dir);
});
console.log("Upload: saved to " + dir + file.originalname);
},
filename: function(req, file, callback) {
callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
}
});
var upload = multer({
storage: Storage
}).single("file");
app.post("/api", function(req, res) {
console.log('1');
upload(req, res, function(err) {
console.log('33');
if (err) {
return res.end("Something went wrong!");
}
return res.status(200).end("File uploaded successfully!.");
});
});
var server = app.listen(9000, function () {
console.log('app listening at 9000');
});
app.js code
import React, { Component } from "react";
import axios from "axios";
class App extends Component {
state = {
file: null
};
handleOnChange = e => this.setState({ [e.target.name]: e.target.value });
handleOnUploadFile = e => this.setState({ file: e.target.files[0] });
handleOnSubmit = e => {
e.preventDefault();
const formData = new FormData();
formData.append("file", this.state.file);
axios
.post("http://localhost:9000/api", formData, {
headers: {
'accept': 'video/mp4',
'Accept-Language': `en-US,en;q=0.8`,
'Content-Type': `multipart/form-data; boundary=${formData._boundary}`,
}
})
.then(res => console.log(res.data))
.catch(err => console.error(err));
};
render() {
return (
<form>
<input type="file" encType="multipart/form-data"
name="file"
accept="video/mp4"
onChange={this.handleOnUploadFile}/>
<button type="submit" className="btn btn-danger" onClick={this.handleOnSubmit}>
Submit
</button>
</form>
);
}
}
export default App;
I am new to react/node js. Tried a lot of suggestions from other posts, but couldn't find the solution.
Try adding async and await.
server.js
var Express = require('express');
var multer = require('multer');
var mkdirp = require('mkdirp');
var app = Express();
var cors = require('cors');
app.use(cors());
var Storage = multer.diskStorage({
destination: function(req, file, cb) {
var dir = './client/public/video/';
mkdirp(dir, function(err) {
if(err) {
console.error(err);
}
cb(null, dir);
});
console.log("Upload: saved to " + dir + file.originalname);
},
filename: function(req, file, callback) {
callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
}
});
var upload = multer({
storage: Storage
}).single("file");
app.post("/api", function(req, res) {
console.log('1');
upload(req, res, function(err) {
console.log('33');
if (err) {
return res.end("Something went wrong!");
}
return res.status(200).end("File uploaded successfully!.");
});
});
app.get("/", function(req, res) {
console.log('1');
return res.status(200).json({});
});
var server = app.listen(9900, function () {
console.log('app listening at 9900');
});
App.js
import React, { Component } from "react";
import axios from "axios";
class App extends Component {
state = {
file: null
};
handleOnChange = e => this.setState({ [e.target.name]: e.target.value });
handleOnUploadFile = e => this.setState({ file: e.target.files[0] });
handleOnSubmit = async e => {
e.preventDefault();
const formData = new FormData();
formData.append("file", this.state.file);
await axios
.post("http://localhost:9900/api", formData, {
headers: {
'accept': 'video/mp4',
'Accept-Language': `en-US,en;q=0.8`,
'Content-Type': `multipart/form-data; boundary=${formData._boundary}`,
}
})
.then(res => console.log(res.data))
.catch(err => console.error(err));
};
render() {
return (
<>
<h1>{"<b>hello</b>".bold()}</h1>
<form>
<input type="file" encType="multipart/form-data"
name="file"
accept="video/mp4"
onChange={this.handleOnUploadFile}/>
<button type="submit" className="btn btn-danger" onClick={this.handleOnSubmit}>
Submit
</button>
</form>
</>
);
}
}
export default App;
Try using a promise for your upload function:
var Express = require('express');
var multer = require('multer');
var mkdirp = require('mkdirp');
var app = Express();
var cors = require('cors');
app.use(cors());
var Storage = multer.diskStorage({
destination: function(req, file, cb) {
var dir = './client/public/video/';
mkdirp(dir, function(err) {
if(err) {
console.error(err);
}
cb(null, dir);
});
console.log("Upload: saved to " + dir + file.originalname);
},
filename: function(req, file, callback) {
callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
}
});
var upload = multer({
storage: Storage
}).single("file");
app.post("/api", function(req, res) {
console.log('1');
upload(req, res).then((file, err) => {
console.log('33');
if (err) {
return res.end("Something went wrong!");
}
return res.status(200).end("File uploaded successfully!.");
})
});
var server = app.listen(9000, function () {
console.log('app listening at 9000');
});
Another idea would be to wrap the upload itself in a promise:
var Storage = multer.diskStorage({
return new Promise((resolve, reject) => {
destination: function(req, file, cb) {
var dir = './client/public/video/';
mkdirp(dir, function(err) {
if(err) {
reject(err)
}
cb(null, dir);
});
console.log("Upload: saved to " + dir + file.originalname);
},
filename: function(req, file, callback) {
resolve(callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);)
}
})
});

React Node app crashing while downloading file

I am creating an app using Node and react as part of my learning process. The which covert HTTP, https links to torrent. The problem is, I need to download the file first to convert it to torrent. The app working fine when it comes to small files. But if it is a large file like One GB it fails and app crash.
here is my project link:-
https://github.com/savadks95/FireBit/blob/master/server.js
Can anyone please tell me how to fix this. And I also want to show the download in progress.
var http = require("http");
var webtorrentify = require("webtorrentify-link");
var fs = require("fs");
var url = require("url");
var path = require("path");
var validUrl = require("valid-url");
var express = require("express");
var getUrls = require("get-urls");
var remote = require("remote-file-size");
var app = express();
var downloadLink;
var fileName;
var fileSize;
var server;
var parsed;
var param;
var link;
var port;
port = process.env.PORT || 80;
app.get("/favicon.ico", function(req, res) {
console.log("favicon request recived");
});
app.get("*", function(req, res) {
if (req.url === "/") {
//app.use('/public/html', express.static(path.join(__dirname)));
fs.readFile("public/html/index.html", function(err, data) {
res.write(data);
});
} else if (req.url === "/l?thelink=") {
fs.readFile("public/html/emptyRequest.html", function(err, data) {
res.write(data);
res.end();
});
} else {
//---------Reciving Url--------------------
console.log(req.query.thelink);
downloadLink = req.query.thelink;
//-----------------------------------------
//------------checking for valid url-------
if (validUrl.isUri(downloadLink)) {
console.log("Looks like an URI");
//-----------------------------------------
//----------Extracting filename-------------
parsed = url.parse(downloadLink);
fileName = path.basename(parsed.pathname);
console.log(path.basename(parsed.pathname));
//-------------------------------------------
//----------Finding File size----------------
remote(downloadLink, function(err, o) {
fileSize = o / 1024 / 1024;
console.log("size of " + fileName + " = " + fileSize + " MB");
//-------------------------------------------
if (fileSize < 501) {
///////////////Creating Torrent////////////////////
webtorrentify(downloadLink).then(function(buffer) {
console.log("creating the torrent");
//res.send('what is');
//-------------------------------------------
res.setHeader("Content-Type", "application/x-bittorrent");
res.setHeader(
"Content-Disposition",
`inline; filename="${fileName}.torrent"`
);
res.setHeader("Cache-Control", "public, max-age=2592000"); // 30 days
res.send(buffer);
console.log(fileName + ".torrent created");
res.end();
//-------------------------------------------
});
////////////////////////////////////////////////
} else {
console.log("More than 500 MB");
res.send("<h4> More than 500 MB or invalid URL </h4>");
}
});
} else {
console.log("not url");
fs.readFile("public/html/404.html", function(err, data) {
res.write(data);
res.end();
});
}
}
});
app.listen(port);

How to display images stored in Mongodb using Node.Js

I need your help on displaying images stored in MongoDB using Node.JS and express framework.
I've successfully saved the image using this method:
var multer = require('multer');
//var upload = multer({ dest: 'public/Images/' });
var fs = require("fs");
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public/Images/')
},
filename: function (req, file, cb) {
//cb(null, file.originalname + '-' + Date.now())
cb(null, Date.now() + '-' + file.originalname);
}
});
var upload = multer({storage: storage});
var user = require('../app/model/user');
app.post('/upload', upload.single('meme'), function (req, res, next) {
if (req.file){
var host = req.hostname;
var filePath = req.protocol + "://" + host + '/' + 'public/Images/' + req.file.originalname;
//console.log(filePath);
var newMeme = new user();
newMeme.meme.imgs = filePath;
newMeme.uploadDate = Date.now();
newMeme.save(function (err) {
if (err)
throw err;
//console('Meme saved');
});
return res.send({
success: true
}) ;
} else {
console.log('failed');
res.send({
success: false
});
}
})
I'm now lost when it comes to displaying the images stored.
These are the stuff I want to display:
please, can someone help? I'm using express JS and ejs as my view engine.
Thanks.

File upload using MeteorJS?

(Cross post from the Meteor forums)
Say I wanted to upload a file to a server that is built with Meteor from another computer through HTTP when the second computer hits a certain API.
So far, I've been able to create such an application using NodeJS, the Express framework, and multer middlewear. I thought it would be easy to move that to Meteor.
NodeJS:
var express = require('express');
var multer = require('multer');
var done = false;
var port = 8888;
var app = express();
//Multer configuration
app.use(multer({
dest: './uploads/',
limits: {
fileSize: undefined
},
rename: function(fieldName, fileName){
return fieldName + Date.now();
},
onFileUploadStart: function(file){
console.log(file.originalname + ' has started downloading!');
},
onFileUploadComplete: function(file){
console.log(file.fieldname + ' has been uploaded to ' + file.path);
done = true;
},
onFileSizeLimit: function(file){
console.log("File " + file.originalname + " is too large");
},
onError: function(){
console.log("ERROR!!");
}
}));
// POST /api/upload
app.post('/api/upload', function(req, res){
if(done === true){
console.log(req.files);
done = false;
}
res.write("Ack!");
res.end();
});
app.listen(port);
However, when I tried to translate the app to Meteor, files were just not uploaded.
MeteorJS
var multer = Npm.require('multer');
var done = false;
//Set up Multer
Picker.middleware(multer({
dest: './fileUploads',
limits: {
fileSize: undefined
},
rename: function(fieldName, fileName){
return fieldName + Date.now();
},
onFileUploadStart: function(file){
console.log("[.]" + file.originalname + " upload has started at " + Date.now());
},
onFileUploadComplete: function(file){
console.log("[.]" + file.originalname + " upload has finished at " + Date.now());
done = true;
},
onFileSizeLimit: function(file){
console.log("[.]" + file.originalname + " file size limit has been reached");
},
onError: function(){
console.log("[.]ERROR!");
}
}));
var postPicker = Picker.filter(function(req, res){
return req.method === "POST";
});
//Actual route, after the middleware has been set up
postPicker.route('/api/upload', function(params, req, res, next){
if(done === true){
console.log(req.files);
done = false;
}
res.write("Ack!");
res.end();
})
When a call is made to the Meteor server, nothing happens. There is no error, and the server does not print anything. However, the caller receives the "Ack!" from the server.
This has me a bit baffled, and I will appreciate any and all help.
Is there a better way of doing this?
Thank you!
FS.Utility.eachFile(event, function(file){
var doc = new FS.File(file);
doc.metadata = {};
_.extend(doc.metadata, {
userId: userId
});
Images.insert(doc, function(err, fileObj){
})
})

How to do csv file export and download on request [duplicate]

How can I download a file that is in my server to my machine accessing a page in a nodeJS server?
I'm using the ExpressJS and I've been trying this:
app.get('/download', function(req, res){
var file = fs.readFileSync(__dirname + '/upload-folder/dramaticpenguin.MOV', 'binary');
res.setHeader('Content-Length', file.length);
res.write(file, 'binary');
res.end();
});
But I can't get the file name and the file type ( or extension ). Can anyone help me with that?
Update
Express has a helper for this to make life easier.
app.get('/download', function(req, res){
const file = `${__dirname}/upload-folder/dramaticpenguin.MOV`;
res.download(file); // Set disposition and send it.
});
Old Answer
As far as your browser is concerned, the file's name is just 'download', so you need to give it more info by using another HTTP header.
res.setHeader('Content-disposition', 'attachment; filename=dramaticpenguin.MOV');
You may also want to send a mime-type such as this:
res.setHeader('Content-type', 'video/quicktime');
If you want something more in-depth, here ya go.
var path = require('path');
var mime = require('mime');
var fs = require('fs');
app.get('/download', function(req, res){
var file = __dirname + '/upload-folder/dramaticpenguin.MOV';
var filename = path.basename(file);
var mimetype = mime.lookup(file);
res.setHeader('Content-disposition', 'attachment; filename=' + filename);
res.setHeader('Content-type', mimetype);
var filestream = fs.createReadStream(file);
filestream.pipe(res);
});
You can set the header value to whatever you like. In this case, I am using a mime-type library - node-mime, to check what the mime-type of the file is.
Another important thing to note here is that I have changed your code to use a readStream. This is a much better way to do things because using any method with 'Sync' in the name is frowned upon because node is meant to be asynchronous.
Use res.download()
It transfers the file at path as an “attachment”. For instance:
var express = require('express');
var router = express.Router();
// ...
router.get('/:id/download', function (req, res, next) {
var filePath = "/my/file/path/..."; // Or format the path using the `id` rest param
var fileName = "report.pdf"; // The default name the browser will use
res.download(filePath, fileName);
});
Read more about res.download()
For static files like pdfs, Word docs, etc. just use Express's static function in your config:
// Express config
var app = express().configure(function () {
this.use('/public', express.static('public')); // <-- This right here
});
And then just put all your files inside that 'public' folder, for example:
/public/docs/my_word_doc.docx
And then a regular old link will allow the user to download it:
My Word Doc
Here's how I do it:
create file
send file to client
remove file
Code:
let fs = require('fs');
let path = require('path');
let myController = (req, res) => {
let filename = 'myFile.ext';
let absPath = path.join(__dirname, '/my_files/', filename);
let relPath = path.join('./my_files', filename); // path relative to server root
fs.writeFile(relPath, 'File content', (err) => {
if (err) {
console.log(err);
}
res.download(absPath, (err) => {
if (err) {
console.log(err);
}
fs.unlink(relPath, (err) => {
if (err) {
console.log(err);
}
console.log('FILE [' + filename + '] REMOVED!');
});
});
});
};
In Express 4.x, there is an attachment() method to Response:
res.attachment();
// Content-Disposition: attachment
res.attachment('path/to/logo.png');
// Content-Disposition: attachment; filename="logo.png"
// Content-Type: image/png
'use strict';
var express = require('express');
var fs = require('fs');
var compress = require('compression');
var bodyParser = require('body-parser');
var app = express();
app.set('port', 9999);
app.use(bodyParser.json({ limit: '1mb' }));
app.use(compress());
app.use(function (req, res, next) {
req.setTimeout(3600000)
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept,' + Object.keys(req.headers).join());
if (req.method === 'OPTIONS') {
res.write(':)');
res.end();
} else next();
});
function readApp(req,res) {
var file = req.originalUrl == "/read-android" ? "Android.apk" : "Ios.ipa",
filePath = "/home/sony/Documents/docs/";
fs.exists(filePath, function(exists){
if (exists) {
res.writeHead(200, {
"Content-Type": "application/octet-stream",
"Content-Disposition" : "attachment; filename=" + file});
fs.createReadStream(filePath + file).pipe(res);
} else {
res.writeHead(400, {"Content-Type": "text/plain"});
res.end("ERROR File does NOT Exists.ipa");
}
});
}
app.get('/read-android', function(req, res) {
var u = {"originalUrl":req.originalUrl};
readApp(u,res)
});
app.get('/read-ios', function(req, res) {
var u = {"originalUrl":req.originalUrl};
readApp(u,res)
});
var server = app.listen(app.get('port'), function() {
console.log('Express server listening on port ' + server.address().port);
});
you can use res.sendFile()... the Sample-download.xlsx should be in the same directory as this function.
const downloadFile = (req,res) => {
var options = {
root: path.join(__dirname),
};
let fileName = "Sample-download.xlsx";
res.sendFile(fileName, options, function (err) {
if (err) {
console.log(err);
return res.status(500).json({ success: false, message: "internal server error. please try again later" });
} else {
console.log("Sent:", fileName, "at", new Date().toString());
}
});
}

Resources