Create and write to a file with javascript - javascript

On the client side I want to:
Generate random data up to a specified size (ex: 1Mb or 512Kb).
Write that data into a file.
Post that file to an endpoint on my server with an AJAX request.
I know #1 is possible, but I'm not sure how to do it. I'm not sure if #2 is possible; I've heard that Chrome currently supports the full HTML5 file API, but I need a solution that works on mobile browsers too (iOS Safari, Android, etc). #3 is easy and I already know how to do it (I included it for clarity about what I'm trying to do).

I agree with with sending data with post, but if you really want to create a file and then send it, you should read this question:
How to give a Blob uploaded as FormData a file name?

Related

auto load php script

I have shared folder between in my server which will allow other server to send XML file to me and I want my script read this file auto without opening any page.
I know how to open and read the file.
But the issue how to auto load in the backhand.
you have to create a one page which will read the provided file and do the required actions , then share this URL and format with the team who will going to provide you the xml file.
It is very much like API Endpoint, Where you have to write the code which will handled request and in this scenario your Endpoint will treat as a server and XML file provider will treat as clients.
I hope this answer helps u.
Thanks
Traditionally, you need your server to periodically execute the script which reads the XML. That PHP will need to parse the XML and handle the changes.
Alternatively, the source of the API can use push notification to avoid polling with your server. The XML will be received whenever a change occurred on the server without the creation of a lot of useless requests, but the XML will be parsed as in the previous approach.
Last, but not least, you can use WebSockets for this purpose, or if both computers are in the same network, you can use sockets. Off course, a lot depends on the data source, whether you have access there, how modern is its technology and what does it allow you to do.

Better to upload image file from browser to server as Data URI or binary form data?

In a web app I'm using Cropit to let the user upload and crop an image. Then I need to upload this image to the backend server.
Cropit returns the cropped image in Data URI format (type string).
My question is: what's the best way to now upload the cropped image to the backend server?
So far I've figured out two options here:
Send the Data URI from the client as a simple string, then convert it to binary data on the server, and save the image to disk.
Convert the Data URI to binary on the client and attach it to a FormData input, then send it to the server, and save the image to disk.
If I understand correctly, there's no native JS way to send Data URI as a multipart/form-data. Is this right?
Is it better (i.e. more performant / safer) to use approach 1 or 2? Or is preferable to do it in another way that I didn't mention?
Thanks!
The best way is to send the Data uri via a post method
I've found that the fastest most reliable method is to turn the image into a data uri.
With a multipart upload there could be issues sending the data and encoding the correct values, and it becomes a sticky mess. With the resources we havetoday a data URI is the best suggestion
Edit: Depending on the type of server you are using, it might be a smarter option to use multi-part upload. For example, an AWS lambda may only allow 5mb of data in the request. This would mean the best option would be to use a presigned URL with multi-part upload via S3, which should be handled via the frontend web portion.
Essentially the correct solution allows depends upon your architecture.
Hope you are aware of issues using HTML5 canvas based image editing, for various images sizes, canvas size and the picture quality.
As you mentioned using data format you can write the same to a file in the server side logic(as I am not sure about the server side technologies you use)
Another approach could be use CLI tool image magic(http://www.imagemagick.org/) in the server side to process the image. ie, upload the file to server with the additional information to edit image, and process it at the server. For gathering edit information from client you can use any of the client side javascript libraries like (http://odyniec.net/projects/imgareaselect/)
As you told we can save data url as file by using server as well as we can save this in local using JavaScript by using below code
using PHP :
$uri_ = 'data://' . substr($uri, 5);
$binary = file_get_contents($uri_);
By JavaScript refer this github
Best way to do is
If you want to give that file to download by user as soon as they done image editing then go for JavaScript method because it will run in client machine and creates file faster than server side.
If you want to save that file in server for next time use then create file using server side coding.

Open a text file from server on the Client-side using Javascript

No matter how much I look this up all I get is the w3C File API which focuses on local files for the client.
What I'm trying to do is I have a server. I'm trying to use client-side javascript to grab the server hosted text file, a.txt, and display it to the innerDOM of an html page. My server directory look like this:
index.html
read.js
text files
a.txt
All I want to have happen is for, on the client side, the javascript read.js running in the index.html on onload to display the contents of a.txt. I figure that since a.txt will never be large, leaving it to the client is fine.
But I can't figure out how to do this and the W3C File API isn't offering me answers.
If I had to guess, somehow making sure index.html loads a.txt and then grabbing that via the file API might be the way to go but I'm not sure how to do that.
And I'll admit it, I'm a bit of a noob. If I'm invalidating browser sandbox or doing something impossible, please tell me. I just thought this would be so simple.
Also, I'd appreciate that if you were going to suggest AJAX, either don't, or explain it like I'm a baby because I really don't know.
Thank you all so much for your help.
Why file API is irrelevant:
Web applications should have the ability to manipulate as wide as possible a range of user input, including files that a user may wish to upload to a remote server or manipulate inside a rich web application.
From W3C File API.
So, File API is intended to be used to allow users to upload files from their clients into the server. On the other hand, AJAX is used to allow users to download files and other data from the server into their clients. And this is exactly what you need.
Refer to jQuery's ajax documentation.
I believe this page should help you out with your problem.
http://www.htmlgoodies.com/beyond/javascript/read-text-files-using-the-javascript-filereader.html#fbid=YhNukIHynD3
I would suggest using an Ajax call to the file on the server, since the response of the call will typically be the contents of that file.
Using Jquery this can be done by a simple
$.ajax({ 'url':'a.txt',
'success': function(r){
//display to innerDOM here, using r as the file
});
});
You simply want to display a txt file on the web page?
Do you know about server side includes?
That would be one possibility if you control the server.
If you really want to do it in javascript, then AJAX would be the way to go.
If it were me at that point I would figure out how to include and use jQuery to help with the ajax bits.
You will simply request the text file via its URL (you can get it to load in the browser right?), and then use jQuery to put that text into some DOM element.

XmlHttpRequest with chunked request body?

I know how to handle chunked downloads in javascript, using the XmlHttpRequest object. Is there any way to perform a chunked upload using javascript, opening a connection but only uploading blobs of data bit by bit?
I know chunked uploads should be possible with Http 1.1 servers, and have found a lot of references to making chunked uploads using various other platforms (C# java etc.) but have not found any references to doing so in the browser with javascript.
EDIT: The use case is to stream data up to the server, and not to upload a large file, kind of mirroring the use of a chunked response to stream data down to the client. This is as an alternative to making individual ajax requests, since the chunks of data that's going up from client to server are pretty frequent (< 0.5s interval).
As of today (November 2021), I believe support for UPLOADS using HTTP chunked data transfer is still largely missing in browsers.
If you look at the "Send ReadableStream in request body" column of the browser support matrix for the Request (Fetch API), you can see that it is currently "No" for all browsers except "Deno". You will however notice the "Experimental" flag beside the column. So it is available experimentally in some browsers such as Chrome. I wouldn't hold your breath about it becoming mainstream anytime soon though.
HTTP chunked data transfer encoding is not technically necessary for sending data a few chunks at a time, I believe regular HTTP data transfer also only sends data a few chunks at a time but the "chunking" is done at the TCP level instead (please correct me if I'm wrong here). Consequently, both protocols can be used to stream a file upload. WebSockets are of course another option as well. The main difference in which protocol to choose is based on whether or not you know the final length of the stream in advance or not.
If you need to stream upload data for which you DON'T know the length in advance (such as live video, video conference calls, remote desktop sessions, chats, etc.) then your best bet is perhaps the WebSocket API (or something built on top of it).
If you need to stream upload data for which you DO know the length in advance (files, images, videos, etc.) then I believe your best bet is probably a normal POST or PUT using the Fetch API or even the old XmlHttpRequest API.
You can use the FileReader API and the slice method.
with slice you can get block of data that you can upload, then you need to reassemble them server side.
here is a good intro on how to handle files in javascript
http://www.html5rocks.com/en/tutorials/file/dndfiles/
you can have a look at http://caniuse.com/#feat=filereader for browser support

Read XML data from an rss file

say i have an rss feed, that i want to get data from- picassa specifically- which uses atom i suppose.
i want to be able to parse this rss file as xml file getElements/etc
im aware that reading it directly and manipulating probably wont work as it get some access cross domain error, so ive simply downloaded the file and hosted it on my own domain-(also is there any way to allow chrome to view xml data locally- it seems to think its cross server even when its viewed locally which makes preview editing a pain)
i cant seem to read the data properly through traditional means and searching appears to give severely outdated information
Go take a look at the YAHOO-PIPES service, it's free and easy to use. This will allow you to extract any information you need from an RSS feed and send the results to a server in JSON format if you require.

Categories