I'm writing a Chrome browser extension that takes a snapshot of the current tab's view and uploads it to a web service API that I don't control. The Chrome extension library has a function (chrome.tabs.captureVisibleTab. see http://code.google.com/chrome/extensions/tabs.html) that takes a snapshot and returns the data in a data url. I'm at an impasse as to how to get that data uploaded.
I've tried to write my own multipart-form request and use an ajax request to POST the data. But, ajax insists on UTF-8 encoding the data and the API insists on 8-bit encoded binary. I thought maybe using a file uploader plugin like http://malsup.com/jquery/form/ would work, but I can't seem to get the data from the JS variable into a form the uploader will take.
Any ideas for at least a new path of investigation would be highly appreciated.
Turns out that you can do this.
Chrome has a way to send a blob via XMLHTTPRequest.
Here's a link to example code from the Chromium issue tracker:
http://code.google.com/p/chromium/issues/detail?id=35705#c34
XMLHttpRequest.prototype.sendAsBinary = function(datastr,contentType) {
var bb = new BlobBuilder();
var len = datastr.length;
var data = new Uint8Array(len);
for (var i=0; i<len; i++) {
data[i] = datastr.charCodeAt(i);
}
bb.append(data.buffer);
this.send(bb.getBlob(contentType));
}
Related
I would like to load PDF file from URL into JavaScript variable (this file is on another domain) and then print the base64 encoded string of that file.
This script allows me to browse file on my computer and then it prints base64 string into browser console:
<input id="inputFile" type="file" onchange="convertToBase64();" />
<script type="text/javascript">
function convertToBase64() {
//Read File
var selectedFile = document.getElementById("inputFile").files;
//Check File is not Empty
if (selectedFile.length > 0) {
// Select the very first file from list
var fileToLoad = selectedFile[0];
// FileReader function for read the file.
var fileReader = new FileReader();
var base64;
// Onload of file read the file content
fileReader.onload = function(fileLoadedEvent) {
base64 = fileLoadedEvent.target.result;
// Print data in console
console.log(base64);
};
// Convert data to base64
fileReader.readAsDataURL(fileToLoad);
}
}
</script>
I would like to completely remove the input button from this script and pass my file to variable var selectedFile from URL (for example: http://www.example.com/docs/document.pdf).
I'd need a help how to realize this, because I am not sure if XMLHttpRequest() works cross domain and scripts I've found with Ajax/jQuery method operated mainly with JSON file, which is something different that I need.
Thank you very much for help.
You cannot do this in normal browser-based JavaScript* if the other side (http://www.example.com in your case) doesn't allow cross-origin requests from your origin.
If the other side does let you do this, then yes, you'd use XMLHttpRequest (or jQuery's wrappers for it, such as ajax or get) to request the data and transform/display it as you see fit.
A fairly typical way to work around that if the other side doesn't is to use your own server in-between: Make the request to your server, have it make the request to the other side (server-side code doesn't have the Same Origin Policy blocks that browsers impose), and then have your server respond to your request with the data from the other server.
* "normal browser-based JavaScript" - e.g., without starting the browser with special flags that disable security, or getting people to install an extension, etc.
I have some text data (say var a = 'Hello World From Javascript';)in javascript variable in current window. I want to do the following
through javascript-
1. open a new window and write the text data to the window.
2. set the content type to text/plain.
3. set the content-disposition to attachment, so that download prompt comes.
4. user downloads the text data as a text file and saves it to his local disk.
is this all possible through javascript?
I know we can make ajax calls to server or redirect but in this case instead of following above steps. But in this case, these workarounds are not adaptable.
you can do that using JS & HTML5 features. Please find below a sample code.
var fileParts = ['Hello World From Javascript'];
// Create a blob object.
var bb = new Blob(fileParts,{type : 'text/plain'});
// Create a blob url for this.
var dnlnk = window.URL.createObjectURL(bb);
var currentLnk = $('#blobFl').attr('href');
// blobFl is the id of the anchor tag through which the download will be triggered.
$('#blobFl').attr('href',dnlnk);
$('#blobFl').attr('download','helloworld.txt');
// For some reason trigger from jquery dint work for me.
document.getElementById('blobFl').click();
Triggering a file download without any server request
Unfortunately this is not something you can do with normal browser capabilities. Something like flash or a browser-specific plugin will get you what you need, but security limitations within javascript will not let you download arbitrary data created within the browser.
Also the 'data' url is not supported across all browser/version combinations. I am not sure if your users are constrained on what browser they are using or not but that may limit what you can do with that solution.
Source: Triggering a file download without any server request
If you already have the file on the server (I make an ajax call to generate and save a PDF on the server) - you can do this
window.location.replace(fileUrl);
No, Content-Disposition is a response header, it has to come from the server. I think you could do it with Flash but I wouldn't recommend it.
Here's a clean, pure js version of #Rajagopalan Srinivasan's answer:
var fileParts = ["Hello World From Javascript"];
// The anchor tag to use.
const blobLink = document.getElementById("blobLink");
// Create a blob object.
var blob = new Blob(fileParts, { type: "text/plain" });
// Create a blob url for this.
var blobUrl = window.URL.createObjectURL(blob);
blobLink.setAttribute("href", blobUrl);
blobLink.setAttribute("download", "helloworld.txt");
blobLink.click();
<a id="blobLink">Download</a>
I'm looking for a way to save large files (exactly 8 megabytes) in Safari. I have tried using both the URI scheme along with the eligreyFileSaver and the flash plugin Downloadify. All of these cause Safari to allocate memory until the web worker process reaches about 2 gigabytes and then Safari crashes.
I realize there are questions like this one before, but I have tried everything those questions have resulted in. Links:
Using HTML5/Javascript to generate and save a file
How to Save a file at client side using JavaScript?
create a file using javascript in chrome on client side
This code works on Firefox & Google Chrome (uses the eligreyFileSaver library for saveAs):
function io_saveData (){
var bb;
var buffer;
var data;
alert ("The file will now be saved.");
bb = new BlobBuilder();
for (var i = 0;i<kMapHeight;i++){
var stduint8 = new Uint8Array (uint16map[i].buffer);
var stduint8LittleEndian = new Uint8Array (kMapWidth*2);
//byte swap work around
for (var j = 0;j<stduint8.length;j+=2){
stduint8LittleEndian [j] = stduint8 [j+1]
stduint8LittleEndian [j+1] = stduint8 [j];
}
bb.append(stduint8LittleEndian.buffer);
}
var blob = bb.getBlob("example/binary");
saveAs(blob, "Data File");
bb = null;
buffer = null;
data = null;
}
I'm looking for a way for Safari to create a download without crashing. The deployment area is Mac OS X, so each machine will have apache built in along with PHP, I would rather not take that route though.
Here you go. First of store the file in HTML5 file system and after the completion data storing download it using filesaver api. I worked on it and I got good results with out blocking UI and crashes of browser. better to do it in webworkers to get performance of app.
Here are helpful article to it.
TEMPORARY storage has a default quota of 50% of available disk as a shared pool. (50GB => 25GB) (Not restricted to 1GB anymore)
http://updates.html5rocks.com/tag/filesystem
Unfortunately, Safari7 seems to not support writing files.
https://github.com/eligrey/FileSaver.js/issues/12
http://caniuse.com/#feat=filesystem
I have a rails app on Heroku (cedar env). It has a page where I render the canvas data into an image using toDataURL() method. I'm trying to upload the returned base64 image data string directly to s3 using JavaScript (bypassing the server-side). The problem is that since this isn't a file, how do I upload the base64 encoded data directly to S3 and save it as a file there?
I have found a way to do this. After a lot of searching a looking at different tutorials.
You have to convert the Data URI to a blob and then upload that file to S3 using CORS, if you are working with multiple files I have separate XHR requests for each.
I found this function which turns your the Data URI into a blob which can then be uploaded to S3 directly using CORS (Convert Data URI to Blob )
function dataURItoBlob(dataURI) {
var binary = atob(dataURI.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}
Here is a great tutorial on uploading directly to S3, you will need to customise the code to allow for the blob instead of files.
Jamcoope's answer is very good, however the blob constructor is not supported by all browsers. Most notably android 4.1 and android 4.3. There are Blob polyfills, but xhr.send(...) will not work with the polyfill. The best bet is something like this:
var u = dataURI.split(',')[1],
binary = atob(u),
array = [];
for (var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
var typedArray = Uint8Array(array);
// now typedArray.buffer can be passed to xhr.send
If anyone cares: here is the coffescript version of the function given above!
convertToBlob = (base64) ->
binary = atob base64.split(',')[1]
array = []
for i in [0...binary.length]
array.push binary.charCodeAt i
new Blob [new Uint8Array array], {type: 'image/jpeg'}
Not sure if OP has already solved this, but I'm working on a very similar feature. In doing a little research, I came across these articles that might be helpful.
http://blog.danguer.com/2011/10/25/upload-s3-files-directly-with-ajax/
http://www.tweetegy.com/2012/01/save-an-image-file-directly-to-s3-from-a-web-browser-using-html5-and-backbone-js/
I am working on uploading image file to TWITPIC using XMLHttp Request on a Chrome Extension . I need to send the image as payload. Is there a way to do this ? I found this link Convert an image into binary data in javascript
But that works on image tags. i need a way to specify image file path and upload image to TWITPIC.
I came to know about FileReader API with HTML 5. Is there any way to work using that??. It should work on a local file.
Does Chrome Extension support FileReader API without running a localhost server ??
I found the answer myself. Chrome Extensions does support FileReader API of HTML 5. So just the code below works simple.
var reader = new FileReader();
reader.readAsDataURL(f);
You can use this to get the binary data of an image using XMLHTTPRequests, I used it recently for a similar purpose:
var dataToBinary = function(data){
var data_string = "";
for(var i=0; i<data.length; i++){
data_string += String.fromCharCode(data[i].charCodeAt(0) & 0xff);
}
return data_string;
};
$.ajax("http://some.site.com/myImage.jpg", {
success: function(data){
binary = dataToBinary(data);
//or: 'binary = data', dataToBinary might not be needed
},
mimeType: "text/plain; charset=x-user-defined"
});
And the binary data is stored in the binary variable.