uploaded files displaying base64 data in the browser - node.js

Question

I'm using couchdb to store attachments that I need to display in the browser.
The data is uploaded from an html input and then processed when saveDoc is called:
getFileData: function(file){
var reader = new FileReader();
return new Promise(function(accept, reject){
reader.onload = (e) => {
accept(e.target.result)
};
reader.readAsDataURL(file);
})
},
saveDoc: function(name, type, filedata, url){
console.log(filedata)
var self=this
return new Promise(function(accept, reject){
self.getData(url).then(data => {
var rev = data['_rev']
console.log(url + ' is the url')
console.log(name + ' is the filename')
documentation.attachment.insert(url, name, filedata, type,
{ rev: rev }, function(err, body) {
if (!err){
console.log(body);
}
else {
console.log(err)
}
})
}).catch(err => {
console.log(err)
})
})
},
I don't get any errors while uploading from the console. But when I navigate to where the attachment should be in the console, I see a browser message telling me the data can't be displayed (for pdf/images), or I see a base64 string that looks like this:
data:image/png;base64,iVBOR...
when the attachment is an html document.
(The data being logged on saveDoc looks like this:
data:application/pdf;base64,JVBER...)
The correct content type as well as a reasonable length is being displayed in my couchdb admin with metadata on the files, so there are no obvious header problems. Can anyone think of any other reason this might not be working in the browser?
Edit
To give some more detail, I uploaded a pdf in Fauxton, which works as expected and displays in teh browser. I then uploaded the same pdf using my saveDoc function, and it somehow added a huge amount of data to the length of the document.
version uploaded in Fauxton:
"_attachments": {
"03_IKB-RH_FUB_mitDB.pdf": {
"content_type": "application/pdf",
"revpos": 5,
"digest": "md5-tX7qKPT6b7Ek90GbIq9q8A==",
"length": 462154,
"stub": true
}
}
version uploaded programmatically:
"_attachments": {
"03_IKB-RH_FUB_mitDB.pdf": {
"content_type": "application/pdf",
"revpos": 4,
"digest": "md5-Zy8zcwHmXsfwtleJNV5xHw==",
"length": 616208,
"stub": true
}
}

Answer 1

The data property of a particular ._attachments{} member should be base64, not dataURL.
When you convert your file to dataURL, you do get base64-encoded binary, but with special prefix. Truncate the prefix, and save only base64-encoded tail.
Basically, to obtain valid base64 you should remove data:*/*;base64, prefix from the beginning of a dataURL-encoded string.
UPD. After diving deeper it turned out, that .attachment.insert(url, name, filedata, type) method accepts binary (not base64) as filedata. To obtain binary from FileReader, fr.readAsArrayBuffer() should be used instead of fr.readAsDataURL().