I'm using electron to build an app which serves several image files in a webserver using express.
From another app built in Android I get files from the server and post files to it.
I have no problems detecting when the Android app is posting the files:
app.post('/fileupload', function(req, res) {
alert("post");
var fstream;
req.pipe(req.busboy);
req.busboy.on('file', function (fieldname, file, filename) {
//console.log("Uploading: " + filename);
fstream = fs.createWriteStream(__dirname + '/images/' + filename);
file.pipe(fstream);
fstream.on('close', function () {
res.redirect('back');
});
});
});
But still have no success detecting when the Android app get the files from the server (it gets them, but I have no way to refresh my output screen when it does), I'm trying with this code:
app.use(function (req, res, next) {
alert("get");
next();
});
and this one too:
app.get('/', function (req, res) {
alert("get");
next();
});
I'm putting the files in a directory called images:
var express = require('express')
var app = express()
app.use(express.static('images'));
app.listen(3000);
EDIT
If I open a browser with the same url Android is getting, it triggers the event and shows the alert. Why it doesn't trigger when Android opens the connection?, I don't know.
The Android code for the get request is:
URL url = new URL(sURL);
HttpURLConnection conection = (HttpURLConnection)url.openConnection();
conection.setRequestMethod("GET");
conection.connect();
int lenghtOfFile = conection.getContentLength();
InputStream inputURL = new BufferedInputStream(url.openStream());
If you are calling API's then you should use res.send() using json
app.post('/fileupload', function(req, res) {
alert("post");
var fstream;
req.pipe(req.busboy);
req.busboy.on('file', function (fieldname, file, filename) {
//console.log("Uploading: " + filename);
fstream = fs.createWriteStream(__dirname + '/images/' + filename);
file.pipe(fstream);
fstream.on('close', function () {
res.send({status:1,data:{}}) //check this response on android side and change/refresh screen on android side if needed
//res.redirect('back');
});
});
});
Using this code, that is deprecated using my compile versión (23), express detects the get request.
HttpClient httpclient = new DefaultHttpClient();
// Prepare a request object
HttpGet httpget = new HttpGet(sURL.substring(0, sURL.lastIndexOf("/")));
// Execute the request
HttpResponse response;
response = httpclient.execute(httpget);
Related
I'm trying to figure out how to use ember-uploader, I have the following component (like the one in the README)
export default EmberUploader.FileField.extend({
filesDidChange: function(files) {
const uploader = EmberUploader.Uploader.create({
url: (ENV.APP.API_HOST || '') + '/api/v1/images/',
});
console.log(uploader);
if (!Ember.isEmpty(files)) {
var photo = files[0];
console.log(photo);
uploader.upload(photo)
.then(data => {
// Handle success
console.log("Success uploading file");
console.log(data);
}, error => {
// Handle failure
console.log("ERROR uploading file");
console.log(error);
});
}
}
});
The express API endpoint is listening for a POST request.
var saveImage = (req, res, next) => {
let body = req.body;
res.json({
data: body
});
};
But the body is empty after the request is done. I really don't know how to implement the API endpoint in order to get the file, I tried to see the req object and it doesn't contains the file.
Debugging it, After select a file using the component I get the following info in the console.
Seems that the API endpoint works because I get the following output:
POST /api/v1/images/ 200 27.284 ms - 11
But I can't get the file.
SOLUTION
In Express 4, req.files is no longer available on the req object by
default. To access uploaded files on the req.files object, use a
multipart-handling middleware like busboy, multer, formidable,
multiparty, connect-multiparty, or pez.
Following this blog, the code below was added to the API and the ember-uploader code posted in the question worked as expected.
import formidable from 'formidable';
var saveImage = (req, res, next) => {
var form = new formidable.IncomingForm();
form.parse(req);
form.on('fileBegin', function (name, file){
file.path = __dirname + '/tmp/' + file.name;
});
form.on('file', function (name, file){
res.json({
data: file.name
});
});
};
Hey guys I am new to node, and trying to setup a file/image upload script.
I was able to setup node on my VPS and following this example I also set up the app and it is working great.
https://coligo.io/building-ajax-file-uploader-with-node/
It is using formidable and express
However I'd love to also parse a form where people can add their name and the files get uploaded into a folder containing their names.
I was able to get the folder creation working using mkdirp, however even after many hours of research (formidable api, express api, and more) I can't get the form to parse the name.
I suspect that the upload.js (which sends the data to the node app) does not work.
At the moment a new folder with a random string is created for each upload, but I'd love to be able to parse the entered formname.
Any idea how to get it working? I'd appreciate any help/hints.
app.js
var express = require('express');
var app = express();
var path = require('path');
var formidable = require('formidable');
var fs = require('fs');
var mkdirp = require('mkdirp');
var crypto = require("crypto");
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', function(req, res){
res.sendFile(path.join(__dirname, 'views/index.html'));
});
app.post('/upload', function(req, res){
var ordner = crypto.randomBytes(20).toString('hex');
mkdirp('/home/myfolder/fileupload/'+ordner, function (err) {
if (err) console.error(err)
else console.log(ordner)
});
var form = new formidable.IncomingForm();
form.multiples = true;
form.uploadDir = path.join(__dirname, '/'+ ordner);
form.on('file', function(field, file) {
fs.rename(file.path, path.join(form.uploadDir, file.name + Date.now()+'.jpg'));
});
form.on('field', function(field, userName) {
console.log(userName);
});
form.on('error', function(err) {
console.log('An error has occured: \n' + err);
});
form.on('end', function() {
res.end('success');
});
form.parse(req);
});
var server = app.listen(3000, function(){
console.log('Server listening on port 3000');
});
Thanks
The upload.js is unchanged and I simply added another input to the view.
You can do this by sending the parameters through the POST like so
app.post('/upload/:userName', function(req, res){
var username = req.params.userName
mkdirp('/home/myfolder/fileupload/'+username, function (err) {
if (err) console.error(err)
else console.log(ordner)
});
The rest of your code pretty much stays the same.
EDIT: Your ajax would look something like this
var username = 'GetThisValueFromTheUser'
$.ajax({
url: '/upload'+username,
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data){
console.log('upload successful!');
}
});
Note: You can send parameters by using /:parameter in your POST or GET requests, from then on it is easy to use those parameters however you want.
I am really new to JavaScript and Node JS. I have various image URLs that I want to buffer. I have tried the request npm module but want a lower level library for what I want to achieve.
For example:
http://assets.loeildelaphotographie.com/uploads/article_photo/image/128456/_Santu_Mofokeng_-_TOWNSHIPS_Shebeen_Soweto_1987.jpg
I see lots of examples that suggest using the request module or examples that save files to disk. However, I cannot find an HTTP GET request example that simply buffers the image so I can pass to another function. It needs to have an "end" event so I upload the buffered image data with confidence in another step. Is there a sample pattern or "how to" on this someone could provide? Thanks!
This is the native way:
var http=require('http'), imageBuffer;
http.get(
'http://www.kame.net/img/kame-anime-small.gif',
function(res) {
var body=new Buffer(0);
if (res.statusCode!==200) {
return console.error('HTTP '+res.statusCode);
}
res.on('data', function(chunk) {
body=Buffer.concat([body, chunk]);
});
res.on('end', function() {
imageBuffer=body;
});
res.on('error', function(err) {
console.error(err);
});
}
);
// Small webserver serving the image at http://127.0.0.1:4567
http.createServer(function(req, res) {
res.write(imageBuffer || 'Please reload page');
res.end();
}).listen(4567, '127.0.0.1');
and using request (encoding:null for binary response):
var request=require('request'), imageBuffer;
request({
uri: 'http://www.kame.net/img/kame-anime-small.gif',
encoding: null
}, function(err, res, body) {
if (err) {
return console.error(err);
} else if (res.statusCode!==200) {
return console.error('HTTP '+res.statusCode);
}
imageBuffer=body;
});
// Small webserver serving the image at http://127.0.0.1:4567
require('http').createServer(function(req, res) {
res.write(imageBuffer || 'Please reload page');
res.end();
}).listen(4567, '127.0.0.1');
Here's a simple example using the built-in streaming that the http response has:
var http = require('http');
var fs = require('fs');
var file = fs.createWriteStream("test.png");
var request = http.get("some URL to an image", function(response) {
response.pipe(file);
});
I ran this myself and successfully downloaded an image from an external web site and saved it to a file and then loaded the file into the browser to see the same image.
I encountered a problem using node.js with the node-http-proxy module.
On some webpages resources are not loaded, because the server redirects the request to the original html file. So for every picture or css file, the index.html file is loaded again. The strange thing is that this does not happen on all websites but only on some.
Here's my code:
var express = require('express'),
httpProxy = require('http-proxy'),
var router = express.Router();
var proxy = new httpProxy.createProxyServer();
router.get('/:url', function(req, res) {
var options = {
target: {
host: req.params.url,
port: 80,
path: 'http://'
},
timeout: 5000,
proxyTimeout: 5000,
xfwd: true,
prependPath: true
};
proxy.web(req, res, options);
});
An example for a webpage where this does not work ist http://www.kicker.de
I already tried several options, like hostRewrite or changeOrigin but those do not seem to change this.
I would highly encourage you to use the npm module request. I have issues with other approaches fetching files over http and https with redirects. request handles it quite well. Here is some code I have to fetching content.
var request = require("request");
...
function fetchImage(url, callback) {
var file, tmpFile;
async.waterfall([
function (next) {
tmp.file(next);
},
function (location, descriptior, cleanupCallback, next) {
console.log(location);
tmpFile = location + ".png"
console.log("fetching", url, "and saving it as", tmpFile);
var download = request(url).pipe(fs.createWriteStream(tmpFile));
download.on("finish", function(){
console.log("finished downloading picture", tmpFile);
fs.stat(tmpFile, next)
});
}
], callback);
}
my node.js app connects through var socket = net.createConnection(port, ip); to download a file from another server. As soon as connection is made the server sends the file as data.
I catch it then by doing
socket.on('data', function(data) {
}).on('connect', function() {
}).on('end', function() {
console.log('DONE');
});
My initial goal is, to download the file using the method above and at the same time give the bytes to the client's browser as a downloadable file. For example: user clicks a button on the site which triggers the server-side download function and the user gets the file-save prompt. Node.JS then downloads the file from the remote server and at the same time gives each new byte to the user at the browser client. Is this possible? I imagine it would need to send headers of octet-stream to trigger file transfer between browser Node.JS. But how?
Update
Now I tried the code below with the help of the answer below:
app.get('/download', function (req, res) {
res.setHeader('Content-disposition', 'attachment; filename=' + "afile.txt");
res.setHeader('Content-Length', "12468")
var socket = net.createConnection(1024, "localhost");
console.log('Socket created.');
socket.on('data', function(data) {
socket.pipe(res)
}).on('connect', function() {
// // Manually write an HTTP request.
// socket.write("GET / HTTP/1.0\r\n\r\n");
}).on('end', function() {
console.log('DONE');
socket.end();
});
});
The data is being sent to the user's browser as a download, but the end result is a broken file. I checked the contents within and it seeems that something along the process causes the file to corrupt.
I think now I have to write byte per byte? rather than doing socket.pipe?
You need to set content-disposition header in your http response:
response.writeHead(200, {
'Content-Disposition': 'attachment; filename=genome.jpeg; modification-date="Wed, 12 Feb 1997 16:29:51 -0500"'
});
yourDataStream.pipe(response);
see RFC2183
It looks like you may want this:
app.get('/download', function (req, res) {
res.attachment('afile.txt');
require('http').get('http://localhost:1234/', function(response) {
response.pipe(res);
}).on('error', function(err) {
res.send(500, err.message);
});
});
I found the solution!
by doing res.write(d) i was able to direct the bytes from the other connection to the user browser download.
app.get('/download', function (req, res) {
res.setHeader('Content-disposition', 'attachment; filename=' + "afile.jpg");
res.setHeader('Content-Length', "383790");
res.setHeader('Content-Type','image/jpeg');
var socket = net.createConnection(1024, "localhost");
console.log('Socket created.');
//socket.setEncoding("utf8");
socket.on('data', function(d) {
console.log(d);
res.write(d);
}).on('connect', function() {
// // Manually write an HTTP request.
// socket.write("GET / HTTP/1.0\r\n\r\n");
}).on('end', function() {
console.log('DONE');
socket.end();
});
});