Clash Royale CLAN TAG#URR8PPP

Error on encoding large file on Node.js side after sending file from Angular-side

I am getting the file on server side as console.log(body).

console.log(body)

fieldname: 'image',
originalname: '21329726_1866651723650020_188839340_o.jpg',
encoding: '7bit',
mimetype: 'image/jpeg',
destination: './pics/',
filename: '5146c9818ff517c426e34ad84ff3513f',
path: 'pics/5146c9818ff517c426e34ad84ff3513f',
size: 94093



and then encoding by const base64Data = body.buffer.toString("base64").

const base64Data = body.buffer.toString("base64")

But for small size files, it works well but for large files it creates a problem. It is not encoding properly.

I think the problem is due to, it starts encoding before it receives the full file.

Please give me some proper way to do this.

This is my GitHub link here.

cloudinary

2 Answers
2

I think it would be better if you don't convert the pdf file to base64 on the frontend side since it will add request overhead as base64 is bigger in size. Better to upload the file and other request payload using html5 FormData.
Try with these changes.

directly assign the file value to your document property.

this.uploadForm.patchValue(
document: event.target.files[0]
);
//inside your service enrich your data with FormData ,set content-type to undefined and send it
uploadData (uploadForm)
//enrich your data is FormData
let fd= new FormData();
// try looping through `this.form.controls` or uploadForm, to assign it property key and value dynamically
fd.append('branch', branch_value);
fd.append('semester', semester_value);
fd.document('document',document_value)
return this.http.post<RegisterResponse>('/user/upload', fd,set_header_config);



Make sure you set the content-type correctly to undefined. I have tested uploading files in angularjs but not very familier with latest angular changes.

You can check the below blog:
http://learnwebtechs.com/2017/04/22/angularjs-multiple-file-upload-using-http-service

const base64Data = body.buffer.toString("base64");

update this code in your /server/routes/user.js

const express = require('express');
const router = express.Router();
// const mongoose = require('mongoose');
const path = require('path');
const multer = require('multer');

var storage = multer.diskStorage(
destination: function (req, file, cb)
cb(null, __basedir + '/upload');
,
filename: function (req, file, cb)
cb(null, file.originalname)

)

const upload = multer(
storage: storage,
limits:
maxFileSize: 1024 * 1024 * 5

).single('filename');

router.post('/upload', upload, (req, res) =>
res.send('uploaded');
);

router.post('/submit', (req, res) =>
console.log(req.body);
);

module.exports = router;


also add below line in app.js

global.__basedir=__dirname;


req.file

throw new TypeError('Path must be a string. Received ' + inspect(path));

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.