I am using Nodejs readStream.pipe(writeStream). How can I get the full path of the file I am uploading and assign it to createReadStream. I get only filename and When the file is in nodejs root directory it is fine no error but when I upload from anywhere else I get an error:
events.js:183
throw er; // Unhandled 'error' event
^
Error: ENOENT: no such file or directory, open 'C:\Users\Esen\Documents\GitHub\gbmsturbo\nike.png'
I know that this happens because nike.png that I am uploading is not in "C:\Users\Esen\Documents\GitHub\gbmsturbo\".
It is inside this folder:
"C:\Users\Esen\Documents\GitHub\filestoupload"
I tried
function throwErrorDontCrash() {
process.on('uncaughtException', function (err) {
console.error(err.message)
})
}
and this prevents nodejs crash and uploads the file but with empty content (0 byte)
router.post('/upload', (req, res) => {
var filePath = req.body.file
var ext = path.extname(filePath)
var filename = path.basename(filePath, ext)
var newVerFilePath = "public/uploads/" + newVerFileName+ext
const readStream = fs.createReadStream(filePath)
throwErrorDontCrash()
const writeStream = fs.createWriteStream(newVerFilePath)
readStream.pipe(writeStream)
function throwErrorDontCrash() {
process.on('uncaughtException', function (err) {
//console.error(err.message)
})
}
and here is my form file
<form class="center" action="/upload" method="post">
<input id="file" type="file" name="file" required encrypt="multipart/form-data"/>
<input type="submit" value="UPLOAD">
I want filePath to include the directory path where ever the file is uploaded when user clicks on Choose or Browse button.
Currently, filePath gets only filename such as nike.png and my expectation is
to get "C:/Users/Esen/Documents/GitHub/filestoupload/nike.png"
it looks like you are writing an express app on nodejs. Your issue is here:
const readStream = fs.createReadStream(filePath);
I think that you believe this is how you "read" the file the user is uploading, but that's actually not possible - the "fs" module doesn't exist in the browser. The user navigating your website is uploading the image from their computer via a form, which means the image is coming in from the HTTP request (the req object), not from the file system.
(This can be confusing because in your case, you probably are running this express app locally on your machine, but it's easier to imagine it in production - the express app runs on a big server somewhere, and is a different computer than your user's computer, where the file being uploaded lives.)
Check out the related S.O. question How to upload, display and save images using node.js and express. Also, see the tutorial Upload Files or Images to Server using Nodejs.
Related
I am new to Node, and I am trying to make it so that when I go to 'localhost:1337/download/open' it renders a webpage, as well as download a file.. I understand that you can only set a header once (that is the error I am getting), but what is the easiest way to both render html AND download a file? Code below:
const express = require('express');
const app = express();
app.get('/download/open', function (req, res) {
let file = `${__dirname}/downloads/Open Tasks.csv`;
res.download(file);
res.send("words");
})
app.listen(1337, function (err) {
if (err) {
console.log(err)
return
}
console.log(`App running. listening on: http://localhost:1337`);
});
Error:
Error: Can't set headers after they are sent.
Thank you in advance.
I was able to figure out what I was trying to do. Instead of trying to render a whole new page AND download a file, I needed to dedicate a route to just a download through the use of an <a></a> tag.
For instance, if I have a webpage at 'http://localhost:1337' that has a link on it like:
Download Open Tasks
Download Open Tasks
Then in node.js I have a route for 'download/open' like so:
app.get('/download/open', function (req, res) {
let file = `${__dirname}/downloads/Open Tasks.csv`;
res.download(file);
})
It will not open a new page (like I thought it needed to) it will just download the file.
IMO, I would suggest you should do the following to achieve your goal:
render the HTML result for "GET http://localhost:1337/download/open"
In the HTML file /download/open, put AJAX block to invoke download file operation
(Download a file by jQuery.Ajax)
$(document).ready(function(){
//code to invoke download file....
});
Node.js, Webpack
In this project using webpack, where installed FS.
This code need to read file, but returns error "Uncaught TypeError: fs.readFile is not a function"
const bookForm = document.querySelector(".book-form");
const select = document.querySelector(".select"); const fs = require("fs");
export function abc() { bookForm.addEventListener("submit", e => {
console.log(select.options[select.selectedIndex].text);
e.preventDefault();
fs.readFile("file.txt", function(error, data) {
console.log("file read");
if (error) throw error;
console.log(data); });
}); }
You cannot import the fs module in the browser, because the browser environment does not have access to the user's file system. fs is only available in the Node.js context (on the server) but not on the client (browser).
If you want to send files from the browser to the server, you can use <input type="file"> and let the user manually select the files they have to send. If you want to send a server file's contents to the browser, you can use HTTP communication (AJAX) or you can render it's content in a server-side computed HTML template.
Within your config file you can set the way in which assests like your txt file is uploaded. Then you simply use require('file.txt') to load it - no need to use fs.
I'm trying to upload files with socketio-file-upload, so far it does the job quite well, selecting the "upload image" button correctly uploads the file to the folder of my preference. My problem is that any button that clicks "Search for file" or "ClickHere" uploads the file without giving me the name of the file you select. What I want to achieve is
1.- Press the "Upload Image" button
2.- Show file name
3.- Upload the file to the selected folder by clicking the button "ClickHere"
Here is the code I am using
main.js
//Connection to the socket library
const socket = io();
//This is some classic socket.io event listening
socket.on('data', data => {
console.log(data);
});
//Here is our socketio-file-upload code
const uploader = new SocketIOFileUpload(socket);
//uploader.listenOnInput(document.getElementById('fileUpload'));
uploader.listenOnInput(document.getElementById('fileUpload'));
uploader.addEventListener('start', (event)=> {
event.file.meta.extension = 'csv';
});
document.getElementById('file_button').addEventListener('click', uploader.prompt, false);
From the Socket.IO File Upload documentation:
instance.listenOnSubmit(submitButton, input)
Like instance.listenOnInput(input), except instead of listening for the "change" event on the input element, listen for the "click" event of a button.
JavaScript:
instance.listenOnSubmit(document.getElementById("my_button"), document.getElementById("file_input"));
HTML:
<label>Upload File: <input type="file" id="file_input" /></label>
<button id="my_button">Upload File</button>
Try something like this:
main.js
//Connection to the socket library
const socket = io();
//This is some classic socket.io event listening
socket.on('data', data => {
console.log(data);
});
//Here is our socketio-file-upload code
const uploader = new SocketIOFileUpload(socket);
// When #file_button is clicked, the file in #fileUpload is uploaded.
uploader.listenOnSubmit(document.getElementById('file_button'), document.getElementById('fileUpload'));
uploader.addEventListener('start', (event)=> {
event.file.meta.extension = 'csv';
});
Development and test environment:
Windows 8 64bit
node version installed 0.10.5
npm version 1.2.18
express framework
formidable module used for file uploading
Firefox and Internet Explorer browsers
HTML code:
<form id="caricaMasterImg" method="post" enctype="multipart/form-data" action="/image/upload">
<input type="file" id="masterImg" name="masterImg" value="Sfoglia" accept="image/*"/>
<input type="submit" value="carica" id="submitLoadImg" />
</form>
app.js code:
var image = require('./route/image');
app.post('/image/upload', image.upload);
routes/image.js code:
exports.upload = function(req, res){
var form = new formidable.IncomingForm();
form.uploadDir = path.join(__dirname, 'tmp');
console.log('Upload directory is: '+form.uploadDir);
fs.exists(form.uploadDir, function (exists) {
console.log('is an existing directory? '+exists);
});
form.parse(req, function(err, fields, files) {
console.log(fields);
console.log(files);
});
};
The issue:
When submit button is clicked I expect to see the file logged with console.log(files) instruction. Log writes:
Upload directory is: C:\Liber-I\app\FileSystemManager\routes\tmp
is an existing directory? true
No more log is written on application console for several minutes.
I test the case of no-file submission and it seems it is acting the same! It is a too weired behaviour to be a nodejs problem, where am I doing wrong?
I think I did nothing wrong. Truth is I am not able to fix this problem, so I decided for a good work around. I choose to use connect-multiparty for file uploading and it is working just great.
I'm trying to upload files via a web site. As I'm new in web programming, I didn't found a full example in web that solves all my doubts.
My scenario is:
Nodejs (v.0.10.25) + Express (4.9.0)
Trying to use Connect (3.0).
I created my app using the Express command. So the app.js was created default. I figured out that Express doesn't have multipart by default. And I should install a middleware to use it.
I'm trying to install Connect. The question is: How do I configure it? Must I have to replace the Express server for Connect server or it can exist together ?
Some one can explain how does it works ? Or show an example ?
Thanks too much!
via http://howtonode.org/really-simple-file-uploads
<!-- client html -->
<form action="upload" method="post" enctype="multipart/form-data">
<input type="file" name="file_upload">
</form>
// node.js server
var fs = require('fs'),
http = require('http');
app = (require('express'))();
app.post('upload', function(req, res){
fs.readFile(req.files.file_upload.path, function (err, data) {
var newPath = __dirname + "/uploads/uploadedFileName";
fs.writeFile(newPath, data, function (err) {
res.redirect("back");
});
});
});