I am trying to display tiff image in the browser but it is not working when I am trying to read locally or if I am giving URL of any tiff image. Here is my code .
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', " file:///home/aniketshivamtiwari/Desktop/tiffdocument.tif");
xhr.onload = function (e) {
var tiff = new Tiff({buffer: xhr.response});
var canvas = tiff.toCanvas();
document.body.append(canvas);
};
xhr.send();
</script>
I am getting this error
XMLHttpRequest cannot load file:///home/aniketshivamtiwari/Desktop/tiffdocument.tif. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
(anonymous) # (index):54
The error message says it all, you cant load files from your local machine. Upload the file in your project folder and use absulote or relative reference to that.
i.e.: put the file under images/tiffdocument.tif
xhr.open('GET', "images/tiffdocument.tif");
Related
I am fetching a file via the download URL as described here
https://firebase.google.com/docs/storage/web/download-files
This is the code I used
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function(event) {
var blob = xhr.response;
};
xhr.open('GET', this.$data._downloadURL);
xhr.send();
And I get a response with status 200 and in the preview I can see the image. But it doesn't seem to be downloading in my browser. How can I do that?
I tried putting a cors json file in the storage as well but it doesn't seem to have any imact.
You have not told the script to do anything with the data. The part of your code that reads
xhr.onload = function(event) {
var blob = xhr.response;
};
runs when the download is complete. Your data is in the blob variable. If you want to download it, you can try for instance the techniques described here inside the xhr.onload function.
I have a chrome app that blocks user's downloads and my code will instead download it in safe way. I want to download blob files with js; my code has worked fine until now, but I have found a blob link that my code fails on and I can't find why. Here is my code:
var request = new XMLHttpRequest();
request.open('GET', uri, true);
request.responseType = 'blob';
request.onload = function (evt) {
var reader = new FileReader();
reader.readAsDataURL(request.response);
reader.onload = function (e) {
var b64 = e.target.result.split("base64,")[1];
var formData = new FormData();
};
};
request.send();
My code based on this answer.
The file that I'm trying to download via js:
This is the website that contains the link
And here is the url link to the blob:
blob:http://worldpopulationreview.com/b18cab08-e62e-47e5-8e31-413f2e73f72d
The error:
GET blob:http://worldpopulationreview.com/b18cab08-e62e-47e5-8e31-413f2e73f72d net::ERR_FILE_NOT_FOUND
Any ideas?
There error means that the file can not be found. This means that the address you are trying to download from doesn't exist on the website.
Try accessing the page via your browser.
Link to the page
You'll see that it returns a 404 error. This means that the URL does not exist.
More info about error 404 here.
This error has nothing to do with your javascript code.
Lets say I have two domains
abc.com
xyz.com
I am receiving a blob from server (lets say on abc.com) and thats how I get the url of that blog:
var pdfFile = new Blob([(blob)], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(this.pdfFile);
this.url = fileURL;
Now I have url and all I want is to access that blob from one of my other website (xyz.com) which is hosted on another domain.
When I get the blob in abc.com I open my other website xyz.com in new tab in such way that it has the link of blob. But how can I access that blob using that link?
Currently I am trying this on xyz.com:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'blob:http%3A//abc.com', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
var myBlob = this.response;
}
};
xhr.send();
But its giving my error, and ofcourse it is supposed to because of different domains
Failed to load blob:http://myBlobFullURL Cross origin requests are
only supported for protocol schemes: http, data, chrome,
chrome-extension, https.
Because of StackExchange rules, abc.com was replaced with example.com and xyz.com was replaced with example.net (read more).
blob URLs cannot be accessed cross-domain, the workaround is to postMessage the Blob object (read more).
At example.com :
const exampleDotNet = window.open('https://example.net');
// TODO wait for example.net to be ready
exampleDotNet.postMessage(pdfFile, 'https://example.net');
At example.net :
window.addEventListener(
'message',
({
origin,
data: myBlob
}) => {
if(origin === 'https://example.com'){
// TODO something with myBlob
}
}
);
I have a binary file that contains an Uint8 array [0,1,2,3,4,5].
If I name it test.txt and load it everything is fine. However if I change its extension name to test.bpg the loaded data is [1,4].
What could make this happen? It doesn't happen when I run the file on local host (note only firefox will let me do this because of cross origin security).
However when I upload it to the server the strange responses start happening. I never configured the server to do anything special with either .txt files or .bpg files. It's just a standard nginx install.
In case you want to see some code I am retrieving that file like this:
var request = new XMLHttpRequest;
request.open("GET", 'test.txt', true);
request.responseType = "arraybuffer";
request.onload = (function(event) {
var data = request.response;
var array = new Uint8Array(data);
console.log(array);
});
request.send(null)
Any help would be much appreciated!
I have a problems downloading and saving locally the content of a blob from a container through the browser. Uploading a blob to a container worked properly but I can't download it using Firefox or Chrome. The only thing I achieved was retrieving the content in the reponse (Firefox) and I could download it only because of the Chrome cache (that is not valid for me). This is the code I am using:
<script type="text/javascript">
function uploadFile() {
var token = 'AUTH_AAAAAAAA';
var method = 'GET';
var url = 'http://ip/v1/AUTH_account/containerName/blobName';
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.setRequestHeader('X-Auth-Token', token);
xhr.setRequestHeader('accept', 'application/octet-stream');
xhr.send();
}
</script>
I cannot just use
<a href='http://ip/v1/AUTH_account/containerName/blobName' onclick='javascript:uploadFile();'>Blob to download</a>
because this link needs the Auth Token and it would respond with a "401 Unauthorized" message.
Thanks for your help.