Fine Uploader Basic To S3 - fine-uploader

Does anyone know if Fine Uploader supports it's uploaderType: 'basic' mode in conjunction with an S3 endpoint?
Their documentation is a box of christmas lights and I can't make heads or tails about which options work with which versions of the uploader.
Using this code, and not including the #qq-template they provide, I get the error below:
var uploader = new qq.s3.FineUploader({
uploaderType: 'basic',
element: document.getElementById("fineUploader"),
request: {
endpoint: "mybucket.s3.amazonaws.com",
accessKey: "MY_AWS_PUBLIC_ACCESS_KEY"
},
signature: {
endpoint: "/s3/signtureHandler"
},
uploadSuccess: {
endpoint: "success.html"
}
});
Error: Cannot find template script at ID 'qq-template'!
However, according to their docs (Fine Uploader Getting Started) it seems as though this is the correct way to get rid of the UI and handle that myself. Except it doesn't work.
Thanks for any help.

You are confusing the jQuery plug-in workflow with the no-dependency workflow. Just like the traditional endpoint handler, you simply need to make use of the FineUploaderBasic constructor. As the documentation illustrates, all S3 endpoint handler modules are appropriately namespaced:
var uploader = new qq.s3.FineUploaderBasic({...
Fine Uploader supports a wide variety of workflow, endpoints, and features. It's tough to fit that all into the documentation in a way that is intuitive for 100% of our users. However, for the most part, the current setup has been well received. If you have a specific suggestion for improvement, please open up an issue in the GitHub project's issue tracker. We will soon make it easier for users to edit the documentation as well.

Related

Firefox - ReferenceError: PaymentRequest is not defined

I am trying to implement google pay on a website. The external library for google pay is loaded from pay.google.com. In this google script, they call the browser api PaymentRequest(). This api is built in popular browsers like Safari, Chrome, etc.
I have google pay working, but it does not work on Firefox. When the external script is loaded, it calls PaymentRequest and in the console the following error is shown:
ReferenceError: PaymentRequest is not defined
Link to google pay script
https://pay.google.com/gp/p/js/pay.js
Mozilla Firefox official webpage states that PaymentRequest is supported in secure context.
https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API
I copy and paste only the same code provided from the official source
From my perspective, PaymentRequest is not supported in Firefox and does not work. What am I missing?
Check out the console for both chrome and safari.
Google Pay is working for me on Firefox 78.0.1 on macOS using the following: https://jsfiddle.net/fw5t6caL/
Yes, it does log an error in the console at the following bit of code:
google.payments.api.UseCanMakePaymentResultFromPayjs && (new PaymentRequest([{
supportedMethods: [
'https://google.com/pay'
]
}
], {
total: {
label: 'Estimated Total Price',
amount: {
currency: 'USD',
value: '10'
}
}
})).canMakePayment().then(function (a) {
return ef = a
}).catch (function () {
return ef = !1
});
...but it does work. Are you able to try with the JSFiddle linked above?
Also, as an FYI, we've recently released a React and Web Component to simplify the Google Pay integration process. Consider using it as an alternative as it should make it easier to integrate.
Screenshot of JSFiddle output:
I am having the same Problem since a few days:
Uncaught ReferenceError: PaymentRequest is not defined
https://pay.google.com/gp/p/js/pay.js:272
This happens (I believe) in the Stripe Plugin for WooCommerce. The Error appears in Chrome and Firefox. No Idea at the Moment what I can do to fix it.

Failed Prop Type Error in Fine Uploader

I'm trying to get Fine Uploader React to work but keep running into issues.
I'm getting the following errors:
Here's the URL: http://fineuploader.azurewebsites.net/
Here's what I've done so far:
Downloaded the source on to my computer from https://github.com/FineUploader/react-fine-uploader
I then npm installed react-fine-uploader and fine-uploader as per instructions
I ran webpack to transpile and bundle the code
Added an entry point and index.html
Finally, I simply published the app to a new Azure app/website
Any idea what's causing the issue?
P.S. My goal is to use Fine Uploader to upload files to Azure Blob Storage. At this point, I'm simply trying to get Fine Uploader going. I do realize that I'll have to enter a few pieces of information about my blog storage endpoint, etc. but I don't think this error is related to any of that.
A Gallery (and every higher level component of that library) needs an "uploader" props as explained in the section https://github.com/FineUploader/react-fine-uploader#high-level-components
An uploader is one of the 3 classes avaiable in the fine-uploader-wrappers package https://github.com/FineUploader/fine-uploader-wrappers#wrapper-classes
those are for upload to
Aws s3
Azure
or your enpoint
The uploader class need all the configuration endpoint, credentials, custom configuration, etc... (you can find a comprehensive list here in the api section https://docs.fineuploader.com/branch/master/api/options.html)
An example for s3 direct upload would be something like:
const uploader = new FineUploaderS3({
options: {
request: {
endpoint: "http://fineuploadertest.s3.amazonaws.com",
accessKey: "AKIAIXVR6TANOGNBGANQ"
},
signature: {
endpoint: "/vendor/fineuploader/php-s3-server/endpoint.php"
}
}
})
and use that uploader in a gallery
<Gallery uploader={ uploader } />
There are many usefull option for customization: callbacks, onEventHandler, etc you can find them all in the docs of fineuploader
Edit: if im not mistaken react-transition-group is necessary even if it's not listed anywhere in the docs...

detecting users with hola extension

I want to know if users are using hola better internet to browse my site. Hola! is an extension that uses a peer to peer network so users can appear to be browsing from different countries. I am worried however that some bots are using this plugin as a proxy. From what I read it does not send the X-FORWARDED-FOR header, and does not seem to announce itself on the navigator.plugins - verified with panopticlick. This seems like a huge security issue, as this plugin has 42 million users..
I see people using it to see netflix from other countries, I guess they would love to stop it too.
How do I detect users who are using this plugin?
--EDIT--
Also, see this - luminati.io - what seems to be the worlds largest botnet for hire... i cant see how they wont piss off google like this. But this does look like a great security risk to any site on the web.
Looking at the source code of the plugin there is this:
function hola_ext_present(){
// Only <html> is present at document_start time, use it as a
// storage to communicate presence of extension to web page.
document.documentElement.setAttribute('hola_ext_present', 'true');
}
so basically something like:
document.documentElement.getAttribute('hola_ext_present');
will tell you if it is present or not.
I know this should be done on server side, but what I can think for now is doing it on the client side since hola when successfully loaded it creates an attribute on html tag named hola_ext_inject.
So using jquery :
$(function() {
var hola_inject = $('html').attr('hola_ext_inject');
if (typeof hola_inject !== typeof undefined && hola_inject !== false) {
console.log('plugin exist');
}
});

Plain JS Ajax Upload Progress Event Not Working

I am trying to use object-oriented code to handle an AJAX upload. When I run the code, it sees the file, creates the XMLHttpRequest object, but I cannot seem to get the progress event to fire. The full source of my code can be found here: http://pastebin.com/89QawbS6
Here is a snippet:
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", MyObj.trackProgress, false);
xhr.open("POST", url, true);
...
Then in that same object, different method:
trackProgress: function (event) {
console.log(event);
// stuff that should calculate percent
}
But that console.log(event) never fires.
Please note: I know jQuery is great, and there are a dozen awesome upload plugins that I could just use instead. I am not doing this for a class or homework, I just want to understand the process better myself. So offering a jQuery plugin as an answer is not what I'm looking for. I'm trying to make myself less dependent on jQuery.
This FF bug might be the reason for your issue. It's reported on MacOSX and another similar bug on Linux. I don't know if that matters but I tested on Windows. I still believe that your code is fine.

Detect url the user is viewing in chrome/firefox/safari

How can you detect the url that I am browsing in chrome/safari/firefox via cocoa (desktop app)?
As a side but related note, are there any security restrictions when developing a desktop app that the user will be alerted and asked if they want to allow? e.g. if the app accesses their contact information etc.
Looking for a cocoa based solution, not javascript.
I would do this as an extension, and because you would like to target Chrome, Safari, and Firefox, I'd use a cross-browser extension framework like Crossrider.
So go to crossrider.com, set up an account and create a new extension. Then open the background.js file and paste in code like this:
appAPI.ready(function($) {
appAPI.message.addListener({channel: "notifyPageUrl"}, function(msg) {
//Do something, like send an xhr post somewhere
// notifying you of the pageUrl that the user visited.
// The url is contained within msg.pageUrl
});
var opts = { listen: true};
// Note: When defining the callback function, the first parameter is an object that
// contains the page URL, and the second parameter contains the data passed
// to the context of the callback function.
appAPI.webRequest.onBeforeNavigate.addListener(function(details, opaqueData) {
// Where:
// * details.pageUrl is the URL of the tab requesting the page
// * opaqueData is the data passed to the context of the callback function
if(opaqueData.listen){
appAPI.message.toBackground({
msg: details.pageUrl
}, {channel: "notifyPageUrl"});
}
}, opts ); // opts is the opaque parameter that is passed to the callback function
});
Then install the extension! In the example above, nothing is being done with the detected pageUrl that the user is visiting, but you can do whatever you like here - you could send a message to the user, you could restrict access utilizing the cancel or redirectTo return parameters, you could log it locally utilizing the crossrider appAPI.db API or you could send the notification elsewhere, cross-domain, to wherever you like utilizing an XHR request from the background directly.
Hope that helps!
And to answer the question on security issues desktop-side, just note that desktop applications will have the permissions of the user under which they run. So if you are thinking of providing a desktop app that your users will run locally, say something that will detect urls they access by tapping into the network stream using something like winpcap on windows or libpcap on *nix varieties, then just be aware of that - and also that libpcap and friends would have to have access to a network card that can be placed in promiscuous mode in the first place, by the user in question.
the pcap / installed desktop app solutions are pretty invasive - most folks don't want you listening in on literally everything and may actually violate some security policies depending on where your users work - their network administrators may not appreciate you "sniffing", whether that is the actual purpose or not. Security guys can get real spooky so-to-speak on these kinds of topics.
The extension via Crossrider is probably the easiest and least intrusive way of accomplishing your goal if I understand the goal correctly.
One last note, you can get the current tab urls for all tabs using Crossrider's tabs API:
// retrieves the array of tabs
appAPI.tabs.getAllTabs(function(allTabInfo) {
// Display the array
for (var i=0; i<allTabInfo.length; i++) {
console.log(
'tabId: ' + allTabInfo[i].tabId +
' tabUrl: ' + allTabInfo[i].tabUrl
);
}
});
For the tab API, refer to:
http://docs.crossrider.com/#!/api/appAPI.tabs
For the background navigation API:
http://docs.crossrider.com/#!/api/appAPI.webRequest.onBeforeNavigate
And for the messaging:
http://docs.crossrider.com/#!/api/appAPI.message
And for the appAPI.db stuff:
http://docs.crossrider.com/#!/api/appAPI.db
Have you looked into the Scripting Bridge? You could have an app that launches, say, an Applescript which verifies if any of the well known browser is opened and ask them which documents (URL) they are viewing.
Note: It doesn't necessarily need to be an applescript; you can access the Scripting Bridge through cocoa.
It would, however, require the browser to support it. I know Safari supports it but ignore if the others do.
Just as a quick note:
There are ways to do it via AppleScript, and you can easily wrap this code into NSAppleScript calls.
Here's gist with AppleScript commands for Safari and Chrome. Firefox seems to not support AE.
Well obviously this is what I had come across on google.
chrome.tabs.
getSelected
(null,
function
(tab) {
alert
(tab.url);
}) ;
in pure javascript we can use
alert(document.URL);
alert(window.location.href)
function to get current url

Resources