All I am trying to do at this point is get the quick example working as shown here - https://cloudinary.com/documentation/upload_widget
This is my code -
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
</head>
<body>
<button id="upload_widget" class="cloudinary-button">Upload files</button>
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
<script type="text/javascript">
var myWidget = cloudinary.createUploadWidget({
cloudName: 'cloudname',
uploadPreset: 'uploadPreset'}, (error, result) => {
if (!error && result && result.event === "success") {
console.log('Done! Here is the image info: ', result.info);
}
}
)
document.getElementById("upload_widget").addEventListener("click", function(){
myWidget.open();
}, false);
</script>
</body>
</html>
When I click on the "Upload files" button the grey box of the upload widget does appear but all I see inside is a loading icon.
your code is working perfectly fine for me locally and on Codepen without making a single change to the code. I even uploading two pictures using it, which you should check if they appeared in your Cloudinary account. Don't worry, they are clean.
Since I can't check if the images were uploaded to your account, I created a Cloudinary account of my own and verified that the widget is indeed working fine. I only checked it by changing to my cloudName and preset.
Here's the Codepen Link
Your code below since Codepen Links need to have code accompany them.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
</head>
<body>
<button id="upload_widget" class="cloudinary-button">Upload files</button>
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
<script type="text/javascript">
var myWidget = cloudinary.createUploadWidget({
cloudName: 'dw62s0tlm',
uploadPreset: 'rossm67'}, (error, result) => {
if (!error && result && result.event === "success") {
console.log('Done! Here is the image info: ', result.info);
}
}
)
document.getElementById("upload_widget").addEventListener("click", function(){
myWidget.open();
}, false);
</script>
</body>
</html>
This is from their support (which worked) -
The most common reason why that would happen is if the HTML file that contains the code for the widget is opened in the browser directly, via the file:// protocol. In order for this to work, the file should be opened from within your localhost through a web server via HTTP.
For example, if your system has Python installed you can quickly run a simple HTTP server in the same directory as your file which would make it accessible.
For example in Python 3:
python3 -m http.server
Python 2.7:
python -m SimpleHTTPServer
Then navigating to http://localhost:8000/index.html would run the code and should allow you to launch the widget.
Related
I'm new in Javascript world, currently I'm trying to implement a GUI using electron js framework.
Trying to reproduce the code from a tutorial, I got stuck on a code which seems not to work on my PC, basically even if I click on a button, the console is not logging anything (when it should have!!); the aim of the code is to refer to a button defined in an index.html file from a index.js containing the script and log a sentence when the button is clicked, but it seems like the script in the html file cannot access the .js file at all. Here I'm reporting the code from index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my-app</title>
<link rel = "stylesheet" href="styles.css">
</head>
<body>
<button id = "button1" > START </button>
<script>
require('./index.js');
</script>
</body>
</html>
Here the code belonging to index.js file:
const electron = require("electron");
const button1 = document.getElementById("button1");
button1.addEventListener("click", startApp);
function startApp(){
console.log("Button clicked!");
};
Note:
I've tried to debug this code based on my very little knowledge of Javascript and electron:
I used document.getElementById("button1"); in index.html and it does work (the variable obtained was used to change button text color), but the same is not working when reported in the index.js file;
I tried console.log("In index.js"); in index.js but still it is not working!
From these results I thought the problem may be the .html and .js file communication; they are in the same folder. One more thing: I downloaded the tutorial code from GitHub and the problem is still present with the same actions at points 1 and 2.
Edit: I've omitted that I'm linking index.html window and displaying it in the main.js file, in fact the windows does show up, but the the click on the button doesn't produce any action.
Seemed to be a problem with the require module not working in .html file.
Solved by replacing it with <script src="index.js"></script>.
It appears that you shoud be using electron to load the index.html via BrowserWindowonce it is ready. app and BrowserWindow are from the electron module.
`const { app, BrowserWindow } = require('electron')`
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
From the quick start
In Electron, browser windows can only be created after the app module's ready event is fired. You can wait for this event by using the app.whenReady() API. Call createWindow() after whenReady() resolves its Promise.
For futher info see https://www.electronjs.org/docs/tutorial/quick-start
Hope this proves useful.
I want to build a web extension that uses some AWS services and I don't want to upload API keys to git, however, I don't seem to be able to pass my API keys in the usual way. For example:
If I run the command IDENTITY_POOL_ID=<id_pool_id> web-ext run I usually expect the variable to be available in process.env.IDENTITY_POOL_ID, however, process.env is empty.
I've also tried adding a .env file to the root of the directory with the web extension.
Because the extension is running "client side" process.env is not available. The extension running in a browser doesn't have access to environment variables. Instead in this case you want the extension to use browser.storage and have the user (you maybe) set the value on install of the extension in the options page.
e.g. here is an options.js file;
function saveOptions(e) {
var api_key = document.querySelector("#api_key").value
browser.storage.local.set({"api_key": api_key}).then(restoreOptions)
e.preventDefault();
}
function restoreOptions() {
browser.storage.local.get("api_key").then(function(data) {
if (typeof data['api_key'] != 'undefined') {
var api_key = data['api_key']
document.querySelector("#api_key").value = api_key
}
})
}
document.addEventListener('DOMContentLoaded', restoreOptions)
document.querySelector("form").addEventListener("submit", saveOptions)
And here is the corresponding options.html;
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Options</titlE>
<meta charset="utf-8">
</head>
<body>
<form>
<label for="api_key">API Key:</label>
<input type="text" id="api_key">
<button type="submit">Save</button>
</form>
<script src="options.js"></script>
</body>
</html>
I am using a webview to display a certain html file, However, when I call InvokeScriptAsync, I keep encountering the error.
"Unknown name. (Exception from HRESULT: 0x80020006 (DISP_E_UNKNOWNNAME))". This occurs eventhough the script is called in NavigationComplete or DOMContentLoaded.
I prepared a simple app to debug this problem and I noticed that when the script is in a separate .js file, the error occurs. But if it is placed in the html file, the error would not occur.
I am hoping to have the script in a separate file since I have a quite a lot of functions to implement and I would be using some third party scripts so it would not be maintainable having all the scripts on the html file.
BTW, I did try the same code in a non-universal app and just used Windows 8.1 store app and it would work correctly even with the script stored in a separate file. That is why there must be some setting I am missing to make this work in a universal app.
This is my MainPage code:
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
MapWebView.NavigationCompleted +=MapWebView_NavigationCompleted;
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
Uri url = new Uri("ms-appx-web:///Common/Web/SamplePage.html");
MapWebView.Navigate(url);
}
private async void MapWebView_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
try
{
await MapWebView.InvokeScriptAsync("SayHello", new string[] { "Hello! This is a test parameter" });
}
catch(Exception e)
{
string error = e.Message;
}
}
}
NOT WORKING (script is in a separate file which is sample.js):
html file:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" src="sample.js"></script>
<p>Parameter From Script File:</p> <div id="paramDiv"></div>
</body>
</html>
sample.js file:
function SayHello(parameter)
{
document.getElementById('paramDiv').innerHTML = parameter;
}
WORKING (script is in the html file):
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
function SayHello(parameter) {
document.getElementById('paramDiv').innerHTML = parameter;
}
</script>
<p>Parameter From Script File:</p> <div id="paramDiv"></div>
</body>
</html>
Here is the setup of my project:
I have my project setup as a universal app. In the shared code part of the universal app, I have the following files
Common (folder)
Web
SamplePage.html
sample.js
I found the solution to this problem after wasting my whole day on it.
It is caused by incorrect tagging of javascript files in *.Shared.projitem.
The javascript files are tagged as NONE in the ItemGroup which seems to cause it not being found. To make it visible to the project, change it to Content.
<ItemGroup>
<None Include="$(MSBuildThisFileDirectory)Common\Web\sample.js" />
</ItemGroup>
Kindly refer to this link where I also posted the solution.
https://social.msdn.microsoft.com/Forums/windowsapps/en-US/b29feddb-ae39-4580-9114-43839aabbcf2/webviewinvokescriptasync-not-working-in-universal-app?forum=winappswithcsharp
I create my app using OpenUI5 and I want try to integrate OPA5 to test it.
I write my test page: TestOPA.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Opa sample for matchers</title>
<script id="sap-ui-bootstrap" src="https://openui5.netweaver.ondemand.com/resources/sap-ui-core.js"></script>
<link rel="stylesheet" href="https://openui5.netweaver.ondemand.com/resources/sap/ui/thirdparty/qunit.css" type="text/css" media="screen" />
<script>
(function () {
jQuery.sap.require("sap.ui.thirdparty.qunit");
jQuery.sap.require("sap.ui.test.Opa5");
jQuery.sap.require("sap.ui.test.opaQunit");
var Opa = sap.ui.test.Opa;
var Opa5 = sap.ui.test.Opa5;
module("Matchers");
opaTest("Should find a Button with a matching property", function(Given, When, Then) {
// Act
Given.iStartMyAppInAFrame("../index.html");
/* When.waitFor({
viewName : "view.Main",
controlType : "sap.m.Button",
matchers : new sap.ui.test.matchers.PropertyStrictEquals({name : "text", value : "Changed text"}),
success : function (aButtons) {
ok(true, "Found the button: " + aButtons[0]);
},
errorMessage : "Did not find the button with the property Text equal to Changed text"
});
Then.iTeardownMyAppFrame(); */
});
})();
</script>
</head>
<body>
<h1 id="qunit-header">Opa sample for matchers</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture"></div>
</body>
</html>
index.html is the root of my app. Inside the flow (not at start) I load resources that are not loaded properly.
I want load the resource http://localhost:8080/ZWebapp2/apps/appChangePwd/changePwd.js
but the console of browser show me a error to load the resource at http://localhost:8080/ZWebapp2/index.htmlapps/appChangePwd/changePwd.js
On all browsers it work fine (open http://localhost:8080/ZWebapp2/apps/appChangePwd/changePwd.js) but I have the problem when I start TestOPA.html
I have the same problem if I launch the my app (index.html) on internal Eclipse browser by Run as --> Web App Preview
Maybe you are referencing your files with a relative path, but you want an absolute one. Here is an example of how to do this with the jQuery.sap.require function of UI5:
JSBIN exmaple
The require statement in the bin should always create the correct request.
In your case it seems like you want declare an absolute path which means it will start building an URL after you host (localhost:8080). An relative path starts where your index.html is located.
This is my first post on Stackoverflow. Please guide if I miss something.
I'm trying to do HTML5 development with external javascript file and testing the same on XAMPP 3.2.1 server.
I have stored "HF_Chapter10_WebWorkers_Example1" in "C:\xampp\htdocs" of XAMPP installation and the Javascript file "manager.js" is also residing in the same folder. The 'manager.js' internally creates a worker thread and invokes the same.
Issue: When I'm opening the HTML file in Google Chrome, I see 404 (in Dev chrome tools) stating the server can't find the external Javascript file referenced. Also, I see that the server is load the javascript file as 'text/HTML' instead of 'text/javascript'. I have tried appending type='text/javascript' in the call to the javascript but that didn't help either.
I'm trying to understand the reason of this issue.
This is what goes into the HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Wed, 08 Jan 2014 05:07:11 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>HF_Chapter10_WebWork_Example1</title>
<LINK REL="stylesheet" HREF="theme.css" TYPE="text/css">
<script type="text/javascript" src="manager.js"> </script>
</head>
<body>
<p id="output"> ![enter image description here][1]</p>
</body>
</html>
This is what goes into the javascript file 'manager.js'
window.onload = function() {
//create the worker thread
var worker = new Worker("worker.js");
//send the message to the worker thread
worker.postMessage("ping");
//create an event listener to act on the messages arriving from the worker thread
worker.onmessage = function(event) {
var message = "Worker says" + event.data;
document.getElementById("p").innerhHTML = message;
}
}
This is what goes into the worker.js file:
onmessage = pingPong;
function pingPong(event) {
//based on the type of data, respond back with the 'postMessage'.
//Note that the message will go to the main javascript handler
if (event.data == "ping") {
postMessage("pong");
}
}
not clear what generates the 404 but this might help you
http://w3-video.com/Web_Tools/XAMPP/xampp_example_htdocs.html
I am attaching the image of the folder structure.