Hello I'm trying to use OCR API From Microsoft and It expect Content-type application/octet-stream and body post a binary.I tried send image as Base64(binary), just binary, however It didn't work.Someone knows how this image needs be sended?

1 Answer

Yes, you can simply send it as a Blob or a File (which are almost the same things).

Example code using the XMLHttpRequest API :

Now on how to get a Blob, this really depends on where you get your image from.

• if it comes from an <input type='file'>, then you can send it like that.
• if it comes from a request _{(then why don't you send the url as application/JSON?)} you can request the response to be a blob (xhr.responseType = 'blob' or fetch().then(resp => resp.blob()).
• if you've got a canvas, then you can use its toBlob method.
• if you only have a dataURI, then check this Q/A.

Not the answer you're looking for? Browse other questions tagged javascriptmicrosoft-cognitive or ask your own question.

Is there any way I can create a text file on the client side and prompt the user to download it, without any interaction with the server?I know I can't write directly to their machine (security and all), but can I create and prompt them to save it?

19 Answers

You can use data URIs. Browser support varies; see Wikipedia. Example:

The octet-stream is to force a download prompt. Otherwise, it will probably open in the browser.

For CSV, you can use:

Try the jsFiddle demo.

Simple solution for HTML5 ready browsers..

Usage

All the above solutions didn't work in all browsers. Here is what finally works on IE 10+, Firefox and Chrome (and without jQuery or any other library):

Note that, depending on your situation, you may also want to call URL.revokeObjectURL after removing elem. According to the docs for URL.createObjectURL:

Each time you call createObjectURL(), a new object URL is created, even if you've already created one for the same object. Each of these must be released by calling URL.revokeObjectURL() when you no longer need them. Browsers will release these automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so.

All of the above example works just fine in chrome and IE, but fail in Firefox.Please do consider appending an anchor to the body and removing it after click.

I'm happily using FileSaver.js. Its compatibility is pretty good (IE10+ and everything else), and it's very simple to use:

The following method works in IE11+, Firefox 25+ and Chrome 30+:

See this in Action: http://jsfiddle.net/Kg7eA/

Firefox and Chrome support data URI for navigation, which allows us to create files by navigating to a data URI, while IE doesn't support it for security purposes.

On the other hand, IE has API for saving a blob, which can be used to create and download files.

This solution is extracted directly from tiddlywiki's (tiddlywiki.com) github repository. I have used tiddlywiki in almost all browsers and it works like a charm:

Github repo:Download saver module

Solution that work on IE10:(I needed a csv file, but it's enough to change type and filename to txt)

If you just want to convert a string to be available for download you can try this using jQuery.

As mentioned before, filesaver is a great package to work with files on the client side. But, it is not do well with large files. StreamSaver.js is an alternative solution (which is pointed in FileServer.js) that can handle large files:

As of April 2014, FileSytem APIs may not be standardized in W3C. Anyone looking at the solution with blob should thread with caution, I guess.

Based on @Rick answer which was really helpful.

You have to scape the string data if you want to share it this way:

` Sorry I can not comment on @Rick's answer due to my current low reputation in StackOverflow.

An edit suggestion was shared and rejected.

The package js-file-download from github.com/kennethjiang/js-file-download handles edge cases for browser support:

View source to see how it uses techniques mentioned on this page.

You can even do one better than just URI's - using Chrome you are also able to suggest the name the file will take, as explained in this blog post about naming a download when using URIs.

For me this worked perfectly, with the same filename and extension getting downloaded

<a href={'data:application/octet-stream;charset=utf-16le;base64,' + file64 } download={title} >{title}</a>Identify ipad by serial number.

'title' is the file name with extension i.e, sample.pdf, waterfall.jpg, etc.

'file64' is the base64 content something like this i.e, Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO

If the file contains text data, a technique I use is to put the text into a textarea element and have the user select it (click in textarea then ctrl-A) then copy followed by a paste to a text editor.

It actually IS possible - use Flash.

You can either generate the content with JS and then initialize some flash vars or just do everything within a flash movie.

Please take a look at this for some important remarks.

Not the answer you're looking for? Browse other questions tagged javascriptfileweb-applicationsclient-side or ask your own question.