I am trying to upload my CSV of data to Firebase but its been throwing a strange error. I'm not as familiar with JavaScript as I would like so that might be part of the problem.
This is the data I want to upload:
704,STANDARD,PARC PARQUE,PR,NOT ACCEPTABLE,17.96,-66.22,"Parc Parque, PR"
704,STANDARD,SECT LANAUSSE,PR,NOT ACCEPTABLE,17.96,-66.22,"Sect Lanausse, PR"
704,STANDARD,URB EUGENE RICE,PR,NOT ACCEPTABLE,17.96,-66.22,"Urb Eugene Rice, PR"
704,STANDARD,URB GONZALEZ,PR,NOT ACCEPTABLE,17.96,-66.22,"Urb Gonzalez, PR"
I didn't use anything fancy to try to upload the document, this seemed like the quickest way to get everything uploaded in the style I want:
<!DOCTYPE html>
<head>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script type="text/javascript">
$(function () {
var myFirebaseRef = new Firebase("https://<firebasetag>.firebaseio.com/coordinates");
var onComplete = function(error) {
if (error) {
console.log('Synchronization failed: ' + error);
} else {
console.log('Synchronization succeeded');
}
};
$("#upload").bind("click", function () {
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
if (regex.test($("#fileUpload").val().toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var rows = e.target.result.split("\n");
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split(",");
myFirebaseRef.set({
[cells[0]]: {
zipcodetype: cells[1],
city: cells[2],
state: cells[3],
locationtype: cells[4],
latitude: cells[5],
longitude: cells[6],
locationttext: cells[7]
}
}, onComplete);
}
}
reader.readAsText($("#fileUpload")[0].files[0]);
} else {
alert("This browser does not support HTML5.");
}
} else {
alert("Please upload a valid CSV file.");
}
});
});
</script>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" />
</div>
</body>
<html>
This is all that shows up in the database:
What it does is upload only one row but "Synchronization succeeded" is always printed in my console.
I want it to upload each row since my original data is about 90,000 lines long. Help?
For anyone looking for the answer in code, this is the working model.
<!DOCTYPE html>
<head>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script type="text/javascript">
$(function () {
var myFirebaseRef = new Firebase("https://<firebaseid>.firebaseio.com/coordinates");
$("#upload").bind("click", function () {
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
if (regex.test($("#fileUpload").val().toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var rows = e.target.result.split("\n");
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split(",");
myFirebaseRef.push({
[cells[0]]: {
zipcodetype: cells[1],
city: cells[2],
state: cells[3],
locationtype: cells[4],
latitude: cells[5],
longitude: cells[6],
locationttext: cells[7]
}
});
}
}
reader.readAsText($("#fileUpload")[0].files[0]);
} else {
alert("This browser does not support HTML5.");
}
} else {
alert("Please upload a valid CSV file.");
}
});
});
</script>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" />
</div>
</body>
<html>
Related
I'm trying to make a multiple upload in parse.com with javascript code.
I have managed to upload one image into a class but now i want multiple images to be uploaded in different rows.
I have tried this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://www.parsecdn.com/js/parse-latest.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script type="text/javascript">
$(document).ready(function() {
Parse.initialize("APPID", "JSKEY");
function saveJobApp(objParseFile) {
var jobApplication = new Parse.Object("imagemagazia");
jobApplication.set("imagename", objParseFile);
jobApplication.save(null, {
success: function(gameScore) {
alert("succesfull save image");
},
error: function(gameScore, error) {
alert('Failed to create new object, with error code: ' + error.description);
}
});
}
$('#submitId').on("click", function(e) {
PhotoUpload();
});
function PhotoUpload() {
var test = [];
console.log("edw");
var fileUploadControl = $("#profilePhotoFileUpload")[0];
for (i=0; i<3; i++){
var file = fileUploadControl.files[i];
//test.push(file);
var name = file.name; //This does *NOT* need to be a unique name
console.log(name +" : "+file);
//}
console.log(test);
//var t = [];
//for(j=0; j<test.length; j++){
var parseFile = new Parse.File(name, file);
//t.push(parseFile);
//var nw = t[i];
parseFile.save().then(
function() {
saveJobApp(parseFile);
},
function(error) {
alert("error");
}
);
}
}
});
</script>
</head>
<body>
<form id="business_form" method="post">
<table>
<tr>
<td>Image</td>
<td><input type="file" id="profilePhotoFileUpload" multiple></td>
</tr>
<tr>
<td><input type="button" id="submitId" value="submit"></td>
</tr>
</table>
</form>
</body>
</html>
UPDATE. with the above code i am trying to upload 3 images.
"1.jpg" "2.jpg" "3.jpg"
but it uploads only 3.jpg because its the last one.
Any idea?
I noticed it's better to make a loop the function itself externally and not making a loop in the function.
if you try making it like this :
$('#submitId').on("click", function(e) {
var fileUploadControl = $("#profilePhotoFileUpload")[0];
console.log(fileUploadControl.length);
for (i=0; i<3; i++){
var file = fileUploadControl.files[i];
var name = file.name;
PhotoUpload(name, file);
}
});
And then :
function PhotoUpload(objname, objfile) {
console.log(objname);
console.log(objfile);
var parseFile = new Parse.File(objname, objfile);
parseFile.save().then(
function() {
saveJobApp(parseFile);
},
function(error) {
alert("error");
}
);
}
Also if want to add more than tree images, you just add this :
for (i=0; i<fileUploadControl.files.length; i++)
I have created a system where user selects files from their Google drive to be uploaded into Parse.
I have done so separately though, where I have one code that allows user to select an item from Google drive, and one that allows user to upload a file from their computer into parse.
Google drive (Using Google drive picker):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>eSnail Scan Upload Part 2</title>
<script type="text/javascript">
// The Browser API key obtained from the Google Developers Console.
var developerKey = 'KEY';
// The Client ID obtained from the Google Developers Console.
var clientId = 'ID';
// Scope to use to access user's photos.
var scope = ['https://www.googleapis.com/auth/photos'];
var pickerApiLoaded = false;
var oauthToken;
// Use the API Loader script to load google.picker and gapi.auth.
function onApiLoad() {
gapi.load('auth', {'callback': onAuthApiLoad});
gapi.load('picker', {'callback': onPickerApiLoad});
}
function onAuthApiLoad() {
window.gapi.auth.authorize(
{
'client_id': clientId,
'scope': scope,
'immediate': false
},
handleAuthResult);
}
function onPickerApiLoad() {
pickerApiLoaded = true;
createPicker();
}
function handleAuthResult(authResult) {
if (authResult && !authResult.error) {
oauthToken = authResult.access_token;
createPicker();
}
}
// Create and render a Picker object for picking user Photos.
function createPicker() {
if (pickerApiLoaded && oauthToken) {
var picker = new google.picker.PickerBuilder().
enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
addView(google.picker.ViewId.PDFS).
setOAuthToken(oauthToken).
setDeveloperKey(developerKey).
setCallback(pickerCallback).
build();
picker.setVisible(true);
}
}
// A simple callback implementation.
function pickerCallback(data) {
var url = 'nothing';
if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
var doc = data[google.picker.Response.DOCUMENTS][0];
url = doc[google.picker.Document.URL];
}
var message = 'The following(s) were stored in Parse: ' + url;
document.getElementById('result').innerHTML = message;
}
</script>
</head>
<body>
<div id="result"></div>
<div id="demo">
<!-- The Google API Loader script. -->
<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
</body>
</html>
That allows a user to upload a file into Parse (PDF):
<HTML>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.15.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// ***************************************************
// NOTE: Replace the following your own keys
// ***************************************************
Parse.initialize("ID", "ID");
function saveDocumentUpload(objParseFile)
{
var documentUpload = new Parse.Object("Scan");
documentUpload.set("Name", "");
documentUpload.set("DocumentName", objParseFile);
documentUpload.save(null,
{
success: function(uploadResult) {
// Execute any logic that should take place after the object is saved.
},
error: function(uploadResult, error) {
// Execute any logic that should take place if the save fails.
// error is a Parse.Error with an error code and description.
alert('Failed to create new object, with error code: ' + error.description);
}
});
}
$('#myForm').bind("submit", function (e) {
e.preventDefault();
var fileUploadControl = $("#documentFileUpload")[0];
var file = fileUploadControl.files[0];
var name = file.name; //This does *NOT* need to be a unique name
var parseFile = new Parse.File(name, file);
var user_id = $('#user_id').val();
var address = $('#address').val();
parseFile.set('UserId', user_id);
parseFile.set('Address', address);
parseFile.save().then(
function () {
saveDocumentUpload(parseFile);
},
function (error) {
alert("error");
}
);
});
});
</script>
<body><form id='myForm'>
<input type="file" id="documentFileUpload">
<br/>
<input type="text" placeholder="UserID" id="user_id">
<br/>
<input type="text" placeholder="Address" id="address">
<br/>
<input type="submit" value="submit">
</form>
</body>
</HTML>
I have created an application for downloading pdf. the pdf is based on an html table.
The application is working fine in all browser but when i run in IE9 i am getting Error in function : 'ArrayBuffer' is undefined ReferenceError: 'ArrayBuffer' is undefined. Since IE9 is HTML5 based browser jspdf should work i guess.
Working Demo
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.cellInitialize();
pdf.setFontSize(10);
$.each($('#customers tr'), function (i, row) {
if ($(row).text().trim().length !== 0) {
$.each($(row).find("td, th"), function (j, cell) {
var txt = $(cell).text().trim() || " ";
var width = (j == 4) ? 40 : 70;
if (j == 7) {
width = 120;
}
if(i==0)
{
pdf.setFontStyle('bold');
}
else
{
pdf.setFontStyle('normal');
}
pdf.cell(10, 10, width, 18, txt, i);
});
}
});
pdf.save('sample-file.pdf');
}
Can anyone please tell me some solution for this
Use the following code to enable downloadify:
<!doctype>
<html>
<head>
<title>jsPDF</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="../libs/base64.js"></script>
<script type="text/javascript" src="../jspdf.js"></script>
<script type="text/javascript" src="../libs/downloadify/js/swfobject.js"></script>
<script type="text/javascript" src="../libs/downloadify/js/downloadify.min.js"></script>
</head>
<body onload="load()">
<h1>jsPDF Downloadify Example</h1>
<p>This is an example of jsPDF using Downloadify. This works in all major browsers.</p>
<p id="downloadify">
You must have Flash 10 installed to download this file.
</p>
<script type="text/javascript">
function load(){
Downloadify.create('downloadify',{
filename: 'Example.pdf',
data: function(){
var doc = new jsPDF();
doc.text(20, 20, 'PDF Generation using client-side Javascript');
doc.addPage();
doc.text(20, 20, 'Do you like that?');
return doc.output();
},
onComplete: function(){ alert('Your File Has Been Saved!'); },
onCancel: function(){ alert('You have cancelled the saving of this file.'); },
onError: function(){ alert('You must put something in the File Contents or there will be nothing to save!'); },
swf: '../libs/downloadify/media/downloadify.swf',
downloadImage: '../libs/downloadify/images/download.png',
width: 100,
height: 30,
transparent: true,
append: false
});
}
</script>
</body>
</html>
Use the following code to lazy load Downloadify:
<script id="jspdf" src="../jspdf.js"></script>
<script id="lazy">
var jspdfScript = document.getElementByid('jspdf');
var swfobjectScript = document.createElement('script');
var downloadifyScript = document.createElement('script');
swfobjectScript.src = "../libs/downloadify/js/swfobject.js";
downloadifyScript.src = "../libs/downloadify/media/downloadify.swf";
if (window.ActiveXObject)
{
document.documentElement.insertBefore(jspdfScript, swfobjectScript);
swfobjectScript.onload = function () {
document.documentElement.insertBefore(jspdfScript, downloadifyScript);
};
downloadifyScript.onload = function () {
load();
}
</script>
I'm using JStree to display an XML file, and after displaying it the user can create, rename, or delete some nodes, and sor sure these changes appear only on the displayed xml and not reflected on the original file, I want to know how to reflect this changes to the original XML fie back after clicking like a submit button, or at least how to get the data changed.
Update
The code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu-editor</title>
<script type="text/javascript" src="src/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="src/jstree/jquery.cookie.js"></script>
<script type="text/javascript" src="src/jstree/jquery.hotkeys.js"></script>
<script type="text/javascript" src="src/jstree/jquery.jstree.js"></script>
<link href="themes/!style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="src/jstree/!script.js"></script>
<script type="text/javascript" src="src/UIMTreeProcessor.js"></script>
<style type="text/css">
.
.
.
//css stuff
</style>
</head>
<body>
<div id="dummy"></div>
<div id="mylist">
<li id='root'><a href='#'>Root node</a><ul><li><a href='#'>Child node</a></li></ul></li>
</div>
<div id="submit" class="submit_btn">Submit</div>
</body>
<script type="text/javascript" class="source below">
var _url = "cafe.xml";
var _uimTree = null;
$(function () {
getTopContent();
});
getTopContent = function(){
$.ajax({
type: "GET",
url: _url,
dataType:"xml",
cache: false,
beforeSend:function(){
//do something before send
},
success: function(data){
processXML(data);
},
error:function(e){
alert("Error: "+e);
}
});
}
processXML = function(root){
_uimTree = new UIMTreeProcessor(root, $("#mylist"));
_uimTree.doProcess();
}
$('#submit').on('click',function(){
//alert the entire XML after edits via (getXML)
});
</script>
And the UIMtreeprocessor Library code
function UIMTreeProcessor(data, treeEl) {
this.data = data;
this.treeEl = treeEl;
}
UIMTreeProcessor.prototype.initTree = function(data){
this.treeEl.jstree({
"json_data" : {
"data":data,
"progressive_render":"true"
},
"plugins" : ["themes","json_data","ui","crrm","cookies","dnd","search","types","hotkeys","contextmenu"],
"core":{"animation":0}
});
}
UIMTreeProcessor.prototype.doProcess = function(){
//Find root:
var _root = $(this.data).children(':first-child');
var _a_feed = new Array();
this.vsTraverse($(_root), _a_feed);
var _treedata = [{"data":_root[0].nodeName,"children":_a_feed, "state":"open"}];
this.initTree(_treedata);
}
UIMTreeProcessor.prototype.vsTraverse = function(node, arr){
var _ch = $(node).children();
for(var i=0; i<_ch.length; i++){
var _vsArr = new Array();
this.vsTraverse(_ch[i], _vsArr);
var _a_att = this.vsTraverseAtt(_ch[i]);
if(null!=_a_att){
_vsArr.push([{"data":"Attributes "+"["+_ch[i].nodeName+"]","children":_a_att, attr : { "class" : "uim_attr"}}]);
}
if(null!=_ch[i].firstChild && 3==_ch[i].firstChild.nodeType){
arr.push([{"data":_ch[i].nodeName + ": " + _ch[i].firstChild.textContent,"children":_vsArr, "state":"open"}]);
}else{
arr.push([{"data":_ch[i].nodeName,"children":_vsArr, "state":"open"}]);
}
}
}
UIMTreeProcessor.prototype.vsTraverseAtt = function(node){
var _a_atts = null;
if(null!=node.attributes && node.attributes.length > 0){
_a_atts = new Array();
for(var i=0; i<node.attributes.length; i++){
_a_atts.push(node.attributes[i].nodeName + ":" + node.attributes[i].nodeValue);
}
}
return _a_atts;
}
Edit: I was really wrong in my original answer.
There is a get_xml method in the xml_data plugin, which is supposed to do what you describe. I have not tested it myself, but if it's anything like json_data.getJSON, the output will contain all kinds of JStree metadata which you will not want to put back into your XML.
what's wrong here?
OPTIONS https://twitter.com/oauth/request_token 401 (Unauthorized)
jsOAuth-1.3.4.js:483 XMLHttpRequest cannot load
https://twitter.com/oauth/request_token. Origin "http://localhost:8080"
is not allowed by Access-Control-Allow-Origin.Object
<!DOCTYPE html>
<html>
<head>
<!--
A simple example of PIN-based oauth flow with Twitter and jsOAuth.
This is mostly based on/copied from <http://log.coffeesounds.com/oauth-and-pin-based-authorization-in-javascri>.
Get jsOAuth at <https://github.com/bytespider/jsOAuth/downloads>
-->
<meta charset="utf-8">
<title>jsOauth test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jsOAuth-1.3.4.js"></script>
<style type="text/css" media="screen">
</style>
<script>
$(document).ready(function() {
var options = {
consumerKey: 'YOUR_CONSUMER_KEY',
consumerSecret: 'YOUR_CONSUMER_SECRET'
};
var requestParams;
var accessParams;
var oauth = OAuth(options);
oauth.get('https://twitter.com/oauth/request_token',
function(data) {
console.dir(data);
window.open('https://twitter.com/oauth/authorize?'+data.text);
requestParams = data.text
},
function(data) { alert('darn'); console.dir(data) }
);
$('#pinbutton').click(function() {
if ($('#pin').val()) {
oauth.get('https://twitter.com/oauth/access_token?oauth_verifier='+$('#pin').val()+'&'+requestParams,
function(data) {
console.dir(data);
// split the query string as needed
var accessParams = {};
var qvars_tmp = data.text.split('&');
for (var i = 0; i < qvars_tmp.length; i++) {;
var y = qvars_tmp[i].split('=');
accessParams[y[0]] = decodeURIComponent(y[1]);
};
oauth.setAccessToken([accessParams.oauth_token, accessParams.oauth_token_secret]);
getHomeTimeline();
},
function(data) { alert('poop'); console.dir(data); }
);
}
});
function getHomeTimeline() {
oauth.get('https://api.twitter.com/1/statuses/home_timeline.json',
function(data) {
entries = JSON.parse(data.text);
var html = [];
for (var i = 0; i < entries.length; i++) {
html.push(JSON.stringify(entries[i]));
};
$('#timeline').html(html.join('<hr>'));
},
function(data) { alert('lame'); console.dir(data); }
);
}
});
</script>
</head>
<body>
<h1>jsOauth test</h1>
When you get a PIN, enter it here.
<input id="pin" type="text" value=""><button id='pinbutton'>Save</button>
<div id="timeline">
</div>
</body>
</html>
I could give you the answer, but what you're doing is against the Twitter API Terms of Service. OAuthing in JavaScript exposes the secret credentials to anyone who visits the site and that is A Bad Thing. Please do this on your back-end.