I'm having problems downloading a .docx file from server. I can correctly upload and download pdf files or txt files, but not docx files.
When uploading I do this in my onNativeInputFileSelect method:
if(event.target.value){
const file: File = event.target.files[0];
let fileToUpload = new MyFile();
let filenames = file.name.split('.');
fileToUpload.name= filenames[0];
fileToUpload.type = filenames[1];
this.changeFile(file).then((base64: string):any => {
fileToUpload.content= base64;
this.networkService.uploadFileDocumento(fileToUpload).subscribe(() => {
...
where changeFile is this method:
changeFile(file){
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
When I upload a pdf file, the base64string starts with
data:application/pdf;base64,JVBERi0xLjUKJb/3ov...
and when I upload the docx file the base64string starts with
data:application/octet-stream;base64,UEsDBB...
Then I try to download the files. I can correctly download the pdf file, but when I try to download the docx file I don't get the correct file type (the type of file is "File") and I can't open it as a document. When I get the file from the server I do this:
let splitted = file.content.split(',');
let type = splitted[0].substring(splitted[0].lastIndexOf(':') +1, splitted[0].lastIndexOf(';'));
let blob = this.b64toBlob(splitted[1], type);
let blobUrl = URL.createObjectURL(blob);
let doc = document.createElement("a");
doc.href = blobUrl;
doc.download = file.name;
doc.click();
Where b64toBlob is the following method:
b64toBlob(b64Data, contentType = '', sliceSize = 512) {
const byteCharacters = atob(b64Data);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, { type: contentType });
return blob;
}
Why do I get application/octet-stream when uploading the file? And then I can't download id with the correct type? Where am I going wrong?
Related
I'm working on a small project to convert a large xml to several formatted pdf documents. The large xml contains multiple similar format xmls. So I'm using a single html template for printing all the documents. After producing all the pdf documents I also need to produce a metadata file with some basic info on each document that was printed.
I thought using the fan out fan in scenario of durable functions is a perfect for my use case. I'm working with Nodejs. I setup all my code and it seems to be working fine locally. The Orchestration function looks like the below.
const df = require("durable-functions");
module.exports = df.orchestrator(function* (context) {
var xmldata = yield context.df.callActivity("DurablegetblobJS1","");
var tasks = [];
for (file of xmldata) {
tasks.push(context.df.callActivity("Durableactivityjs2", file));
}
const outputs = yield context.df.Task.all(tasks);
var finalout = "";
for (out of outputs){
console.log('I am done1 :' + out );
finalout = finalout + out;
}
return finalout;
});
DurablegetblobJS1 : Fetches the entire xmls and splits it into multiple smaller xmls(1 per document).
Durableactivityjs2 : Fetches the html template, extracts the different values from the individual xmls and applies them to the html and finally prints out the pdf into an azure storage. It returns the name of the pdf document that was printed for creation of the metadata file. The code for this is below.
var fs = require('fs');
var xml2js = require('xml2js');
var html_to_pdf = require('html-pdf-node');
var parser = new xml2js.Parser();
module.exports = async function (context) {
//console.log("Hello from activity :")
var xmldict = {}
var xmltext = context.bindings.name;
//Extract the nodes and attributes
metadata(xmltext,xmldict);
report(xmltext,xmldict);
context.log(xmldict)
const { BlobServiceClient } = require("#azure/storage-blob");
// Load the .env file if it exists
require("dotenv").config();
const AZURE_STORAGE_CONNECTION_STRING = process.env.STORAGE_CONNECTION_STRING || "";
const blobServiceClient = BlobServiceClient.fromConnectionString(
AZURE_STORAGE_CONNECTION_STRING
);
var containerClient = blobServiceClient.getContainerClient('test');
var blobname = 'comb_template.html';
var blockBlobClient = containerClient.getBlockBlobClient(blobname);
var downloadBlockBlobResponse = await blockBlobClient.download(0);
var html_template = await streamToText(downloadBlockBlobResponse.readableStreamBody);
let options = { format: 'A4'};
let file = { content: html_template};
const x = await writepdf1(file, options,blobServiceClient,xmldict);
console.log("Written Blob PDF");
return x;
};
async function writepdf1(file, options,blobServiceClient,xmldict){
const pdfBuffer = await html_to_pdf.generatePdf(file, options);
const containerClient = blobServiceClient.getContainerClient('test2');
const targetblob = xmldict['OU'] + '/' + xmldict['ReportName'] + '/' + xmldict['OU'] + '_' + xmldict['ReportName'] + '_' + xmldict['DocumentID'] + '_' + '.pdf';
console.log('Blob name :' + targetblob);
const blockBlobClient_t = containerClient.getBlockBlobClient(targetblob);
const uploadBlobResponse = await blockBlobClient_t.upload(pdfBuffer, pdfBuffer.length);
return targetblob;
}
async function streamToText(readable) {
readable.setEncoding('utf8');
let data = '';
for await (const chunk of readable) {
data += chunk;
}
return data;
}
function metadata(xmltext,xmldict){
parser.parseString(xmltext, function (err, result) {
var test1 = result['HPDPSMsg']['DocumentRequest'][0]['MetaData'][0];
Object.entries(test1).forEach(([key, value]) => {
xmldict[key] = value[0];
});
});
}
function report(xmltext,xmldict){
parser.parseString(xmltext, function (err, result) {
var test2 = result['HPDPSMsg']['DocumentRequest'][0]['Report'][0]['$'];
Object.entries(test2).forEach(([key, value]) => {
xmldict[key] = value;
});
});
}
However, when I deploy the entire project into a azure premium function(EP1 - Windows), I see some errors in app insights when I try and execute my function and the pdfs are never generated.
Activity function 'Durableactivityjs2' failed: Could not find browser
revision 818858. Run "PUPPETEER_PRODUCT=firefox npm install" or
"PUPPETEER_PRODUCT=firefox yarn install" to download a supported
Firefox browser binary
I'm a bit clueless how I'm supposed to resolve this. Any help or suggestions would be appreciated.
I am importing a CSV file in my angular application using sheetjs, Data is imported successfully. but it is converting string with a date to only date ignoring the string.
Code in ts file
readExcel() {
let readFile = new FileReader();
readFile.onload = (e) => {
this.storeData = readFile.result;
var data = new Uint8Array(this.storeData);
var arr = new Array();
for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join("");
var workbook = XLSX.read(bstr, { type: "binary" });
var first_sheet_name = workbook.SheetNames[0];
this.worksheet = workbook.Sheets[first_sheet_name];
let processJsonData: Array<any> = XLSX.utils.sheet_to_json(this.worksheet, { raw: false });
console.log(processJsonData)
}
}
How to get both string and date in the json response. Please suggest
I Have path tmp\daily_gasoline_report\9. where 9 is uniqe-id which will be different every time I want to send image from that folder in response. how can I send that file in response ??
I have tried with fs
if (!req.body.path) {
logger.warn(error.MANDATORY_FIELDS);
return res.status(500).send(error.MANDATORY_FIELDS)
}
let directory_name = req.body.path;
let filenames = fs.readdirSync(directory_name);
console.log("\nFilenames in directory:");
filenames.forEach((file) => {
console.log("File:", file);
});
let result = error.OK
result.data = filenames
logger.info(result);
return res.status(200).send(result)
I get only files name not files but now I have files name which comes in Url with path and file name from front end so, how can I send file from path in response
I got the Answer
this worked for me to get single image from folder
const fs = require('fs');
const url = require('url')
let query = url.parse(req.url, true).query;
let pic = query.image;
let id = query.id
let directory_name = "tmp/daily_gasoline_report/" + id + "/" + pic
let filename = fs.existsSync(directory_name);
if (filename) {
//read the image using fs and send the image content back in the response
fs.readFile(directory_name, function (err, content) {
if (err) {
res.writeHead(400, { 'Content-type': 'text/html' })
console.log(err);
res.end("No such image");
} else {
//specify the content type in the response will be an image
res.writeHead(200);
res.end(content);
}
});
Try this,
let directory_name = req.body.path;
let filenames = fs.readdirSync(directory_name);
let resultantArr = [];
console.log("\nFilenames in directory:");
filenames.forEach((file) => {
console.log("File:", file);
var fr = new FileReader();
fr.onload = function () {
var data = fr.result;
var array = new Int8Array(data);
resultantArr.push(JSON.stringify(array, null, ' '));
};
fr.readAsArrayBuffer(file);
});
let result = error.OK
result.data = resultantArr;
logger.info(result);
return res.status(200).send(result)
#Arya Here is the code-snippet to deal with image file:
let fr = new FileReader();
fr.onloadend = function(event) {
let base64Data = fr.result;
let arrayBufferView = new Uint8Array(base64Data);
let blob = new Blob( [ arrayBufferView ], { type: file.type } );
resultantArr.push(blob);
}
fr.readAsArrayBuffer(file);
And later on to read the blob values of an array and create image url out of it, you can do this:
let urlCreator = window.URL || window.webkitURL || {}.createObjectURL;
let imageUrl = urlCreator.createObjectURL( blob );
you will need to zip all files in the path and send zip folder, you cannot send multiple files.
Also cross check your requirements, if file size goes to big number your application will crash
Iam capturing webcam screenshot in reactjs(react-webcam). Screenshot is in the form of base64 encoded string. I am sending the base 64string to nodejs and I want to convert base64 String to .jpeg file, So that I can save in Azure Blob Storage.
Is there any method to convert base64 string to .jpeg file.
You can convert your Base64 string to Buffer and then try storing it to azure.
var base64String = "....."; // your base64 string
var bufferValue = Buffer.from(base64String,"base64");
I used this and it worked.
below is server side code(NodeJS)
var contentType = 'image/jpeg';
let base64String=req.body.img;
let base64Image = base64String.split(';base64,').pop();
let date=Date.now();
fs.writeFile(`./uploads/${date}.jpeg`, base64Image, {encoding: 'base64'}, function(err) {
console.log('File created');
sourceFilePath= path.resolve(`./uploads/${date}.jpeg`);
blobName=path.basename(sourceFilePath, path.extname(sourceFilePath));
//console.log(sourceFilePath);
blobService.createBlockBlobFromLocalFile(containerName, blobName, sourceFilePath, err => {
if (err) {
console.log(err);
}
else {
//resolve({ message: `Upload of '${blobName}' complete` });
console.log("UPLOADED")
}
});
Try this:
based-blob
(async function() {
const b = require('based-blob');
const base64String = 'some base64 data...';
const blob = b.toBlob(base64String);
const b64s = await b.toBase64(blob);
console.log(b64s == base64String); // true
})();
Hi i use this function
public b64toBlob = (b64Data: string = '', sliceSize?: number) => {
sliceSize = sliceSize || 512;
if ( b64Data !== null) {
let block = b64Data.split(';');
let dataType = block[0].split(':')[1];
let realData = block[1].split(',')[1];
let filename = this.makeid() + '.' + dataType.split('/')[1];
let byteCharacters = atob(realData);
let byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
let slice = byteCharacters.slice(offset, offset + sliceSize);
let byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
let byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
let blob = new Blob(byteArrays, {type: dataType});
return blob ;
} else {
return '';
}
}
i want to extract text from docx file, i have tried using mammoth
var mammoth = require("mammoth");
mammoth.extractRawText({path: "./doc.docx"})
.then(function(result){
var text = result.value; // The raw text
//this prints all the data of docx file
console.log(text);
for (var i = 0; i < text.length; i++) {
//this prints all the data char by char in separate lines
console.log(text[i]);
}
var messages = result.messages;
})
.done();
but the problem here is that in this for loop i want data line by line instead of char by char, please help me here or is there any other method that you know?
One method is to fetch the whole text and then split by '\n':
import superagent from 'superagent';
import mammoth from 'mammoth';
const url = 'http://www.ojk.ee/sites/default/files/respondus-docx-sample-file_0.docx';
const main = async () => {
const response = await superagent.get(url)
.parse(superagent.parse.image)
.buffer();
const buffer = response.body;
const text = (await mammoth.extractRawText({ buffer })).value;
const lines = text.split('\n');
console.log(lines);
};
main().catch(error => console.error(error));
You can use any-text
Usage is simeple:
var reader = require('any-text');
reader.getText(`path-to-file`).then(function (data) {
console.log(data);
});
var mammoth = require("mammoth");
var path = require("path");
var filePath = path.join(__dirname,'./doc.docx');
mammoth.extractRawText({path: filePath})
.then(function(result){
var text = result.value; // The raw text
//this prints all the data of docx file
//console.log(text);
console.log('------------------------------');
var textLines = text.split ("\n");
for (var i = 0; i < textLines.length; i++) {
//this prints all the data in separate lines
console.log(textLines[i]);
}
var messages = result.messages;
})
.done();