Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I need to look at a file(json) from my html page. This file is on my onedrive and I published it to everybody who have the link. So ss there a way to look at a file from onedrive in my html site? If yes how?
Following the steps on https://msdn.microsoft.com/en-us/library/hh550848.aspx will allow you to accomplish this task.
On the HTML portion of your code, add the and to call the wl.upload function. Below is my code that will allow the use to select the file and upload it to a default folder on OneDrive. In this case, I used "me/skydrive/my_documents"
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Code Sample</title>
<script type="text/javascript" src="//js.live.net/v5.0/wl.js"></script>
</head>
<body>
<div style="padding: 1em">
<div id="signin"></div>
<label id="info"></label>
<form>
<input id="file" name="file" type="file" />
</form>
<button onclick="uploadFile()">Save file directly (calling WL.upload)</button>
<script>
WL.init({
client_id: 'Your_Client_ID',
redirect_uri: 'Your_Redirect_URL',
scope: "wl.signin",
response_type: "token"
});
WL.ui({
name: "signin",
element: "signin"
});
function uploadFile() {
WL.login({
scope: "wl.skydrive_update"
}).then(
function (response) {
WL.upload({
path: "me/skydrive/my_documents",
element: "file",
overwrite: "rename"
}).then(
function (response) {
document.getElementById("info").innerText =
"File uploaded.";
},
function (responseFailed) {
document.getElementById("info").innerText =
"Error uploading file: " + responseFailed.error.message;
}
);
},
function (responseFailed) {
document.getElementById("info").innerText =
"Error signing in: " + responseFailed.error.message;
}
);
}
</script>
</div>
</body>
</html>
The path "response.data.folders[0].id" is used to select the folder that the user has selected from the OneDrive file picker when WL.fileDialog is called. If you are uploading to a default folder, you would want to omit the file picker and use the JavaScript API.
Reference: https://support.microsoft.com/en-us/office/upload-files-and-folders-in-onedrive-work-or-school-5bd927ad-d186-495c-93e8-7ca116fe7b83
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 days ago.
Improve this question
I want to upload many files (.png , .pdf , etc) by using one input.
<input type="file" name="files[]" multiple />
This example captures the input result from an input tag that already contains multiple files
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
</head>
<body>
<input type="file" id="fileInput" multiple />
<script>
$(document).ready(function() {
$("#fileInput").change(function() {
var files = this.files;
for (var i = 0; i < files.length; i++) {
console.log("File " + (i+1) + ": " + files[i].name);
}
});
});
</script>
</body>
</html>
This question already has answers here:
jQuery UI Autocomplete use startsWith
(6 answers)
Closed 2 years ago.
Context
I'm using autocomplete function to search through 360 or more client email address.
I want it to only suggest addresses that begin with the letters typed in by the user.
For example, if the user types "thomas" the function should return suggestions that begin with "thomas" were as at the moment it shows matches which have the word Thomas anywere in their name.
Question
How can I modify either jquery to make sure that items that begin with whats being typed in are returned?
<div class="ui-widget"> </div>
</fieldset>
</form>
<p> </p>
<meta charset="utf-8" />
<meta content="width=200, initial-scale=1" name="viewport" />
<title></title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script>
$( function() {
var availableTags = [
"testemail#yahoo.co.uk, ",
"helloemail#gmail.co.uk, ",
];
$( "#tags" ).autocomplete({
source: availableTags
});
$( "#tags" ).autocomplete("option", "position",
{ my : "right-1 top+35", at: "right top" })
$( "#tags" ).autocomplete({
minLength:4,
source: availableTags
});
} );
</script>
<p><label for="tags">Emails: </label>
<input id="tags" maxlength="120" size="80" type="text" /></p>
<style>
input[type='text'] { font-size: 24px; }
</style>
<div class="ui-widget"> </div>
You can define your own filtering within the Source option.
The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete, including JSONP. The callback gets two arguments:
A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.
See more: https://api.jqueryui.com/autocomplete/#option-source
With your example, this could be something like the following.
$(function() {
var myData = [
"smith#matrix.net",
"testemail#yahoo.co.uk",
"helloemail#gmail.co.uk",
"homer#simpsons.tv"
];
$("#tags").autocomplete({
minLength: 4,
source: function(req, resp) {
var results = [];
$.each(myData, function(i, el) {
if (el.indexOf(req.term) == 0) {
results.push(el);
}
});
resp(results);
},
position: {
my: "right-1 top+35",
at: "right top"
}
});
});
input[type='text'] {
font-size: 24px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
<label for="tags">Emails:</label>
<input id="tags" maxlength="120" size="80" type="text" />
</p>
This uses the .indexOf() to identify the position. So if you want to see if the Term is at the beginning, the position would be 0.
You may want to adjust your minLength incase there is an email like jt#universal.com
Values are not getting updated in the Firebase Realtime Database. I am new to web development but I knew a little html. Can you please check what the problem here.
I left Firebase Config blank intentionally for this question.
I tried using most of the code given in Firebase documentation.
<!DOCTYPE html>
<html>
<head>
<title>"Web App"</title>
</head>
<body>
<div class="mainDiv" align="left">
<h1 align="left">"Firebase web page"</h1>
<textarea id="Command" placeholder="ON/OFF" stClyle="text align:left; overflow:auto; border:6px outset #000000;"></textarea>
<button id="Submit" onclick="submitclick()">Click Me!</button>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "___________________________",
authDomain: "_________.firebaseapp.com",
databaseURL: "https://___________.firebaseio.com",
projectId: "________",
storageBucket: "_________.appspot.com",
messagingSenderId: "________",
appId: "_____________"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var mainTxt= document.getElementById("Command");
var submitbtn = document.getElementById("Submit");
function submitclick()
{
var com = mainTxt.value;
firebase.database().ref().child("username").set(com);
}
</script>
</body>
</html>
Have a look at the documentation on how to add Firebase to your Web/JavaScript project: https://firebase.google.com/docs/web/setup
By doing
<script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-app.js"></script>
you are adding the Firebase core library, but this is not sufficient. You have to add the library(ies) for the service(s) you are going to use, in your case the Realtime Database.
Therefore you need to do
<script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-database.js"></script>
Note the following line
<!-- TODO: Add SDKs for Firebase products that you want to use
in your own code: it indicates exactly what is described above.
First of all to use firebase you have to include
<script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-firestore.js"></script>
Still it won't work because this is not how you write to firebase. You write as key value pairs. Try
firebase.database().collection("userNames").add({name : "user_name"});
or if you trying to update a document
firebase.database().ref().child("userName").set({name : "user_name"});
Here is the official documentation : Add and Manage Data
As on the topic calling .set() or .add() may not always write data you have to check by using then() and catch().
So a complete example of updating a document value in firebase will be :
// Add a new document in collection "cities"
db.collection("users").doc("userName").set({
name: "USER_NAME"
})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
I want to make a spreadsheet CMS - that is to read/write data from firebase and vice versa. I reached a point where I need to upload files directly from the spreadsheet and not any other page.
I have added a custom menu with a htmlService to output a template where the user may click and upload a file and that file must get handled in google script, but the problem is that I'm getting only the fake path of a file "c:/fakepath/avatar.png" and not a blob.
my files in google script:
upload.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<div>
<div id="progress" ></div>
<input type="file" name="upload" id="file">
<input type="submit" value="Submit" class="action" onclick="form_data()" >
<input type="button" value="Close" onclick="google.script.host.close()" />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
function form_data(){
var values = [{
"file":$("#upload").val(),
}];
google.script.run.withSuccessHandler(closeIt).upload(values);
};
function closeIt(){
google.script.host.close()
};
</script>
</body>
</html>
test.gs
function upload(values){
//Display the values submitted from the dialog box in the Logger.
Logger.log(values); // here I'm getting file = c/fakepath/avatar.png while I
//need the file to send it as a post request or save it in google drive
};
I believe I should use FileReader but I have tried and failed:
var file,
reader = new FileReader();
// Upload the file to Google Drive
reader.onloadend = function(e) {
google.script.run
.upload(
e.target.result, file.name
);
};
function form_data(){
reader.readAsDataURL(file);
}
You want to upload a file using a dialog box on Google Docs to Google Drive.
If my understanding is correct, how about this modification? Please think of this as just one of several answers.
Modified script:
Google Apps Script:
function upload(obj) {
var file = DriveApp.createFile(obj.upload);
return {
fileId: file.getId(),
mimeType: file.getMimeType(),
fileName: file.getName(),
};
}
HTML:
Please replace <body>...</body> as follows. In this modification, jquery is not used.
<body>
<form> <!-- Modified -->
<div id="progress" ></div>
<input type="file" name="upload" id="file">
<input type="button" value="Submit" class="action" onclick="form_data(this.parentNode)" >
<input type="button" value="Close" onclick="google.script.host.close()" />
</form>
<script>
function form_data(obj){ // Modified
google.script.run.withSuccessHandler(closeIt).upload(obj);
};
function closeIt(e){ // Modified
console.log(e);
google.script.host.close();
};
</script>
</body>
Note:
When you uploaded a file, the file ID, mimeType and filename of the created file are returned. You can see them on the console.
In this method, because blob is used, the maximum file size is 50 MB. Please be careful this.
If I misunderstood your question and this was not the result you want, I apologize.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I Need to get source code of current tab when the chrome extension icon is clicked . i have also tried with button click event. Please go through my current code :
manifest.json
{ "name": "UM Chrome Extension!", "version": "1.0",
"description": "To ensure the tracking codes present.",
"icons": {
"128": "TW-Extension-Icon2.png"
}, "background": {
"scripts": [ "background.js"]
},
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["popup1.js","jquery-1.10.2.js","jquery-ui.js","bootstrap.min.js"]
}
],
"permissions": [
"activeTab","tabs","contextMenus", "http://*/*"
],
"browser_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
popup.html
<!doctype html>
<html class="no-js" lang="">
<head>
<script type="text/javascript" src="popup1.js"></script>
</head>
<body style="width: 600px; height: 300px;">
<button value="Test" id="check-1"> </button>
</body>
</html>
and popup.js
window.addEventListener('DOMContentLoaded', function() {
var fbshare = document.querySelector('#check-1');
fbshare.addEventListener('click', function() {
var htmlCode = document.documentElement.outerHTML;
window.alert(htmlCode);
});
});
How to get active tab's source code ? i need to get source code of the page so that i need to search whether the page contains particular tracking code(like GA code).
Thank You
Your manifest has both "content_scripts" (which run in the context of the page on document_idle) and "browser_action" scripts (which run in an isolated context when the extensions menu button is clicked).
In popup.html you reference popup.js, so in popup.js when you call document.documentElement.outerHTML you're getting the content of popup.html, not the active tab.
You reference both popup.js and popup1.js, which is confusing. You're currently running the same code in both the popup and the page context, which is almost guaranteed to break in one or the other. By convention use content.js in "content_scripts" and reference popup.js in the action popup.html.
"content_scripts" run in every page, whether users click on the extension or not. Your current manifest is adding ["popup1.js","jquery-1.10.2.js","jquery-ui.js","bootstrap.min.js"] to every page, which is needlessly slow.
Avoid using jQuery in Chrome extensions. It's fairly large and a browser standardisation library doesn't add much when you know for absolute certain that all your users are on Chrome. If you can't code without it then try to restrict it to just your popup or load it in dynamically.
You set a "scripts": [ "background.js"], which runs constantly in the background and isn't needed at all in your current code. If you need to do things outside of the action button consider using event pages instead.
Use the Chrome API to get from the context of the popup to the page. You need to query chrome.tabs to get the active tab, and then call chrome.tabs.executeScript to execute script in the context of that tab.
Google's API uses callbacks, but in this example I'm going to use chrome-extension-async to allow use of promises (there are other libraries that do this too).
In popup.html (assuming you use bower install chrome-extension-async):
<!doctype html>
<html>
<head>
<script type="text/javascript" src="bower_components/chrome-extension-async/chrome-extension-async.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body style="width: 600px; height: 300px;">
<button value="Test" id="check-1"> </button>
</body>
</html>
In popup.js (discard popup1.js):
function scrapeThePage() {
// Keep this function isolated - it can only call methods you set up in content scripts
var htmlCode = document.documentElement.outerHTML;
return htmlCode;
}
document.addEventListener('DOMContentLoaded', () => {
// Hook up #check-1 button in popup.html
const fbshare = document.querySelector('#check-1');
fbshare.addEventListener('click', async () => {
// Get the active tab
const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
const tab = tabs[0];
// We have to convert the function to a string
const scriptToExec = `(${scrapeThePage})()`;
// Run the script in the context of the tab
const scraped = await chrome.tabs.executeScript(tab.id, { code: scriptToExec });
// Result will be an array of values from the execution
// For testing this will be the same as the console output if you ran scriptToExec in the console
alert(scraped[0]);
});
});
If you do it this way you don't need any "content_scripts" in manifest.json. You don't need jQuery or jQuery UI or Bootstrap either.