Wednesday, 17 February 2021

Upload base64 image in Angular to NodeJs

======Angular onFileChange(event: any) { var reader: any = new FileReader(); if (event.target.files && event.target.files.length > 0) { let file = event.target.files[0]; console.log("file:", file); reader.readAsDataURL(file); console.log("reader:", reader); reader.onload = () => { console.log(">>>>", reader.result) var p = { oData: reader.result.toString() // oData: reader.result.toString().split(',')[1], } this.uploadfile(p); } }; } uploadfile(p: any) { try { this.gbls.uploadfile(p).subscribe((data: any) => { var result: any = data; if (result.Result == true) { this.uimage = result.location; this.gbls.successTost(data.Message); } else { this.gbls.errorTost(data.Message); } }, error => { this.gbls.errorTost("Not Responding"); }); } catch (e) { this.gbls.errorTost(" catch Error"); } } ==================NodeJs const fs = require('fs'); app.use('/api/uploadfile', (req, res, next) => { // console.log(">>",req.body); var imgB64Data = req.body.oData; var decodedImg = decodeBase64Image(imgB64Data); var imageBuffer = decodedImg.data; var type = decodedImg.type; console.log("type", type) // var extension = mime.extension(type); var extension = "jpg"; console.log("type", extension); console.log(">>>", new Date()); var date = new Date(); var fileName = date.getTime() + "_image." + extension; try { fs.writeFileSync("public/uploads/" + fileName, imageBuffer, 'utf8'); res.send({ Message: "Fileupload", Result: true, fileName: fileName, location: "uploads/" + fileName }) } catch (err) { console.error(err) res.send({ Message: " Fail to Upload File", Result: true, err: err }) } }); function decodeBase64Image(dataString) { var matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/), response = {}; if (matches.length !== 3) { return new Error('Invalid input string'); } response.type = matches[1]; response.data = new Buffer(matches[2], 'base64'); return response; }

No comments:

Post a Comment

IIS deployment support details

  Node JS - IIS deployment support details node: http://go.microsoft.com/?linkid=9784334 IISNode: https://github.com/azure/iisnode/releases/...