I am using angular 4 and node using multer to upload image. Everything is running fine there is no error but I dont see the file in the folder. Here is the code.
<td><input type="file" (change)="fileChange($event)" placeholder="Upload file" accept=".pdf,.jpeg,.png"></td>
In component
return this.http.post('http://localhost:3000/api/doc/uploadfile', FormData , {headers:this.headerss}).map((res: Response)=>{
const data=res.json();
console.log(data);
return data;
}).
catch(this.handleError);
It shows everything being submitted fine
Than in nodejs I am using multer
var upload=multer({dest: './uploads/'}).single('avatar');
router.post('/uploadfile', function(req, res){
upload(req, res, function(err){
if(err){
console.log(err);
return err;
}
console.log("request"+ req)
return res.send("completed"+ req)
})
There is no error everything goes fine. But I dont see any image being loaded. Please let me know how can I fix this...Thanks
I had to remove content-type and it worked fine
Related
I have been looking through multiple tutorials and stack overflow questions but for some reason I just cannot make this work. I have issues with uploading a file, so maybe fixing that first would solve the whole issue.
I tried a few options of sending a file from the front end to the back end, but it seems to always "get lost" before reaching the back end.
I have decided to use multer at the NodeJS backend to upload the file. Not sure if I am calling multer upload single right or not. Currently this is the code which I have for it:
const multer = require('multer');
const storage = multer.diskStorage({
destination: './uploadedImages',
filename: function(req,file,cb){
cb(null,file.originalname)
}
}) ;
const upload = multer({storage: storage})
exports.saveDrawing = async(req, res, next) => {
try
{
//save image
//tried a few different logs, but with FormData it seems like everything always empty
console.log("Image:");
console.log(req.body.drawingElement);
console.log(req.file);
upload.single('body.file');
return res.status(200).json({message: element});
}
}
catch (err)
{
console.log("Error at drawing save: " + err)
return res.status(500).json({message: "Error - Could not add/edit Drawing"});
}
}
And this is how it is sent from the Angular front end:
setDrawing(params, image): Observable<any> {
const formData = new FormData();
formData.append('file', image)
formData.append('data', params)
console.log("File: ");
console.log(formData.get('file'));
console.log("Data: ");
console.log(formData.get('data'));
return this.http.post<any>(`api/v1/structure/drawing/save`, formData);
}
At this stage printing out the data shows the right values. And the browser shows the right payload too:
At the back end I cannot see them in the req, req.body is empty, there is no req.form. For this api call before I have tried to include any files without the FromData I have accessed the data from req.body.
Am I looking for the data at the right place?
You're not using multer correctly, it's not doing anything.
To implement it as a middleware which you call from your handler, check the example from the docs
So, your handler should look something like this:
// setup multer middleware, set file field name
const upload = multer({storage: storage}).single('file');
exports.saveDrawing = async(req, res, next) => {
// now use the middleware, handle errors
upload(req, res, function (err) {
if (err instanceof multer.MulterError) {
// A Multer error occurred when uploading.
return res.status(500).json({message: "Error - Could not add/edit Drawing"});
} else if (err) {
// An unknown error occurred when uploading.
return res.status(500).json({message: "Error - Could not add/edit Drawing"});
}
// Everything went fine.
console.log("Image:");
console.log(req.body.drawingElement);
console.log(req.file);
return res.status(200).json({message: element});
});
});
I am trying to upload and retrieve a PDF file to and from a PostgreSQL Db using Node.js, Express and Knex.
The DB column documentfile is file type Bytea.
The file seems to be uploading to the DB and is returned. The resulting PDF file (test3.pdf) does not want to open. I have been struggling with this for a long time now. Any help will be greatly appreciated!
Node.js code to upload the file :
app.get('/uploadfile', (req,res) =>{
fs.readFile('0203.pdf' function(err, imgData) {
console.log(imgData)
knex('documenttable').insert(
{documentname: '0203.pdf',
documentfile: [imgData]
})
.then( function (result) {
res.end(console.log("Document uploaded To DB"));
});
});
});
Node.js code to retrieve the file:
app.get('/dbfileback', function(req, res, next) {
knex('documenttable').where({
documentnumber: '1'
}).select('documentname', 'documentfile')
.then( function (result) {
fs.writeFile('test3.pdf', result[0].documentfile,'binary');
res.end(console.log("Done"));
});
});
im trying to create a download for a user but somehow my download doesnt work even tho it works?Let me explain :
Server post request :
app.post('/downloadRequest', function (req, res) {
var fileName = "testname.txt";
var file = __dirname +'/test.txt';
res.download(file,fileName,function(err) {
if(err) throw err;
console.log("downloaded");
});
});
When im calling it,no error message appears. Also it shows "downloaded" in the console.Im clueless..
I'm using nodejs, REACT, express, axios. I want to make upload function, but I can't. When I upload file, server cannot parse the uploaded file (only shows {} log).
Below is my frontend code
When user click UPLOAD button on form element, 'handleSubmit' function is called, and 'handleSubmit' calls 'fileUploadRequest' function.
In 'fileUploadRequest' function, everything is good. I can see infomations of attached file.
<form onSubmit={this.handleSubmit} encType='multipart/form-data'>
<input type="file" onChange={this.handleChange}/>
<input type="submit" value="UPLOAD"/>
</form>
export function fileUploadRequest(username, uploadFile, uploadFileName) {
return (dispatch) => {
dispatch(fileUpload());
let formData = new FormData();
formData.append('fileName', uploadFileName);
formData.append('fileHandler', uploadFile);
return axios.post('/upload/upload', {formData})
.then((response) => {
dispatch(fileUploadSuccess());
}).catch((error) => {
dispatch(fileUploadFailure());
});
};
}
below is backend code.
router.post('/upload', (req, res) => {
console.log(req.body.);
var form = new formidable.IncomingForm();
form.parse(req, (err, fields, files) => {
console.log('parse');
console.log(fields);
console.log(files);
});
});
on req.body log, I can see only '{ formData: {} }' log.
'fields' and 'files' are all '{}' on log
How can I parse attached file on server?
Use multer for Express to handle the uploaded file.
Then use req.file to access all data about the uploaded file.
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
...
router.post('/upload', upload.single('fileHandler'), (req, res) => {
console.log('req.file.filename', req.file.filename); // the filename will be generated by multer
console.log('req.body.fileName', req.body.fileName); // to access the filename you created at the upload
});
#kadiks, thank you. I can parse uploaded file with multer.
but I found something more problem.
Even with multer, my code is not working.
below is not working code.
formData = new FormData();
formData.append('fileName', uploadFileName);
return axios.post('/upload/upload', {formData})
so i changed my code like this.
formData = new FormData();
formData.append('fileName', uploadFileName);
return axios.post('/upload/upload', formData);
only changed '{formData}' to 'formData', but this works good.
I don't know why this happens. someone else know this reason, please comment this issue.
So, bit of an odd problem. I have a bunch of media files saved as base64 strings in mongo, some are images, some are videos.
I made an API for getting the media files:
app.get('/api/media/:media_id', function (req, res) {
media.findById(req.params.media_id)
.exec(function (err, media) {
if (err) {
res.send(err);
}
var file = new Buffer(media.file, 'base64');
res.writeHead(200, {'Content-Type': media.type, 'Content-Transfer-Encoding': 'BASE64', 'Content-Length': file.length});
res.end(file);
});
});
Now, images have no problems. They load just fine, both directly from the API, and when I call the API from a front-end (for example <img src="/api/media/23498423">)
THE PROBLEM
If I fetch a video from a front-end, like the images - but with a video- or object-tag:
<video src="/api/media/3424525" controls></video>
there's no problem, but if I load the video in a browser directly from the API:
http://localhost:8080/api/media/3424525
the server process crashes, no errors. It simply just freezes up. And we're not talking about huge video files - it's a 1.5MB video.
The media type in the header for all the videos I'm testing with is video/mp4. Oh, and just to be clear: if I do the same with images, everything works perfectly.
EDIT:
Okay, so as suggested by #idbehold and #zeeshan I took a look at gridfs and gridfs-stream, and for the purpose of my app, this certainly is what I should have used in the first place. However, after implementing gridfs in my app, the problem still persists.
app.get('/api/media/:media_id', function (req, res) {
gfs.findOne({ _id: req.params.media_id }, function (err, file) {
if (err) {
return res.status(400).send(err);
}
if (!file) {
return res.status(404).send('');
}
res.set('Content-Type', file.contentType);
res.set('Content-Disposition', 'inline; filename="' + file.filename + '"');
var readstream = gfs.createReadStream({
_id: file._id
});
readstream.on("error", function (err) {
console.log("Got an error while processing stream: ", err.message);
res.end();
});
readstream.pipe(res);
});
});
When I call the media file (be it image or video) from a front-end, within a HTML tag, everything works out fine. But if I load a video (again, smallish videos from 1.5mb to max 6mb total size) directly in the browser, the server process freezes. To be a bit more clear: I am testing on windows, and the server app (server.js) is run in console. The console and the process it is running is what freezes. I cannot load any more pages/views in the node app, and I cannot even stop/kill/shutdown the node app or the console.
Streaming videos directly to/from GridFS using gridfs-stream either with mongodb-native db instance or mongoose.
var mongo = require('mongodb'),
Grid = require('gridfs-stream'),
db = new mongo.Db('yourDatabaseName', new mongo.Server("127.0.0.1", 27017)),
gfs = Grid(db, mongo);
//store
app.post('/video', function (req, res) {
req.pipe(gfs.createWriteStream({
filename: 'file_name_here'
}));
res.send("Success!");
});
//get
app.get('/video/:vid', function (req, res) {
gfs.createReadStream({
_id: req.params.vid // or provide filename: 'file_name_here'
}).pipe(res);
});
for complete files and running project:
Clone node-cheat direct_upload_gridfs, run node app followed by npm install express mongodb gridfs-stream.
Truly an odd problem...
I could be way off, but it's worth a shot:
One of the differences when opening a url directly from the browser is that the browser will also try to fetch http://localhost:8080/favicon.ico (while trying to find the tab icon). Maybe the problem is not related to your video code, but rather to some other route, trying to handle the /favicon.ico request?
Have you tried using wget or curl?
I don't know the answer, maybe this is a dumb suggestion, but what is the browser you are using? Maybe something from Microsoft causes the problem...