I'm trying to download a file that is base64 using angular-file-saver.
I can do this without angular-file-saver with just this html mark-up:
<a ng-href="data:{{document.mimeType}};base64,{{document.base64Code}}" target="_blank" download>Download Single Document</a>
I have other needs now that are fulfilled with angular-file-saver that are causing me transition to doing this with FileSaver. Now I want to implement the same download using file saver. My html mark-up is:
<a ng-href="#" ng-click="downloadFile()">Download with File Saver</a>
Then I build up my downloadFile function like this:
function downloadFile () {
var data = new blob([$scope.document.base64Code], {type: $scope.document.mimeType+';base64'});
var config = {
data: data,
filename: $scope.documentSaveAs ? $scope.documentSaveAs : $scope.document.FileName
}
fileSaver.saveAs(config);
}
My issue is that after the file downloads when I attempt to open it the file is corrupt.
I'm assuming that I'm doing something wrong with the type object by concatenating ";base64". I've started digging into angular-file-saver.bundle.js but any help is greatly appreciated. What am I doing wrong?
I ended up digging into BLOB and came across this stackoverflow to get it working.
Creating a Blob from a base64 string in JavaScript
Related
I am trying to upload a file by using sendKeys method and adding absolute path to file but the file does not get uploaded. I think sendKeys method doesn't work very well on react pages. Can someone please help and give a workaround of this problem? Below is the code snippet:
I do not see any error but the file doesn't get uploaded.
Below is the function I am using to upload file:
importFileButton: {
get: function() {
return this.findElement(this.by.xpath("//div[#id='upload-file']//button[#aria-label='Import file Browse ']"))
}
}
attachCommaFile: {
get: function () {
browser.setFileDetector(new remote.FileDetector());
var fileToUpload = './../../files/fileimport_Pipe.txt',
absolutePath = path.resolve(__dirname, fileToUpload);
return this.importFileButton.sendKeys(absolutePath);
}
}
file uploads work with input tags
You're trying to sendKeys to a wrong element - button
Most like the tag you're looking for will have the following css [type=file]
for more detailed info see this post https://stackoverflow.com/a/66110941/9150146
I am trying to append the recorded video which is blob object into quill editor but the video which is appended in the editor is not playable.
Able to see only the blob object getting printed in the quill editor. If i try to open the contents in the browser it is working fine. Any suggestions?
enter image description here
well,according to this issue,
I think you maybe need to overwrite the video module's sanitize method to make it work,for image it can work like this:
var Image = Quill.import('formats/image')
Image.sanitize = function(url) {
return url
}
so as I guess, following things maybe useful:
var Video = Quill.import('formats/video')
Video.sanitize = function(url) {
return url
}
and you may need provide blob url to make it work
I'm actually struggeling with a problem handling some kml files with google map in my Javascript application.
I wrote a method with that I'm reading a KML file from an URL or my local file system and storing the content as a String in a Database. Now i would like to activate layers that are stored in my db by clicking a button. Everything is fine up to here.
In every example i can find they are only using the url-attribute of a KmlLayer by passing an url to a KML-File.
like here:
var ctaLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
map: map
});
But since my files are stored as Strings in my db I don't have an url to a file, only the content. I can't find a way to only pass the XML-String as content.
Somebody here who can help?
Maybe someday somebody will struggle with a similar problem. The solution was a little bit tricky. I needed to create a Blob with the content of my String. With the blob I created a file and packed it into an URL. This URL you can pass to your kml parser. I used https://github.com/geocodezip/geoxml3 for that.
vm.activeLayers.forEach(function(value, key) {
var file = new Blob([value], {type: 'kml'})
var url = URL.createObjectURL(file);
var myParser = new geoXML3.parser({
map : map
});
myParser.parse(url);
})
I have a JSON array of objects that is a result of a function in nodejs. I use json2xls to convert that to an excel file, and it downloads to the server (not in a public folder, and is formatted correctly in Excel).
I would like to send a response to the frontend with the json results (to display as a preview) and show a button they can click to download the xlsx file OR display the JSON results and automatically download the file.
But I can't get it, and I've tried so many things I'm going crazy.
My controller code (the part that creates the xls file):
var xls = json2xls(results,{});
var today = (new Date()).toDateString('yyyy-mm-dd');
var str = today.replace(/\s/g, '');
var fileName = "RumbleExport_"+ str +".xlsx";
var file = fs.writeFileSync(fileName,xls,'binary');
res.download('/home/ubuntu/workspace/'+file);
The frontend controller:
vm.exportData = function(day, event, division) {
console.log('Export registrations button pressed.', vm.export);
//send the search parameters to the backend to run checks
$http.post('/api/exportData', vm.export).then(function(response){
vm.results = response.data;
console.log("Results",response);
vm.exportMessage = "Found " + vm.results.length + " registrations.";
})
.catch(function(error){
vm.exportError = error.data;
});
};
The view:
//display a button to download the export file
<a target="_self" file="{{vm.results}}" download="{{vm.results}}">Download Export File</a>
Someone please put me out of my misery. All the classes I've taken and none have covered this.
I FINALLY got it! And since I searched forever trying to make something work, I'll share the answer:
On the backend:
//save the file to the public/exports folder
var file = fs.writeFileSync('./public/exports/'+fileName,xls,'binary');
//send the results to the frontend
res.json(200).json({results:results, fileName: fileName});
On the frontend, use HTML to download a link to the file:
<a href="exports/{{fileName}}" download>Save File</a>
I am trying to build a simple photo upload app on Ionic (Cordova). I am using the cordovaImagePicker plugin to have the user select images from the mobile device. This plugin returns an array of paths on the device.
For handling the upload part I am using jquery-file-upload (mostly because that is what I used for the browser version and I am doing all kinds of processing for which I have the code ready). The problem is however that jquery-file-upload expects to work with an input element <input type="file"> which creates a javascript File object containing all kinds of metadata.
So in order to get the cordovaImagePicker to work with jquery-file-upload, I figure I have to convert the filepath to a File object. Below I am using the cordova file plugin to achieve this:
$cordovaImagePicker.getPictures($scope.pickOptions).then(function(filelist) {
$.each(filelist, function (index, filepath) {
$window.resolveLocalFileSystemURL(filepath, function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(e) {
fileObj = new File([this.result],"filename.jpg",{type: "image/jpeg"});
// send filelist from cordovaImagePicker to jquery-fileupload as if through file input
$('#fileupload').fileupload('send', {files: fileObj});
};
reader.readAsArrayBuffer(file);
}, function(e){$scope.errorHandler(e)});
}, function(e){$scope.errorHandler(e)});
});
}, function(error) {
// error getting photos
console.log('Error selecting images through $cordovaImagePicker');
});
So first of all this is not really working correctly, apparently I am doing doing something wrong, since for example the type attribute ends up being another object that contains the type attribute with the correct values (and other such weird issues). I would be happy if someone could point out what I am doing wrong.
Surely there must be something (cordova plugin?) that I am not aware of that does this conversion for me (including for example adding a thumbnail)? Alternatively, maybe there is something that can easily make jquery-file-upload work with filepaths? I couldn't find anything so far...
However, it feels I am trying too hard here to force connecting two components that were just not built to work together (File objects vs filepath) and I should maybe just rewrite the processing and use the cordova file transfer plugin?
I ended up rewriting the uploader with the cordova-file-transfer which works like a charm. I wasted more time trying to work around it than just rewriting it from scratch.