Develop Reference

Issues downloading picture to local system using OneNote API

I'm trying to write a program that dowloads OneNote pages to my pc, including files in the pages. I'm stuck on the downloading images from the pages. I make a GET request and get the binary data for the image just fine, when I save it and try to open it, I get a "it looks like we don't support this file format.
The code I'm using is
var u16 = btoa(unescape(encodeURIComponent(resp)));
var imgAsBlob = new Blob([u16], {type: 'application/octet-stream'});
var downloadLink = document.createElement("a");
downloadLink.download = "hello.png";
downloadLink.href = window.webkitURL.createObjectURL(imgAsBlob);
downloadLink.click();
resp is the responseText from the GET request with the binary data.
I've tried not using btoa and saving the resp directly on the blob. I've tried changing the blob type to image/png and I've tried escaping it using Uint16Array(resp.length) and equaling each byte to a byte from resp. I'm out of ideas and don't know what I'm doing wrong.

jQuery- Open pdf in new tab with file name

Im getting a pdf back from a databse as a blob object and want to display the pdf back to the browser with a file name.
I get the file back no problem and able to display in new tab, but file name looks like --> 64CB13D-ec93-48fa-a425-0b66n3fg
How can i force a file name?
function(response){
if(response.data && response.status==200){
var fileContent = response.data;
var file = new Blob([fileContent], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
window.open(fileURL, '_blank');

I think you can just use HTML for this purpose, see my answer here: Display PDF stream returned from controller using jquery in new window
And add, server-side, the following header:
Content-Disposition: attachment; filename="the-name-you-want.pdf"
See: https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Disposition

How to upload blob to Parse?

I am trying to upload blob to Parse. I can get a file to upload just fine, but I am trying to upload a blob that I get from canvas after doing a crop in Javascript. The line that I use to define a new parse File to be uploaded looks like this
var parseFile = new Parse.File("some_file_name.png", file);
Since the Blob Object is basically a File object without the meta attributes, I was hoping to be able to do something like this..
var parseFile = new Parse.File("some_file_name.png", blob);
But the result of this is parseFile being 'undefined'. And I thus cannot call subsequent methods to continue with the upload.
I can't seem to find any info anywhere else, and was hoping someone with a little more insight may know if I am missing something or on the wrong path. Any help is greatly appreciated!

It turns out that I can achieve the desired result by creating a Parse File object with the Base64 Data Url directly, instead of trying to create a Blob first.
var url = canvas.toDataURL("image/png");
var base64 = url.split('base64,')[1];
var parseFile = new Parse.File(name, { base64: base64 });
I found the answer here..
converting dataURI to File to use in Parse - javascript
Hope it helps someone!

JavaScript: save base64 string as file

I have a base64 string, file type. File type can be image, text or even pdf. I need to show download link and when user clicks it should start downloading as expected file.
Concisely, server sends me file as base64 string, and I need to save it as file on browser. How can I save base64 string as file on browser? It would be best if solution works on IE9 also.

You can use download.js.
download(base64String, filename, mimeType)

Adapted from https://gist.github.com/RichardBray/23decdec877c0e54e6ac2bfa4b0c512f to work on Firefox.
function downloadBase64File(contentBase64, fileName) {
const linkSource = `data:application/pdf;base64,${contentBase64}`;
const downloadLink = document.createElement('a');
document.body.appendChild(downloadLink);
downloadLink.href = linkSource;
downloadLink.target = '_self';
downloadLink.download = fileName;
downloadLink.click();
}

You can do this from js to download pdf.
Use:
document.location = 'data:application/pdf;base64,' + base64String

You get the effect you desire (web page showing a link, and when user clicks, the save as dialog pops up) when the appropriate response headers are present when the browser requests the resource:
Content-Disposition: attachment; filename="yourfilename.extension"
If you're getting the file from the server as a base64 string embedded in your html, perhaps you can skip the embedding and simply embed a direct link to the file on your server, having the server serve it up to the user.
Related SO on Content-Disposition

How to give a Blob uploaded as FormData a file name?

I am currently uploading images pasted from the clipboard with the following code:
// Turns out getAsFile will return a blob, not a file
var blob = event.clipboardData.items[0].getAsFile(),
form = new FormData(),
request = new XMLHttpRequest();
form.append("blob",blob);
request.open(
"POST",
"/upload",
true
);
request.send(form);
Turns out the uploaded form field with receive a name similar to this: Blob157fce71535b4f93ba92ac6053d81e3a
Is there any way to set this or receive this file name client side, without doing any server side communication?

For Chrome, Safari and Firefox, just use this:
form.append("blob", blob, filename);
(see MDN documentation)

Adding this here as it doesn't seem to be here.
Aside from the excellent solution of form.append("blob",blob, filename); you can also turn the blob into a File instance:
var blob = new Blob([JSON.stringify([0,1,2])], {type : 'application/json'});
var fileOfBlob = new File([blob], 'aFileName.json');
form.append("upload", fileOfBlob);

Since you're getting the data pasted to clipboard, there is no reliable way of knowing the origin of the file and its properties (including name).
Your best bet is to come up with a file naming scheme of your own and send along with the blob.
form.append("filename",getFileName());
form.append("blob",blob);
function getFileName() {
// logic to generate file names
}

That name looks derived from an object URL GUID. Do the following to get the object URL that the name was derived from.
var URL = self.URL || self.webkitURL || self;
var object_url = URL.createObjectURL(blob);
URL.revokeObjectURL(object_url);
object_url will be formatted as blob:{origin}{GUID} in Google Chrome and moz-filedata:{GUID} in Firefox. An origin is the protocol+host+non-standard port for the protocol. For example, blob:http://stackoverflow.com/e7bc644d-d174-4d5e-b85d-beeb89c17743 or blob:http://[::1]:123/15111656-e46c-411d-a697-a09d23ec9a99. You probably want to extract the GUID and strip any dashes.

Haven't tested it, but that should alert the blobs data url:
var blob = event.clipboardData.items[0].getAsFile(),
form = new FormData(),
request = new XMLHttpRequest();
var reader = new FileReader();
reader.onload = function(event) {
alert(event.target.result); // <-- data url
};
reader.readAsDataURL(blob);

It really depends on how the server on the other side is configured and with what modules for how it handles a blob post. You can try putting the desired name in the path for your post.
request.open(
"POST",
"/upload/myname.bmp",
true
);

Are you using Google App Engine?
You could use cookies (made with JavaScript) to maintain a relationship between filenames and the name received from the server.

When you are using Google Chrome you can use/abuse the Google Filesystem API for this. Here you can create a file with a specified name and write the content of a blob to it. Then you can return the result to the user.
I have not found a good way for Firefox yet; probably a small piece of Flash like downloadify is required to name a blob.
IE10 has a msSaveBlob() function in the BlobBuilder.
Maybe this is more for downloading a blob, but it is related.