I am new angular 2.
Currently I am working on application which has Padarn server at backend and HTML5 with Angular2 at front end.
I wanted ship one password protected zip file to backend, to achieve this I have written following code but that is not working with IE 11 (works properly when fiddler is running) . Same code is working with Chrome and Firefox browsers.
private makeFileRequest(url: string, params: Array, files: File) {
return new Promise((resolve, reject) => {
var formData: FormData = new FormData();
formData.append("uploads", files, files.name);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
resolve(xhr.response);
} else {
reject(xhr.response);
}
}
}
xhr.open("PUT", url, true, ApplicationObjects.configuration.Username, ApplicationObjects.configuration.Password);
xhr.send(formData);
});
Please help.
Related
Please help me. I have simple NodeMcu webserver that has a /STATUS capability like this:
curl 192.168.0.200:8080/STATUS
response> Doors are open.
I am trying to read this via HTML request like this:
<script>
function readBody(xhr) {
var data;
if (!xhr.responseType || xhr.responseType === "text") {
data = xhr.responseText;
} else if (xhr.responseType === "document") {
data = xhr.responseXML;
} else {
data = xhr.response;
}
return data;
}
document.getElementById("STATUS").onclick = function () {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
console.log(readBody(xhr));
}
}
xhr.open('GET', 'http://192.168.0.200:8080/STATUS', true);
xhr.send(null);
alert(data);
</script>
What am I doing wrong? I have still answer in console>
net::ERR_INVALID_HTTP_RESPONSE
Thank you very much!!
After my locally installed browsers (Edge Chromium and Google Chrome) were updated to a version with Chromium >=94 fetching large files do fail.
I tested with two implementations, Fetch and XmlHttpRequest. In both implementations the HTTP status and response are the same. In browsers with Chromium version 93 the expected response is returned. When running the same code in browsers with Chromium versie 94, i do get a HTTP 200, but response is always null
Any idea if this is a specific Chromium 94 issue ?
return new Promise((resolve, reject) => {
var url = getBaseUrl() + serviceUrl;
fetch(url,{
method: "GET",
headers: {
importance: "low"
}
}).then((response) => {
if (response.status === 200) {
response.arrayBuffer().then(buffer => resolve(buffer))
} else {
reject(response);
}
})
});
and
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
var url = getBaseUrl() + serviceUrl;
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
if (this.status === 200) {
resolve(this.response);
} else {
reject(this.response);
}
};
xhr.send();
});
I'm uploading local images to a remote server using TinyMCE's images_upload_handler. This works fine, that is, the image is uploaded, but the HTML that TinyMCE returns will not seem to accept any src reference that contains http. I'm integrating TinyMCE as part of KeystoneJS, so perhaps there's something in the connection that's sanitising the HTML, but I'm a bit stumped.
My images_upload_handler is
images_upload_handler: function (blobInfo, success, failure) {
var xhr, formData;
console.warn('!!!!');
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'http://localhost:4545/tinymceimage');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
console.log('json.location',json.location);
success(json.location);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
}
and my server handler is
app.post('/tinymceimage', function tinyMCEUpload(req, res) {
console.log('files', req.files);
if (!req.files || Object.keys(req.files).length === 0) {
return res.status(400).send('No files were uploaded.');
}
// The name of the input field (i.e. "sampleFile") is used to retrieve the uploaded file
let sampleFile: UploadedFile = req.files.file as UploadedFile;
// Use the mv() method to place the file somewhere on your server
console.log(sampleFile.name);
const out = path.resolve(__dirname, '../../static_files', sampleFile.name);
fs.writeFile(out, sampleFile.data, 'base64', function(err) {
if (err) console.log(err);
if (err) res.send(err);
res.json({ location: `http:localhost:4545/${sampleFile.name}` });
});
});
but the HTML returned from TinyMCE does not contain correct image src's, for instance NOT
<img src="http://localhost:4545/blop.jpg" />,
but rather
<img src="../../blop.jpg" />
If I change
res.json({ location: `http:localhost:4545/${sampleFile.name}` });
to
res.json({ location: `something/${sampleFile.name}` });
I get
<img src="something/blop.jpg" />
I'm working on a webpage in an app that uses some JavaScript to fetch data from an API endpoint.
In Safari and FireFox, I can request the page multiple times in a row and the data is fetched and displayed promptly. In Chrome, by contrast, the data is fetched and displayed promptly only if the dev tools are open or if my cache is clear (though I'm not disabling the cache in the dev tools).
If the dev tools are not open or Chrome has cached the page, reloading the page takes about 10 seconds to make the request and display the data.
Does anyone have any idea what might be causing this behavior? Full app source.
The API request in question used isomorphic-fetch to make the request. I replaced the isomorphic-fetch code with an old school AJAX request and now the requests are triggering immediately as expected.
Before:
import fetch from 'isomorphic-fetch';
export const fetchTreeData = () => {
return function(dispatch) {
return fetch(config.endpoint + 'tree')
.then(response => response.json()
.then(json => ({
status: response.status,
json
})))
.then(({ status, json }) => {
if (status >= 400) dispatch(treeRequestFailed())
else dispatch(receiveTreeData(json))
}, err => { dispatch(treeRequestFailed(err)) })
}
}
After:
export const fetchTreeData = () => {
return function(dispatch) {
get(config.endpoint + 'tree',
(data) => dispatch(receiveTreeData(JSON.parse(data))),
(e) => console.log(e))
}
}
const get = (url, success, err, progress) => {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = () => {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status === 200) {
if (success) success(xmlhttp.responseText);
} else {
if (err) err(xmlhttp);
}
};
};
xmlhttp.onprogress = (e) => {if (progress) progress(e)};
xmlhttp.open('GET', url, true);
xmlhttp.send();
};
I wish to get some currency prices from a web service which provides them in JSON format.
Here is the code I am using with the simple example (hello world) -
if (Meteor.isClient) {
Template.hello.greeting = function () {
return "Welcome to webserve.";
};
Template.hello.events({
'click input' : function () {
// template data, if any, is available in 'this'
if (typeof console !== 'undefined')
console.log("You pressed the button");
Meteor.call('getprice');
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
Meteor.methods({
getprice: function() {
console.log('On the server');
var url = "http://quotes.instaforex.com/get_quotes.php?m=json&q=AUDUSD";
//var url ="http://www.google.com";
HTTP.get(url, function(error, result) {
if(!error) {
console.log(result.content);
}
else console.log(error);
});
}
});
}
When I run the app, and click the button in the client, i get a timeout message on the server.
Notice the url - If I copy/paste it in a browser I receive the right json,
Cross Domain policy does not apply because the code is on server side.
Any ideas?
Copying into a new project helped, no change required.