Filepicker modal only displayed after initial page load in meteor - javascript

When I call filepicker.pickAndStore() for the first time in a template everything works fine. Also closing the modal and clicking the button again works fine (modal is displayed again). When I click on a link inside my meteor app to get to another page (of course via html5 pushstate like on every meteor page, no standard a links with a real page refresh) and then go back to the page with the filepicker stuff in it, the button does not do anything anymore. The filepicker modal or anything is NOT displayed. And i also tried call back function as given in the documentation. I'am describing my code below
Template.content.events({
'click #top_add_file': function (evt) {
evt.preventDefault();
console.log("upload file button is clicked")
Session.set("widgetSet", false);
if (!Session.get("widgetSet")) {
var cb = function () {
filepicker.pickAndStore(
{
mimetypes: ['application/pdf', 'application/msword', 'application/mspowerpoint', 'text/plain'],
container: 'window',
services: ['COMPUTER'],
folders: true
},
{
location: 'S3'
},
function (InkBlob) {
console.log("InkBlob="+InkBlob)
InkBlob.forEach(function (ib) {
Meteor.call("createContent", ib, Meteor.content_file, function (error, result) {
if (error) {
FlashMessages.sendError("Error in saving file")
} else {
FlashMessages.sendSuccess("Successfully Saved File")
}
})
})
},
function (FPError) {
FlashMessages.sendError("Error in uploading file. Please try again")
}
)
};
loadPicker(Meteor.fpkey, cb);
}
},

The answers to this StackOverflow question may help:
Integrating Filepicker.IO with Meteor
One of them highlights an atmosphere package for filepicker:
https://github.com/guido4000/loadpicker
Also, this example shows integrating a 3rd-party modal component into meteor:
https://github.com/alanning/meteor-modal-example

Related

Issue with adobe_dc_view_sdk pdf file preview

I am testing the adobe document cloud view sdk on https://www.thacherandrye.com/dinner , https://www.thacherandrye.com/the-shed , https://www.thacherandrye.com/brunch
Sometimes, the file preview is not working and all I can get on the screen is a large white space(No errors in the console). Whenever I load the page for the first time, in a browser or incognito window, the file appears on the preview but after reloading or moving to another page with a preview, the file seems to disappear.
I checked for the key being wrong/expired but then it should not have loaded the file even for the first time.
Below is the Javascript code I am using for the api:
$(document).ready(function() {
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({ clientId: SOME_KEY, divId: $('#adobeDcViewId{Id}').val() });
adobeDCView.previewFile({
content: { location: { url: $('#hdnUrl{Id}').val() } },
metaData: { fileName: $('#hdnFileName{Id}').val() }
},
{
showDownloadPDF: $('#hdnRestrictDownload{Id}').val() !== 'true',
showPrintPDF: $('#hdnRestrictDownload{Id}').val() !== 'true'
});
});
});
Tech stack: .net framework 4.7.2, jQuery 3.6.0
I tried to help you on our forums, but I don't know if you saw my response. This line worries me:
$('#adobeDcViewId{Id}').val()
The value that needs to be passed to divId needs to be a string, and needs to match the ID of the div element. Also, #adobeDcViewId{Id} doesn't look like a valid CSS selector to me.
Can you try changing this to a hard-coded value of the div on your site?

Chrome Extension: Clear Chrome Local Storage on Page Reload (not on Update)

I'm working on a Chrome Extension that will sort a DOM structure. On the extension popup I'm using a button that will activate / desactivate the sort. In order to save the state of my button I'm saving via Chrome Local Storage the "state" of my button this way:
function save_button_state() {
var buttonStateText = $("#js-toggleSorting").html();
var buttonStateAttribute = $("#js-toggleSorting").attr("data-click-state");
var sortMessage = $(".message").html();
chrome.storage.local.set(
{
buttonStateText: buttonStateText,
buttonStateAttribute: buttonStateAttribute,
sortMessage: sortMessage,
},
function () {
console.log(
`Saved State is: ${buttonStateText} and Saved Attribute is: ${buttonStateAttribute} and Saved Message is: ${sortMessage}`
);
}
);
}
That save the dom node and keep the information in order to save it when the popup is closed. Then, in order to get that info back from the local storage I'm using this function:
function get_button_state() {
chrome.storage.local.get(
["buttonStateText", "buttonStateAttribute", "sortMessage"],
function (data) {
$(".message").html(data.sortMessage);
$("#js-toggleSorting").html(data.buttonStateText);
$("#js-toggleSorting").attr(
"data-click-state",
data.buttonStateAttribute
);
console.log(
`Get State is ${data.buttonStateText} and Get Attribute is ${data.buttonStateAttribute}`
);
}
);
}
And then when the document is ready I'm processing the button onclick event changing the dom from "Sorting" to "Not Sorting" this way:
$(document).ready(() => {
get_button_state();
//Some Code to pass parameters from the extension to a content script
$("#js-toggleSorting").on("click", function () {
$(".message").html("");
if ($(this).attr("data-click-state") == 1) {
$(this).attr("data-click-state", 0);
$(this).html("SORT INCOMING CHATS");
$(".message").append("<p>STATUS: NOT SORTING CHATS</p>");
sortFunction(false);
} else {
$(this).attr("data-click-state", 1);
$(this).html("STOP SORTING INCOMING CHATS");
$(".message").append("<p>STATUS: SORTING CHATS</p>");
sortFunction(true);
}
save_button_state();
});
});
Then in the Chrome Extension background js file I'm trying to clear the local storage when I reload the page (the same page, with the same URL):
chrome.tabs.onUpdated.addListener(function (changeInfo) {
if (changeInfo.url === undefined) {
chrome.storage.local.clear();
}
});
But apparently this will not only clear the local storage when I reload the page but when something change in it causing a lot of buggy behavior on the popup (basically changing very randomly the text of the button when the user interact/click on it everytime they open the popup). My question is which is the right way to clear the local storage just when the page is reloaded / refreshed. I'm sorry if this seems pretty obvious but I'm new on the Chrome Extension development world.

How to print pdf from server after button click in Angular 2+

On my page I have button that should download concrete pdf file from backend and open the printing window. I tried answers here that included some blob stuff. It did not work. Tried to change route and embed the file in the HTML and after files would be downloaded to call window.print() on the page, but page was blank. Tried also printJS, but wasn't able to make it work, since it kept showing printJS is not a part of onclick function or something like that. Any advice would be helpful.
The only solution I came up with was to do it like this:
printPdf(){
this.network.getPdfHash()
.pipe(take(1))
.subscribe((res) => {
//res === url to the location of the PDF
let win = window.open(res, "_blank");
win.focus();
win.addEventListener(
"load",
() => {
setTimeout(() => {
//to give time for the browser to load the pdf
win.window.print();
}, 250);
},
true
);
});
}

Page Navigation On Win Phone 8 App Load

I am developing a Windows 8 application for phones and created a new project using 'Navigation App' template, since I want to use a few pages in my app.
The default start page is home.html, as stated in the default.html:
<body class="phone">
<div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/home/home.html'}"></div>
</body>
I want to check data I am saving in
Windows.Storage.ApplicationData.current.localFolder
BEFORE the app is finish loading.
Depends on the data result, I want to continue to home.html or navigate to a different page.
I idea is to process everything I need in the 'splash' time and then deiced which page to load. I'm just not sure It's possible in Win Phone Development.
I though the best place for that is default.js file in onloaded event, but I have 2 problems:
Trying to navigate from onloaded to a different page doesn't seem to work. The app always get into home.html
Getting data is async so the app keeps loading before I got the data and able to check it.
app.onloaded = function (args) {
var storageFolder = Windows.Storage.ApplicationData.current.localFolder;
storageFolder.getFileAsync('settings.txt').then(
function (file) {
if (file) {
Windows.Storage.FileIO.readTextAsync(file).then(function (contents) {
if (contents.length > 0 && contents != '{}') {
var settingsObj = JSON.parse(contents);
if ('id' in settingsObj && settingsObj.id > 0) {
//Go to Home
WinJS.Navigation.navigate('/pages/home/home.html');
return;
}
}
//Go To Login
WinJS.Navigation.navigate('/pages/login/login.html');
});
}
},
function (e) {
storageFolder.createFileAsync('settings.txt');
}
);
};
You can try putting that code in app.xaml.cs where the default page is normally loaded.
Check the Application data for what you are looking for then use if statements to see if the results satisfy what you want e.g
if(true)
{
Frame.Navigate(typeof(MainPage));
}else
{
Frame.Navigate(typeof(AnotherPage));
}

Phantom wont initialize/loaded angularjs controller methods

i need help creating a pdf file off a html page powered by an angularjs controller. the pdf will be created by using phantom module. im able to display and bind data correctly as soon as i navigate to the specific url, but when i call phantom to render the page it doesnt load/initiliaze/call the controller methods i have tried different methods such as doing ng-init from the div or calling a function from the controller once is done loading or even using
$scope.$on('$viewContentLoaded', function(){
//code here...
})
phantom code:
function DoThePDF(){
phantom.create(function(ph){
ph.createPage(function(page) {
page.set("paperSize", { format: "A4", orientation: 'portrait', margin: '1cm' });
page.open(address, function(status) {
if(status !== 'success'){
console.log('unable to open webpage');
}
else{
setTimeout(function() {
page.render("reports.pdf");
console.log("page rendered");
ph.exit();
}, 5000);
}
})
})
});
}
when calling page.open(address, function(status) {...} i can see that the page is been opened but the angular events/methods dont get initialized/called so when the page gets rendered is an empty html template no data gets binded. i have added delays but still it doesnt help.
PhantomJS 1.9.x doesn't support websocket, therefor i have to use PhantomJS 2. there is not an official release yet since is being developed but there a beta version
Here build as specified. Good luck

Categories