Use dynamically created link to download file in AngularJS - javascript

I'm using ng-click to call a function which makes a post http request to the server and then creates a link. How can I use this created link to also download the file attached to it?
My template
<button ng-click="getFile(row)">Download</button>
My controller
$scope.getFile = function(row){
row.isSelected = true;
var link = null;
var postData = {
"data" : {
"type": "member_report",
"relationships": {
"member" : {
"data": {
"type": "user",
"id": memberID
}
}
}
}
}
ajaxRequest.ajaxPost('http://someApi.com', postData).then(
function(jsonAPI) {
link = jsonAPI.links.download; //here is the response link
//todo something with it to download file
},
function(errorResponse) {
}
);
}
By the way ajaxRequest is just a simple $http service wrapper.

If I understood you, then I suppose that you want to initiate the download as soon as you get the link dynamically, then you can proceed as follows
$scope.getFile = function(row){
row.isSelected = true;
var link = null;
var postData = {
"data" : {
"type": "member_report",
"relationships": {
"member" : {
"data": {
"type": "user",
"id": memberID
}
}
}
}
}
ajaxRequest.ajaxPost('http://someApi.com', postData).then(
function(jsonAPI) {
link = jsonAPI.links.download;
// Now we want to download the link
var downloadLink = document.createElement('a');
downloadLink .href = link;
// now set the visibility to hidden so that it doesnt effect the frontend layout
downloadLink .style = 'visibility:hidden';
downloadLink .download = 'file_name';
// now append it to the document, generate click and remove the link
document.body.appendChild(downloadLink );
downloadLink .click();
document.body.removeChild(downloadLink );
},
function(errorResponse) {
}
);
}

Try to save the link in the the $scope. Then, use this:
<a target="_self" href={{your variable}} download="foo.pdf">
Also check the documentation:
http://docs.angularjs.org/guide/
Answer taken from here:
How do you serve a file for download with AngularJS or Javascript?

I managed to do it using the $window service.
ajaxRequest.ajaxPost('http://someApi.com', postData).then(
function(jsonAPI) {
link = jsonAPI.links.download;
$window.location.href = link;
},
function(errorResponse) {
}
);
Just had to add $window as a dependency

Related

Image not displaying in html image tag

I am getting this response from the server for a jpeg image get request(with CORS):
ÿØÿàJFIFÿÛ ( %!1"%)+.............
After converting this to base64 it using btoa(encodeURIComponent(data)) looks like:
data:image/jpeg;base64,JUVGJUJGJUJEJUVGJUJGJUJEJUVGJUJGJUJEJUVGJUJGJUJEJTAwJTEwSkZJRiUwMCUwMSUwMSUwMSUwMEglMDBIJTAwJTAwJUVGJUJGJUJEJUVGJUJGJUJEJTAwJUVGJUJGJUJERXhpZiUwMCUwME1NJTAwKiUwMCUwMCUwMCUwOCUwMCUw...............................
On setting the img tag src attribute to the base64 above the image is not rendering in the browser.
However, when I open the image link in the browser tab, it loads properly. Also, on sending the same request in postman it renders the image in the response, in postman.
Even using the blob approach doesn't work (used bower: angular-img-http-src)
$scope.$watch('objectURL', function (objectURL) {
elem.attr('src', objectURL);
});
$scope.$on('$destroy', function () {
revokeObjectURL();
});
$http.get(url)
.then(function (response) {
var blob = new Blob(
[ response.data ],
{ type: response.headers('Content-Type') }
);
$scope.objectURL = URL.createObjectURL(blob);
});
Kindly help here.
In Service:
yourService : function(options) {
return $http.get(url, {
responseType : 'arraybuffer'
}
).success(function(data) {
var file = new Blob([ data ], {
type : 'image/jpeg'
});
var fileURL = URL.createObjectURL(file);
if(options && options.successCallBack) {
return options.successCallBack(fileURL, {});
}
});
},
In Controller:
function yourImageSuccessHandler(fileUrl, options) {
$scope.objectUrl= fileUrl; // now you will have fileUrl in
// controller
}
yourService.getDownloadDoc(empId, {
successCallBack: yourImageSuccessHandler
});
In template HTML:
<img ng-src={{objectUrl}}></img>
Though I don't know if there's a specific angular routine, the general JS solution for created images goes something like this...
function addIMG(durl, callback) {
var img = new Image();
img.addEventListener('load', function() {
callback(this);
}, false);
img.src = durl;
}
addIMG(objectURL, function(img) {
$('#element').appendChild(img);
});
Hope that helped :)

ng-click new tab link with object params

I have a link and I'd like to open the link in the new tab. The problem is : I send object parameters.
HTML :
<a ng-click="go(row)" ></a>
JS :
$state.go('link', {
'search': {
'obj': {
'id': something
}
}
});
I have already tried href and ng-href without success.
Thank you.
You can use something like this to open it in new tab using a controller function for go(row) like
$scope.go = function(row){
var param = {
'search': {
'obj': {
'id': something
}
};
var url = $state.href('link', {parameter: param });
//open in new tab
window.open(url,'_blank');
}
and then access the parameter in your controller like this
$stateParams.parameter
and value should be
{
'search': {
'obj': {
'id': something
}
}

How to create and save file to local fileSystem using AngularJS?

I want to create and save file before I log data into it. The method below is creating and saving data to file and it is only supported by Chrome browser. How can I create and save blank file and then log data into it and has IE and Chrome support?
ctrl.js:
function download(text, name, type) {
var a = document.getElementById("a");
var file = new Blob([text], {type: type});
a.href = URL.createObjectURL(file);
a.download = name;
}
$scope.recordLogs = function(){
download('file text', 'myfilename.txt', 'text/plain')
}
Save to filesystem
Have a look at angular-file-saver
Or use the following code as a reference in saving a BLOB. Where the blob object is generated from a JSON Object. But extration to a TEXT file is also possible.
// export page definition to json file
$scope.exportToFile = function(){
var filename = 'filename'
var blob = new Blob([angular.toJson(object, true)], {type: 'text/plain'});
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, filename);
} else{
var e = document.createEvent('MouseEvents'),
a = document.createElement('a');
a.download = filename;
a.href = window.URL.createObjectURL(blob);
a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
e.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(e);
// window.URL.revokeObjectURL(a.href); // clean the url.createObjectURL resource
}
}
Using LocalStorage
Saving to localStorage:
window.localStorage.setItem('key', value);
Getting from localStorage
window.localStorage.getItem('key');
Delete key from localStorage
window.localStorage.removeItem('key');
Or using the AngularJS module 'ngStorage'
Browser compatibility
Chrome - 4
Firefox (Gecko) - 3.5
Internet Explorer - 8
Opera - 10.50
Safari (WebKit) - 4
See live example (credits to #cOlz)
https://codepen.io/gMohrin/pen/YZqgQW
$http({
method : 'GET',
url : $scope.BASEURL + 'file-download?fileType='+$scope.selectedFile,
responseType: 'arraybuffer',
headers : {
'Content-Type' : 'application/json'
}
}).success(function(data, status, headers, config) {
// TODO when WS success
var file = new Blob([ data ], {
type : 'application/json'
});
//trick to download store a file having its URL
var fileURL = URL.createObjectURL(file);
var a = document.createElement('a');
a.href = fileURL;
a.target = '_blank';
a.download = $scope.selectedFile+'.json';
document.body.appendChild(a);
a.click();
}).error(function(data, status, headers, config) {
});
In success part need to open local system, by which the user can choose, where to save file. Here I have used <a>. And I am hitting restful service
How to Download Files Locally with AngularJS (with DEMO)
Use an <a> tag with a download attribute:
<a download="{{files[0].name}}" xd-href="data">
<button>Download data</button>
</a>
The xd-href Directive:
app.directive("xdHref", function() {
return function linkFn (scope, elem, attrs) {
scope.$watch(attrs.xdHref, function(newVal) {
newVal && elem.attr("href", newVal);
});
};
});
When downloading, browsers prompt user with a dialog that can be accepted or cancelled. For more information, see MDN HTML Reference - <a> Tag
THE DEMO
angular.module("app",[])
.controller("myVm", function($scope, $http, $window) {
var vm = $scope;
var url = "//httpbin.org/post";
var config = { headers: {"Content-Type": undefined} };
vm.upload = function() {
vm.spin = "Uploading...";
$http.post(url, vm.files[0], config).
then(function(response) {
vm.result = "SUCCESS";
vm.data = response.data.data;
}).catch(function(response) {
vm.result = "ERROR "+response.status;
}).finally(function() {
vm.spin = undefined
});
};
})
.directive("xdHref", function() {
return function linkFn (scope, elem, attrs) {
scope.$watch(attrs.xdHref, function(newVal) {
newVal && elem.attr("href", newVal);
});
};
})
.directive("selectNgFiles", function() {
return {
require: "ngModel",
link: function postLink(scope,elem,attrs,ngModel) {
elem.on("change", function(e) {
var files = elem[0].files;
ngModel.$setViewValue(files);
});
}
};
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="myVm">
<h2>Upload and Download File with AngularJS</h2>
<input type="file" select-ng-files ng-model="files">
<br>
<code>
Name: {{files[0].name}}<br>
Size: {{files[0].size}}<br>
Type: {{files[0].type}}<br>
Date: {{files[0].lastModifiedDate}}<br>
</code>
<button ng-click="upload()" ng-disabled="!files">
Upload
</button>
<span ng-show="spin">{{spin}}</span>
<span ng-show="result">{{result}}</span>
<a download="data_{{files[0].name}}" xd-href="data">
<button ng-disabled="!data">Download data</button>
</a>
</body>
See also ng-model for <input type=“file”/> (with directive DEMO)

How to create Mithril.js SPA with JSON source?

I'm trying to make a SPA (single page app) with Mithril.js.
So far I've found very good tutorial here, and of course on Mithril homepage, but still cannot achieve combination of those two.
Here is modified working example from Dave's guide...
function btn(name, route){
var click = function(){ m.route(route); };
return m( "button", {onclick: click}, name );
}
function Page(content){
this.view = function(){
return [
m("page",
m("span", Menu.menu())
)
, m("div", content)
];
}
}
var Menu = {
menu: function(){
return [
btn("Home", "/home")
, btn("About", "/about")
];
}
};
var page_Home = new Page("The home of the Hobbits. Full of forests and marshes.");
var page_About = new Page(["The blighted home of Sauron. Scenic points of interest include:"]);
m.route(document.body, "/home", {
"/home": page_Home,
"/about": page_About
});
My JSON file:
[
{
"id":1,
"title": "Home",
"url": "/home",
"content":"This is home page"
},{
"id":2,
"title": "About",
"url": "/about",
"content":"This is about page"
},{
"id":3,
"title": "Galery",
"url": "/galery",
"content":"This is gallery page"
}
]
And my effort in combining those two from above:
//model
var PageSource = {
list: function() {
return m.request({method: "GET", url: "pages.json"});
}
};
var pages = PageSource.list();
var App = {
//controller
controller: function() {
return {
menu: pages
, rotate: function() { pages().push(pages().shift()); }
, id: m.route.param(pages.url)
}
},
//view
view: function(ctrl) {
return [
m("header"
, m("h1", "Page Title")
, m("span",
ctrl.menu().map(function(item) {
var click = function(){
console.log (item.url);
m.route(item.url);
};
return [
m("button", {onclick: click}, item.title)
];
})
)
, m("hr")
)
, m("button", {onclick: ctrl.rotate}, "Rotate links" )
, m("p", ctrl.content ) //CONTENT
];
}
};
//initialize
m.route(document.body, "/home", {
"/:id": App
});
And finally, questions are:
- "How can I retrieve data from JSON file and display it in div based on selected button (routing)?"
- "When I use m.route my entire view refreshes, but I only want to reload changed div. How?"
Please help, 'cause so far I really like mithril.js
You're close.
It looks like your router is configured twice, where the latter declaration will overwrite the first. Declare your routes with m.route once, and after the other code has been declared.
When you attempt to reference ctrl.content in your App view, it will be undefined as you haven't defined a content property in the App controller. Add whatever you want to be the content property into the object that the App controller returns.
Thanks to #dcochran I've managed to achieve this:
//model
var PageSource = {
list: function() {
return m.request({method: "GET", url: "pages.json"});
}
};
var pages = PageSource.list();
var id = m.prop()
, url = m.prop()
, title = m.prop()
, content = m.prop();
var App = {
//controller
controller: function() {
return {
menu: pages
, rotate: function() { pages().push(pages().shift()); }
}
},
//view
view: function(ctrl) {
return [
m("header"
, m("h1", "Page title")
, m("span",
ctrl.menu().map(function(item) {
return [ btn(item.title, item.url) ];
function btn(name, route){
var isCurrent = (url === route);
var click = function(){
//m.route(route);
id = item.id;
url = item.url;
content = item.content;
title = item.title;
};
return m(
"button"+(isCurrent ? ".active" : ""),
{onclick: click},
name
);
}
})
)
, m("hr")
)
, m("button", {onclick: ctrl.rotate}, "Rotate links" )
, m(".page", content )
];
}
};
//initialize
m.route.mode = "hash";
m.route(document.body, "/home", {
"/:url": App
})

How do I get the id of a newly created created node from data.args?

I would like to display a fancybox when a user clicks the Create button to have them fill in a form. This is used to capture additional data and associate it with the newly created node in jsTree. I need to get the ID of the newly created node and pass it along as a GET parameter in the fancybox call. So far I just can't seem to figure out how to get the ID.
Here is what I have so far:
$("#demo").jstree({
// List of active plugins
"plugins" : ["themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys", "contextmenu", "unique"],
.bind("create.jstree", function (e, data) {
$.post(
"server.php",
{
"operation" : "create_node",
"id" : data.rslt.parent.attr("id").replace("node_",""),
"position" : data.rslt.position,
"title" : data.rslt.name,
"type" : data.rslt.obj.attr("rel")
},
function (r) {
if(r.status) {
$(data.rslt.obj).attr("id", "node_" + r.id);
}else{
$.jstree.rollback(data.rlbk);
}
}
);
})
$("#demo").bind("before.jstree", function (e, data) {
if(data.func === "create") {
var id = data.args[0].attr("id").replace("node_","");
showFancybox("edit_task.php?action=create&parent_id="+id);
}
})
// Code for the menu buttons
$(function () {
$("#mmenu input").click(function () {
switch(this.id) {
case "add_default":
case "add_folder":
$("#demo").jstree("create", null, "last", { "attr" : { "rel" : this.id.toString().replace("add_", "") } });
break;
case "search":
$("#demo").jstree("search", document.getElementById("search_text").value);
break;
case "text": break;
default:
$("#demo").jstree(this.id);
break;
}
});
});
The code that I have now finds the parent id before the new node is created. I tried waiting a few seconds and then trying to read the newest entry from the database, but this doesn't work very reliably and is slower than needed. How can I get the new node's ID from jsTree once it's been created and added to the database?
This works:
id = data.args[0].attr("id");

Categories