Develop Reference

Get base64 content from local mp3/mp4

I'm trying to get the base64 content from a local audio on my device using javascript.
I'm using the following code:
var file = new File(["file_name.mp4"], "/data/user/files/VoiceRecordingPluginData/file_name.mp4");
var reader = new FileReader();
// Read file content on file loaded event
reader.onloadend = function (event) {
console.log(reader.result);
};
// Convert data to base64
reader.readAsDataURL(file);
As result, "file" gets populated like this:
file.name: ["file_name.mp4"]
file.localURL: "/data/user/files/VoiceRecordingPluginData/file_name.mp4"
Once "onloaded" is reached, "reader.result" is empty.
Any hints on what's wrong in my code?

Excel export in JavaScript not working using Blob

I have some javascript problem. I'm struggling to download a file in xlsx format. In backend works everything fine - file is downloaded using for example swagger.
My code:
private async downloadDocumentTemplate(report: string) {
this.fileLoading = true;
try {
const result = await this.$store.dispatch("report/downloadDocument", report);
const blob = new Blob([result], {type: "application/octet-stream"});
var reader = new FileReader();
reader.addEventListener("loadend", function() {
});
reader.readAsArrayBuffer(blob);
console.log("blob contnet : " + blob.type);
FileSaver.saveAs(blob, 'report.xlsx');
} catch (ex) {
this.$store.commit("app/showErrorPopup", ex);
}
this.fileLoading = false;
}
After downloading file from the web and file is open automatically and I am experiencing an error that reads:
"We found a problem with some content .xlsx. Do you want us to try and recover as much as we can?" e

I had some similar issue. The problem in my case was how I parsed the Excel data. The script was putting wrong formatted information.
If downloading the file to the computer works, there must be an error in your code which parses the excel data.

Compress dcm files with JSZip

im currently working on a dicom file upload system that uploads .dcm files with jquery file uploader. It is working fine but as DICOM data-sets can get very large i want to compress the files with JSZip before the upload.
Simply i am passing the file object to a zip function that returns the zipped file object. This is working fine with commonly known files but not with DICOM files. I've already tried to encode the files to base64 string before zipping but that doesn't work either.
JSZip always throws me the following error:
Uncaught Error: The data of 'IM-0001-0001.dcm' is in an unsupported format !
I am using the following file compress function:
compressFile: function(data) {
var zip = new JSZip();
var file = data.files[0];
zip.file(file.name, file, {binary:false});
content = zip.generate({
compression: 'DEFLATE'
});
return content;
}
I have also tried with base64 and binary in the .file options but that didn't made the trick.
Has anyone a clue on how to get that working? Im a beginner to JS so im sorry for noobish questions ^^
Kind Regards

You need to use a FileReader to read the content of data.files[0] first:
var reader = new FileReader();
reader.onload = (function(e) {
var zip = new JSZip(e.target.result);
var result = zip.generate({
compression: 'DEFLATE'
});
// do something with result
}
reader.readAsArrayBuffer(data.files[0]);
See also this example.
Warning, FileReader is asynchronous: you can't make your function returns the result.

Passing a Cordova camera.getPicture File to AWS S3 (JS SDK)

I am trying to pass an image created by Cordova's camera plugin to Amazon Web Service's S3.
In the past, I have used the HTML File API to create my S3 params, and been able to pass the file object. I can't directly link to how you do this, but there is an example on this page under the section 'example uses the HTML5 File API to upload a file on disk to S3'.
But this file has not been inserted by an input element, so I can't access anything like files[0] - the file is returned by Cordova either as a base64 or an available file location. So I am trying to figure out how I would replicate that action using Cordova information.
The solution I have worked off of is found here which results in the code below:
function onSuccess(imageData) {
window.resolveLocalFileSystemURL(imageData, function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
var theBody = btoa(evt.target._result);
var 3_params = {
Bucket: 'the-Bucket',
Key: 'the-Key',
ContentType: file.type,
Body: theBody
}
...other S3 SDK code...
};
reader.readAsDataURL(file);
}
}
}
This process works, but:
I have to take _result (which is a base64) through btoa which means...
It is pretty slow.
It results in larger file sizes than I should need
It also requires that I use getObject instead of getSignedURL
When I get each object, I then have to put it through atob which means...
If I have several objects to get things go VERY slow
What I would like to do is send the actual file object instead of messing with this base64. Alternatively, I would take a better/smarter/faster way to handle the base64 to S3 process.

I was able to use the 'JavaScript Canvas to Blob' polyfill to create a blob from my Base64, and then send the returned Blob on to S3. Because it is now a blob instead of a coded string, I can use getSignedURL in the s3 APK to reference the image.
The only change from above is:
var theBody = btoa(evt.target._result);
Becomes
var theBody = window.dataURLtoBlob(evt.target._result);
https://github.com/blueimp/JavaScript-Canvas-to-Blob

For those who find this, there is a better way since the new features introduced in XMLHttpRequest and now we can use readers and Blob as a source.
The initial code now could be written using FileReader.readAsArrayBuffer method and passing Blob object as the body source:
function onSuccess(imageData) {
window.resolveLocalFileSystemURL(imageData, function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
var blob = new Blob([new Uint8Array(this.result)], { type: file.type });
var 3_params = {
Bucket: 'the-Bucket',
Key: 'the-Key',
ContentType: file.type,
Body: blob
}
...other S3 SDK code...
};
reader.readAsArrayBuffer(file);
}
}
}
More info can be found at Cordova Blog - Transition off of cordova-plugin-file-transfer

How do i remove files from a zip file uploaded through kendoUpload? Using jszip

After the user uploads a zipped file, i want to remove the images folder from it before sending it over the network. I am using kendo for uploading, and the existing functionality works fine. I just want to add on the removing images part. This is what i have so far:
function onSelect(e) {
var file = e.files[0];
if (endsWith(file.name, '.eds')) {
var contents = e.target.result;
var jszip = new JSZip(contents);
jszip.remove("apldbio/sds/images_barcode");
fileToSend = jszip.generate({type: "base64", compression: "DEFLATE"});
}
e.files[0] = fileToSend;
openProgressDialog(e.files.length); //this is existing code, works fine
}
target.result doesn't seem to exist in the event e. And nothing works properly from that point on. e should probably be used inside a FileReader object's onload(), (as seen here and here) but i have no idea how to use a FileReader for my purpose, with kendo Upload.
EDIT:I did some more reading and now i am using FileReader like this:
var reader = new FileReader();
reader.onload = function (e) {
// do the jszip stuff here with e.target.result
};
reader.onerror = function (e) {
console.error(e);
};
reader.readAsArrayBuffer(file);
Note : file = e.files[0] as in the 1st code block.
With this though, i get the error:
Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.