Develop Reference

Open local server file using plain javascript

I want to load locally stored data using plain javascript (no jquery for example) and then use it to display it in a table in html. My project structure looks like this:
root
- js
-- main.js
- res
-- data.csv
- index.html
I tried using a XMLHttpRequest, but somehow I get status 0 when trying to load the file and when printing the response text it prints out nothing at all.
The following method is called using window.onload:
var url = "file://../res/data.csv/";
varxmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
console.log(this.responseText);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

I don't think you can access the file system through most browsers.
Even if it worked locally, it wouldn't work as soon as you put your page up on a server. This is because the client will be asking for a file that is local to itself, not the server.
Chrome may have something for you though:
https://www.html5rocks.com/en/tutorials/file/filesystem/

XMLhttprequest not posting (new to it)

I am trying to send data from javascript to a php page using xmlhttprequests.
It is just like sending form data, eventhough I have copied the examples exactly, it doesnt work.
I know the problem lays with the xmlhttprequest since I have tried sending the same data using an html form with POST and that works fine. So the PHP works.
the errors I get using my code are:
POST http://localhost/thissite/post 404 (Not Found)
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
The current file structure I am using equals:
index.php and store.php in the root and than a folder called js with init.js
function sendData() {
var xmlhttp,
url = "http://localhost/thissite/store.php";
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
} else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("post", url, true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send("sitetarget=/thissite/&buttontarget=firstbutton&amount=2");
}
This function is in my init.js file which is linked on my index.php page.
I have tried changing the used URL to:
store.php
/store.php
./store.php
../store.php
http://localhost/store.php
But I think the URL I use should be correct since that is the url I get send to when I post the form. It is also the same as multiple examples I found in questions posted on here and those users didn't have the same errors as me. This is probably me misunderstanding but I am eager to find out what the problem is with my code before I throw my computer out of the window or pull my last hair out.
Thank you for answering if you do!

How to check console.log output in chrome? Need to debug a .js file that uses XMLHttpRequest

Here is my utube.js (copy of a tutorial):
let getXMLFile = function(path, callback) {
let request = new XMLHttpRequest();
request.open("GET", path);
request.onreadystatechange = function() {
if(request.readyState === 4 && request.status === 200)
{
callback(request.responseXML);
}
};
request.send();
};
getXMLFile("https://cors.io/?http://api.irishrail.ie/realtime/realtime.asmx/getStationDataByCodeXML_WithNumMins?StationCode='+Stationcode+'&NumMins=90&format=xml", function(xml) {
console.log(xml);
});
How can I check that this is gets the XML data I need? The content creator states 'you need to place it on a server or local host...' I tried placing the .js itself on my server and this simply opens it in a text format when I access it from my browser. Running the .js directly gives me a compile error (line 2, char 5, ';' expected).
The creator can debug from the chrome console (console displayed error in red, when fixed he could read the actual XML data in the console output). How do I get to this step?:
I suspect I need to place the .js in a html doc, place that on my server and then access it from my browser? Not sure where the console comes into play however.
Thanks for any help. This is my first time seriously using JS or attempting to use the console please try keep it simple!

Send multiple files from front end to POST method

Here is my Code sample: https://jsbin.com/qokiyomivu/edit?html,js,output
How can I send multiple files to my POST method and then attach these with email from the Java method?
Currently if I select multiple files only one is being sent and attached to the email written in the Java method. How to attach all I select ?
FYI, I have declared filesToUpload as MultipartFile like private MultipartFile filesToUpload in my Bean.

That’s a good question that I myself have spend some time to refine to a good solution.
I came out with:
$('#filesToUpload').change(function(e) {
$.each(e.currentTarget.files, function(i, file: File){
var xhr = new XMLHttpRequest();
xhr.onprogress = function (event) {
'do something'
};
xhr.onloadend = function(event){
var status = (<XMLHttpRequest>event.target).status;
if (status != 200) {
console.error(String.format("Server did not return a 200 but: {0}.", status));
}
else
'upload completed';
}
xhr.open('POST', 'urlpath', true);
xhr.send(file);
});
});
Thsi will upload yout files on every change - but my main purpose by showing this code, is to guide you towards XMLHttpRequest.
If you have large files, there are a technology to chunk up your data, but that takes a bit af work to get up running.

Adding Datas via Javascript to existing JSON file on Server

I have following problem. I know that this is discussed quiet often, and i tried a lot of possibilities, but none is working up to now.
I have some datas in my javascript file, which i want to add to a already exsiting .json file on my server. I tried to do it the following way, but whenever i open the .json file after calling ajax_get_json(), no new datas are added.
function ajax_get_json(){
var hr = new XMLHttpRequest();
hr.open('POST', 'myyjson.json', true);
hr.setRequestHeader ("Content-type", "application/x-www-form-urlencoded");
var us = document.getElementById("firstname").value;
var msg= document.getElementById("message").value;
hr.onreadystatechange= function(){
if (hr.readyState == 4 && hr.status == 200){
var obj = JSON.parse(hr.responseText);
obj['participant'].push({"user": us, "message": msg});
var sendingObj =JSON.stringify(obj);
}
}
hr.send (sendingObj);
}
My myjson.json File has following structure:
{ "participant":[
{"user":"Steven", "message":" Hey,i m in!"},
{"user":"Tim", "message":" i wrote sth."},
{"user":"lukas", "message":"example"}
]}
Does anyone have an Idea what the problem yould be or is there a better way doing it?
Thanks in advance!

With javascript on client it's not possible to write JSON on server. If that would be possible, that would be kind of bad from the security perspective. You need to write JSON on server with what ever language you are using there (PHP, Java, javaScript). Then you call that server function from client with AJAX for example. It could go like this:
Javascript on client side request for example url www.yourserver.com/writejson.php?u=steven&m=Hi
On server you catch that request and write to JSON file. username is steven and message is Hi.
By the way, you have misunderstood XMLHttpRequest.send method. You are not sending data to be saved on server. You are firing XMLHttpRequest. Here is walkthrough how your code is executed:
function ajax_get_json(){
var hr = new XMLHttpRequest(); // 1.
hr.open('POST', 'myyjson.json', true); // 2.
hr.setRequestHeader ("Content-type", "application/x-www-form-urlencoded"); // 3.
var us = document.getElementById("firstname").value; // 4.
var msg= document.getElementById("message").value; // 5.
hr.onreadystatechange= function(){ // 6.
if (hr.readyState == 4 && hr.status == 200){ // 8. this is called every time XMLHttpRequest state changes
var obj = JSON.parse(hr.responseText); // 9. this is called when XMLHttpRequest is completed and response is gotten
obj['participant'].push({"user": us, "message": msg}); // 10.
var sendingObj =JSON.stringify(obj); // 11.
}
}
hr.send (sendingObj); // 7. sendingObj is undefined