Develop Reference

PDFMake Base64 generates malformed document

I'm using PDFMake to generate some PDF reports on client side.
When I specify the definition for document and pass it to createPdf(DEFINITION_HERE) I get my PDF and it looks nice and shiny. But I'm saving it in the DB as Base64 encoded string and when I try to reopen it with data URI (ie: data:application/pdf;base64,JVBER...) the document is completely malformed.
My DB call looks like this:
await pdfFile.getDataUrl(async (result: string) => {
await myServiceLayer.generatePdfReport(result, fileName, creator);
});
Anyone else had this issue with PDFMake library? Any ideas on what could be the cause of this?

OK, so after trying different things and debugging left and right, I stumbled upon this:
https://github.com/bpampuch/pdfmake/issues/318
So I removed call to .download() on my PDF file and checked for Base64 again, now it had correct value and file looks as it should.
So in a nutshell, if we call multiple methods on PDFMake, usually something will get messed up.
I had my .download() call just before my .getBase64() as I wanted to first download the file for the user and then also store it in DB as Base64, as .download() happened .getBase64() kept on giving me Base64 output which resulted in malformed PDF file.

JS convert base64 image to image file

Basically I have an img on a server and I access that using fetch which also authenticates the img. Ive seen online that I would need to convert it to base64 in order to display it. Im using React and ANTD and its for an image uploader. The uploading part is fine but the problem is when I log back into the page, I only have the file name saved so I need to make the call to the server which is in the fetch. Then I try to set the new vars to logoFileList. I need to see the image preview. What properties of the image object does the antd file uploader use?
fetch()
.then(res => {
const data = `${Buffer.from(res.url).toString(base64)}`;
const fileList = [...logoFileList];
fileList[index].url = data;
fileList[index].thumbUrl = data;
setLogoFileList(fileList);
})
Ive spent all day working on this any help would be great. Thanks.
I cant just display the image url because its authenticated and gives me a 403 error.

images not getting loaded

I'm trying to load a bunch of png images that are in a folder in my project. I'm using a function that takes in an array of strings that signify the name of the actual images.
The actual html that comes up in the console seems correct, however the images don't get loaded. The weird thing is, if I hard code in the html with the src of one of the images, the src in the inspector comes up as 'name.93439.png' with random numbers in between the name and the file extension, and the image shows up. But the source I am injecting in the javascript using template strings is no different than what I am putting into the html when I hard code it.
So is there something I'm missing here with loading images? Why does hard coding it in work, but when I try using JS it doesn't give the same results? Code below:
FILE STRUCTURE:
index.html
/src
index.js
/assets
/images
...{all of the images}.png
function loadImages(names) {
names.forEach((name) => {
let image = document.createElement('img');
image.src = `src/assets/images/${name}.png`;
let newDiv = document.createElement('div');
newDiv.appendChild(image);
document.getElementById('images').appendChild(newDiv);
});
}

This happens because parcel hashes your assets during building. When executing the js, ${name} is not aware of the (parcel) hash and therefore doesn't finds the correct file. Try to take out the assets from the build process and copy them to your dist folder (you'll probably want to automate this at some point). So the assets file names do not get hashed.

How do i use local files in react app without importing them

Im building a blog application and i just realized i can not use local file paths in react, and since the response of my REST api is a unique path for every image, i cant use it in react.
Is there a way of going around this without importing every single image?
This is what i am currently doing:
const imgSrc = this.state.post.img_path
const styles = {
background: 'url('+imgSrc+')'
}
and then i apply the styles to the element.
I do this cause soon im going to update it and make it so i will upload 3 different images for different screen sizes.

Solution:
Instead of storing my images outside of the public folder, i changed the upload location to store the images in the public/images folder. Thankfully i only had a few images so it wasnt that bad.
Then i set the url to be:
"https://localhost:3007/images/" + image name gotten from REST api response
and now it works.

upload image from local computer and saving them to a folder with redactor in meteorjs

I am using redactor plugin with meteorjs, to format the texts and add images, videos and links.Redactor supports uploading images as a web link, but here I wanted to add a button to upload images from local machine. For this I have added the button to the redactor. It is showing the browse image selection and is working.
$('.editor').redactor({
imageUpload:"/upload",
imageUploadCallback: function(image, json)
{
console.log(image);
console.log(json);
},
imageUploadErrorCallback: function(json)
{
console.log(json.error);
}
});
When I print console.log("#redactor_file").val()); it gives the name of the file. But, when I do console.log(console.log(html);) its gives <p><img src="undefined"></p>. Can I get the link or the url of the image here. If yes then how?
HTTP.methods({
'upload': function(data) {
console.log(data)
return JSON.stringify( {'data':"data"})
}
});
When I do console.log(data) using the above code it shows me Image in String format. Now I want to store the Image using GridFS. Or is there any better way to store Image in MongoDB. If yes then tell me or guide me to store image using GridFS ?

While Redactor provides a client-side method for uploading files, it does not provide a server-side method for receipt of uploaded files. Also, stock Meteor doesn't provide such a method either.
So you have a few choices. First is through using a router such as Iron Router, which you could create a server-side /uploads route, and Iron Router gives you access to the request, response objects. Which might work, but because this is no longer over DDP, you don't have access to Meteor.userId, etc. See How to respond server-side to routes using Meteor and Iron-Router?
A more Meteor-like way of doing the file upload is Meteor File or CollectionFS though I'm not sure how simply these would integrate with Redactor. You could definitely get them to work together, just off the top of my head I don't know how easy it would be.