How to download file given raw data? - javascript

I have a web service call that returns {"data": BINARYDATA}. How can I pop up a dialog to download the file based on only those binary data? It could be a file of any type. I'm probably looking for a Javascript function, or maybe a browser-specific function? Thanks.
EDIT: I am checking to see how the data are encoded. Will update soon with that (important) information.
EDIT 2: I investigated Using HTML5/Javascript to generate and save a file . Thank you for the referral.
My main problem with the dataURI method is that my files are larger than 256kB

Resolved:
The answer is that this is not a good client-side task (particularly when dealing with large files). It's much better to change the server-side code to return the appropriate HTTP response (with headers) instead of JSON.
Thanks everyone for your help in the comments.

Related

Loading a JSON file into JavaScript (possibly without JQuery)

I was used to handle data using PHP + PostGreSQL and, after a SQL query, print data in table using
while($var= pg_fetch_assoc($result)){
echo <<<PRINT
<tr>
<td>{$var['id']}</td>
<td>{$var['name']}</td>
<td>{$var['surname']}</td>
<td>{$var['placement']}</td>
</tr>
PRINT;
Now I have a similar problem but I have to handle JSon files only using JavaScript and no JQueries/AJAX syntax. I made some reasearch and found out that seems not possible to load data using JavaScript for security reasons, but it feels kinda odd since you can manipulate all kind of media-type files.. and you cannot get JSon text files from your disk.
So, is it really possible to load JSon files using JavaScript and then being able to manipulate it ciclicaly?
Well, depends, if you mean a local .JSON file you could simply use require to get the object, to manipulate it you could either use fs or klaw
Deal with files on the PC, form the browser
Maybe you should test something from the File Web API.
Search for "File" here.
Deal with files on a server, form the browser
You publish your JSON at some URL and then GET the JSON with AJAX.
See: https://www.w3schools.com/xml/ajax_intro.asp
You can modify files with http protocols.
I paste this link, to make a mini web server https://sourceforge.net/projects/miniweb/
First of all you can't access a local file directly from the browser. File should be served over a local server, specially if you are using Chrome. Since Chromes security is much tighter than Firefox or others, loading anything using xhr, Josn, Xml etc is pretty much all locked down.
you can use simply use apache, python or node to set up a simple local server.
Then use Fetch API. All modern browsers support Fetch API except Internet NOBODY USING Explorer.
fetch('/path/to/test.json')
.then(response => response.json())
.then(json => console.log(json));
done..! hope it helps.

What is the best/more efficient way to send images to a server?

I have an AngularJS front-end which sends small and big images to an API. It encodes the image in base64 and then send it into a JSON document.
Is there a best/faster way to do this ? Maybe not encoding the image but send a JavaScript File object ? Or something else ? (The images can be up to 5Mb).
There is a concept known as multipart-form data, that can be used for file upload. Java provides libraries to handle the uploaded file and save it in a location of our choice. Please tell me if you want me to share the exact implementation. I can do it for you. You just need a do post request to API.

Where is the file data for a flow.js upload?

I'm building an uploader into my web page and trying to use flow.js as my uploading tool. On the server-side I have a WCF service with a generic handler as the target for my uploader. I do get the uploader to send a request to the handler, and when I inspect the contents, I get just the query string, but not the actual file content. Or at least I don't know where it is.
Looking at Fiddler I can see that the server call was a GET with a query string of parameters. I don't see the file content there either. What am I missing?
I was trying to use ng-flow which is based off of flow.js. A quick trip to flow.js github (https://github.com/flowjs/flow.js) and I realized that the GET is a test to get chunks for your files initialized, then the POST with the file chunks is sent. If you don't care for chunking, then set option 'testChunks' to false when doing your flow-init. Like this:
<html flow-init="{target:'SomeFileHandler.ashx',testChunks:false}">
Doing this you will only receive the POST with the file. Hope this helps someone in the future! I may edit this later when I decided to handle chunks. Also, I did find an ASP.NET MVC implementation that may be an interesting read here:
https://github.com/DmitryEfimenko/FlowJs-MVC

Need to do bulk file upload in JavaScript

I have a little bit of an unusual situation I guess. I have a page for placing new orders and part of a new order is a variable (0-n) number of files that are to be uploaded and associated with the order on the back end. The user also needs to specify a description for each file.
I've used a couple jQuery upload plug-ins with great success, but in this case I'm not looking to upload a single file when the user hits "OK." What I really need to do is upload a file by passing a local path to some method that will do the upload.
Does anyone know of any plug-ins that do this?
Thanks!
Ajax Uploader could be helpful? I believe it allows multiple uploads.

Image response via POST

I am getting an image as response to a post request. How do I show the same on web-browser using JavaScript. Is it possible to handle binary data using JavaScript?
You might be able to create an img-tag with a base64 src:
<img alt="Embedded Image"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
This can probably be done dynamically aswell, using .createElement and setting the src.
but then you need to convert your binary data to base64 using javascript somehow. It would be simpler if you could do that server-side, since handling binary data in javascript might cause you some trouble. That would however give you quite some overhead, but maybe thats not an issue.
Otherwise, see if this helps you:
http://www.webtoolkit.info/javascript-base64.html
Depending on the data format you might be able to use the data URI to load the image. Note to watch out for browser support.
using Gears you could turn the response into a blob and bind to an URL with the local cache server. after that, any reference to that URL will answer locally with the image data.
The most cross-browser way to do this would be to simply fetch the image URL as the response of the POST request, and then make a GET call to the image using img src="..."
No: images are always loaded from an URL

Categories

Resources