I have this weird issue that Im not sure if its normal or not.. Im sure its not
I have a drag and drop area that I can upload any file and it works like a charm.
EXCEPT...
I cant upload any .html or .htm files with it. I can take an html file and rename it to .jpg and it works.
This is my piece of code:
xhr = new XMLHttpRequest()
xhr.open 'PUT', "#{tvr.api.url}/transfer/#{userprofile.UserLink.LinkID}/#{userprofile.UserLink.UserName}/#{channelid}/#{filename}"
xhr.upload.addEventListener "progress", (event, filename) =>
window.Appbusy = true
$($(".file-status-#{uid}").find("span")).text("(#{((event.loaded/event.totalSize)*100).toFixed(2)}%)")
,false
xhr.onreadystatechange = (aEvt) ->
if xhr.readyState is 4
if xhr.status is not 200
$(".notification").remove()
notification("The server returned an error uploading the file. Please try again.", 'error')
It even shows that upload progress then at 100% when it needs to push it the server it just fails with Bad Request. (the server never gets any request)
It works if the HTML file has 0 content! Why I do not know
UPDATE:
After some playing around I see that the request works when setting the Content-Type to text/plain:
xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
As soon as I change to text/html it does not work if the file has any content:
xhr.setRequestHeader("Content-Type", "text/html;charset=UTF-8");
Could this be a bug?
I sent this as a possible XML bug
Use jQuery .ajax() instead. Specify type:'PUT' for an upload. For example, using your URL:
$.ajax({
type:"PUT"
url:"#{tvr.api.url}/transfer/#{userprofile.UserLink.LinkID}/#{userprofile.UserLink.UserName}/#{channelid}/#{filename}"
success: function(){
alert('success');
}
});
Related
I am trying to display an image which was in my index.html. This was kept in <img tag and whenever my server calls index.html file then all the paths of files included in it was also loading by checking for its own services.
All types of files like js, css and html are getting loaded but when it come to img files it was not loading on browser, and no error in console.
Path of an image was correct. I am using fs.readFile() to load files content type which was set to image/png as my image file was .png.
Can anyone make me clear what is going on here?
Thanks to Pankaj Jatav, as in html img tag is base64 decoder, our fs.readFile() encoder must be as base64, as default node has utf-8 as encoder in fs.readFile or writeFile we have to mention encoding type as base64 for images
fs.readFile(filepath, 'base64', (err, file) => {
if (err) {
res.writeHead(500, { 'Content-Type': 'image/png' });
res.write(err);
res.end();
return;
}
res.writeHead(200 , { 'Content-Type': 'image/png' });
res.end(file,'base64');
});
this worked for me.
I have an issue with sending a file (part of a request in form data format).
The issue seems coming from the fact that only in Chrome for Linux the file (which is CVS file, with .csv extension and basically just text) is sent with mimetype (Content-type in request body) Content-Type: application/octet-stream
So, I am trying to override the mimetype to match the same sent by Chrome on Linux which is text/csv.
However the mimetype is apparently not overriden and still send as octet-stream.
My code:
let xhr = new XMLHttpRequest();
let form = new FormData();
form.append('file', file, file.name); // the file is loaded correctly
form.append('payload', JSON.stringify(data)); // data is just a JSON object
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
// we arrive here both on Debian and Windows 10
}
}
xhr.upload.onerror = function() { .... } // no error
xhr.open('POST', 'http://<my_url>', true);
console.log(file.type);
xhr.overrideMimeType("text/csv");
xhr.send(form);
A couple of notes:
console.log(file.type) actually prints "text-csv" but only in Chrome for Linux (Debian specifically). in the other cases (any other browser or platform) nothing is printed
given the previous point, it seems clear to me for some reason any other browser / platform can't recognize the file type, so the file is sent as octet-stream (general binary file)
xhr.overrideMimeType changes the MIME-type of the response, not the request.
I you want to change the MIME-type of the file, just create a new Blob with an explicit file type:
var blob = new Blob([blob], {type: 'text/csv'});
form.append('file', blob, file.name);
The above changes the MIME-type of the file in the uploaded form to "text/csv", as desired.
PS. If you literally want to change the MIME-type of the whole request (instead of just the file), use xhr.setRequestHeader('Content-Type', 'custom MIME type here');. (This only makes sense if you are sending a non-standard or custom data in the xhr.send method).
I am hosting an html page on localhost:8888 with a MAMP Server and I am trying to get some data from a JSON file which I am hosting on localhost:3000 on the 'categories' route. Firstly, I wanted to know is this possible ?
If it is not possible, is it possible for me to route the JSON data to another site. If it is possible, here is the script I have embedded in my HTML
<script>
$(document).ready(function(){
setInterval(test,500);
console.log("document ready");
alert('page ready');
});
function test() {
$.ajax({
url:"HTTP://localhost:3000/categories",
dataType: 'jsonp',
success: function(json){
$("#Address1").html(json[0]["id"]);;
}
});
}
</script>
Here is the JSON file :
[{"_id":"5624711f1a530785d511e747","__v":0,"name":"Beverages","description":"Soft drinks, coffees, teas, beers, and ales","created":"2015-10-19T04:27:11.649Z"}]
Currently, It doesn't display any data. I have tried pure JS instead of jquery but it doesn't help.
This is what I got in the Chrome Console : GET localhost:3000/categories?callback=jQuery1113012827125121839345_1445236000644&_=1445236000645 net::ERR_UNKNOWN_URL_SCHEME
Added http:// - does not make a difference
So I'm trying to use Google Maps by decoding GPS data from a mobile device and then generates a map route out of it. Using the Static Maps API, I can sort of approximate a trip, but the data gets generated every 1-5 seconds, which is far beyond the amount of information you can send over a GET request to Google Maps.
So my JavaScript map looks like this running a webpage:
Edited: DropBox does not apparently persistently store photo links persistently, switching to OneDrive.
Should look like http://bit.ly/1tjxg6u
Which is glorious. I figured that if I used html2Canvas, I could generate a screenshot of the map, and transfer that file onto another portion of my server, or URI encode it. But when I tried that, I get this instead.
Does Look Like http://bit.ly/1jlrOvL
Not glorious at all. I then checked out rasterHTML. But it gave me an error when I used rasterizeHTML.drawDocument of "cannot get innerHTML of undefined" when I call modalMap, (see JavaScript code below). It does let me get the HTML and use drawHTML of the exact same element using .innerHTML. No idea why. Using HTML, that gets me this result:
All Three together http://bit.ly/1ssxIet
rasterizeHTML is in the lower-right. html2Canvas is the lower-left. I'm sort of stuck halfway between on both.
Edited: After doing a lot of testing, the error is:
html2canvas: Error loading ":http://mt0.googleapis.com/vt?...
The URL does show the image when you click on it in the console, but HTML2canvas can't display it. I'm not sure if it's a URL encoding problem or what.
I enabled CORS in my headers, Apache, and the .htaccess just in case that was the issue. I then downloaded the .php proxy file and tried that, just in case that was the issue. Neither worked.
The javascript code:
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
// Try RasterizeHTML
var modalMap = document.getElementById('mainPageCanvas');
var modalMapHTML = modalMap.innerHTML;
var canvasHolder = document.getElementById('rasterizeHTML');
console.log(modalMap);
console.log(canvasHolder);
var options = {
width : 1000,
height : 400,
executeJs : false,
zoom: 2
};
rasterizeHTML.drawHTML(modalMapHTML, canvasHolder)
.then(function success(renderResult) {
console.log(renderResult);
}, function error(e) {
console.log(e);
}.deb());
html2canvas(document.getElementById('mainPageCanvas'), {
proxy: "//localhost:85/ormc/consumer/build/ajax/php/html2canvasproxy.php",
useCORS: true,
allowTaint:true,
logging: true,
onrendered: function(canvas) {
canvas.setAttribute('crossOrigin','anonymous');
$('#secondaryPageCanvas').replaceWith(canvas);
console.log("Canvas function called");
}.deb()
});
}.deb());
Now if I attempt to do a dataUrl conversion, I get this: "Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."
The HTML is just:
<div id="mainPageCanvas" style="width:1000px;height:400px;"></div>
<div id='secondaryPageCanvas' style="width:1000px;height:400px;"></div>
<canvas id='rasterizeHTML' style='width:1000px;height:400px;'>
My headers being sent are:
Access-Control-Allow-Methods:OPTIONS, GET
Access-Control-Allow-Origin:*
Access-Control-Request-Method:*
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Just to see if anything is triggering the CSP (It's report only), but nothing is throwing it. So, what am I doing wrong?
im trying to pull data from drupal 7 website from a local files inside
http://example.com:8888/test/test.html
im using this Ajax code with html request since i have tried json and also the website prevents me from pulling even i have added
<?php
header('Access-Control-Allow-Origin: *');
?>
code to pull the data , but no result:
$.ajax(
{
// The link we are accessing.
url: "http://horizon-websolutions.com",
// The type of request.
type: "get",
// The type of data that is getting returned.
dataType: "html",
error: function(){
alert("error");
// Load the content in to the page.
$("#output").html( "<p>Page Not Found!!</p>" );
},
beforeSend: function(){
alert("not yet"); },
complete: function(){
alert("done"); },
success: function( strData ){
alert("success");
// Load the content in to the page.
$("#output").html( strData );
}
}
);
// Prevent default click.
return( false );
please help my telling the website accept my localhost request to pull data from the server . the same code tested on a pure php page and its working fine .
Not sure how secure this would be but one way to solve it is to enable CORS.
For Drupal 7 (would be analogous to Drupal 6) so you need to download and install the CORS module,
enable the module under Modules,
go to the Drupal config (Configuration on Drupal 7 main dashboard top navigator),
search for CORS. Click,
give the path for the links you wish to access. Examples are given on that page of how to put in new links.
Hope this helps.