A JavaScript File is just a Blob with a few additional read only properties to indicate the file’s characteristics:
File.lastModified Returns the last modified time of the file, in milliseconds since the UNIX epoch (January 1st, 1970 at Midnight). Defaults to a value of Date.now()
File.lastModifiedDate Returns the last modified date of the file referenced by the file object
File.name Returns the name of the file referenced by the file object.
Being a Blob, a File also has size and type. There is a File constructor, but it essentially the same as the Blob constructor:
var myBlob=new File([data],name, options);
where data is an array of strings, ArrayBuffer, ArrayBufferView and blobs, name is the name of the file and the options object has the same two properties as a blob, size and type The only method a File object has is also inherited from Blob, i.e. slice.
You might think that File isn’t much of an improvement on Blob, but other APIs return File objects from both the client and the server and in this case the extra information mirrors the physical files properties. Similarly, when you use a File object to create a physical file, its properties are used to set the physical file’s properties.
Notice that anywhere you can use a Blob you can use a File and in many cases vice versa. Also notice that like a Blob a File cannot be constructed to get its data from an external source – using the constructor a Blob and a File can only be created using an existing string, ArrayBuffer, ArrayBufferView or blob, i.e. data already internal to the program. However, you can create a File object which gets its data from a local file using the <input> tag:
<input type="file" id="files">
This displays a standard file input button and, if the user clicks it, a file picker dialog box appears and the user has to select the file to load. There are ways of hiding this default UI and substituting your own, and you can use drag-and-drop, but the basic mechanism of working with the file remains the same.
If the user clicks on the file picker they can pick a single file. If you add the attribute multiple to the tag then the user can select multiple files:
<input type="file" multiple id="files">
You can retrieve the list of file names using the input object’s files property. Of course, there is no point examining this before the user has selected a file so you have to define an event handler for the input’s change event. For example:
files.addEventListener("change", handleFiles, false);
function handleFiles(e){
var file=this.files[0];
console.log(file.size);
}
will report the size of the file that the user selects.
At this point the usual question is, “can I read any file on the user’s machine?”
The answer should be obvious – for security reasons only files that the user selects can be read by your program. If you find a way to read any file, and some have, you will have created malware and your application is likely to attract some unwanted attention. The only files on the local machine your program can read are ones that the user selects.
In Chapter but not in this extract
FileReader
Reading a Local File
Writing a Local File
Response
Working with the Server - Basic Fetch
Request Object
Downloading Graphics from the Server
Uploading Local Graphics
Using FormData
Upload Without a Form
Direct Binary Upload
The Data URL
SVG To Canvas – HTML To Canvas
Summary
The Blob is essentially a file but without a filename or other properties. You can consider it an unstructured stream of data.
A File is a blob with a filename and date and time of creation and use.
The FileReader object can be used to read the data associated with a File or a Blob.
You can open and read a file in the local file system but only if the user selects it via a File Open dialog box.
You can write a file to the local file system but only if the user is made aware of it via a File Save dialog box.
The Response object provides a stream-oriented and promise-based way of reading a file. For graphics data in most cases you would use the typed “read to the end” methods.
The Fetch API is a promise-based replacement for XMLHttpRequest.
The Request object customizes the request made by the Fetch API.
In most cases the simplest and fastest way to download graphics from a server is to use the Image object to download and decode the file format.
You can upload graphics data to the server with the help of a form and/or the FormData object. According to the MIME type you use this provides a great deal of automatic processing at the client and the server.
If you want to be in complete control of what is happening, you can use a direct binary upload of a file, but then you usually have to do more work at the server to retrieve the file.
A Data URL stores text or binary data within the URL itself. Binary data is stored as base64 encoded text.
You can use a Data URL to establish a link to render both SVG and HTML onto a canvas object.
Now available as a paperback or ebook from Amazon.
