How to Read a Text File in Html
Read files in JavaScript
How to select files, read file metadata and content, and monitor read progress.
— Updated
Being able to select and interact with files on the user'south local device is one of the about ordinarily used features of the web. It allows users to select files and upload them to a server, for case, uploading photos, or submitting tax documents, etc. Only, it likewise allows sites to read and manipulate them without ever having to transfer the information across the network.
The mod File Organisation Access API #
The File Organisation Access API provides an easy mode to both read and write to files and directories on the user's local organization. It's currently available in most Chromium-derived browsers similar Chrome or Edge. To learn more about it, see the File Organisation Access API article.
Since the File System Access API is non compatible with all browsers yet, check out browser-fs-access, a helper library that uses the new API wherever it is available, merely falls back to legacy approaches when it is not.
Working with files, the classic way #
This guide shows you how to:
- Select files
- Using the HTML input element
- Using a drag-and-drop zone
- Read file metadata
- Read a file's content
Select files #
HTML input element #
The easiest way to allow users to select files is using the <input type="file"> element, which is supported in every major browser. When clicked, it lets a user select a file, or multiple files if the multiple attribute is included, using their operating organization'southward congenital-in file selection UI. When the user finishes selecting a file or files, the chemical element's change event is fired. You lot can access the listing of files from upshot.target.files, which is a FileList object. Each item in the FileList is a File object.
<!-- The `multiple` attribute lets users select multiple files. -->
<input type = "file" id = "file-selector" multiple >
<script >
const fileSelector = document. getElementById ( 'file-selector' ) ;
fileSelector. addEventListener ( 'change' , ( event ) => {
const fileList = event.target.files;
console. log (fileList) ;
} ) ;
</script > This example lets a user select multiple files using their operating organization'southward congenital-in file selection UI and so logs each selected file to the console.
Limit the types of files user can select #
In some cases, you may want to limit the types of files users tin select. For example, an image editing app should just accept images, not text files. To do that, you can add together an accept aspect to the input element to specify which files are accustomed.
<input type = "file" id = "file-selector" accept = ".jpg, .jpeg, .png" > Custom drag-and-drop #
In some browsers, the <input blazon="file"> element is besides a drop target, allowing users to elevate-and-drop files into your app. Only, the drib target is small, and can be hard to use. Instead, once you've provided the core functionality using an <input type="file"> element, you can provide a large, custom drag-and-drop surface.
Cull your drop zone #
Your drop surface will depend on the design of your application. You may only want part of the window to be a drop surface, or potentially the entire window.
Squoosh allows the user to drag-and-drop an image anywhere into the window, and clicking select an image invokes the <input type="file"> element. Whatsoever you choose as your driblet zone, make sure it'southward clear to the user that they tin elevate-and-drop files onto that surface.
Ascertain the drop zone #
To enable an element to exist a drag-and-drop zone, y'all'll need to listen for two events, dragover and drib. The dragover upshot updates the browser UI to visually indicate that the drag-and-drop action is creating a copy of the file. The drop event is fired after the user has dropped the files onto the surface. Similar to the input chemical element, you tin can access the list of files from event.dataTransfer.files, which is a FileList object. Each detail in the FileList is a File object.
const dropArea = document. getElementById ( 'drib-area' ) ; dropArea. addEventListener ( 'dragover' , ( event ) => {
consequence. stopPropagation ( ) ;
upshot. preventDefault ( ) ;
// Style the drag-and-drop equally a "re-create file" operation.
issue.dataTransfer.dropEffect = 'copy' ;
} ) ;
dropArea. addEventListener ( 'drop' , ( event ) => {
event. stopPropagation ( ) ;
event. preventDefault ( ) ;
const fileList = effect.dataTransfer.files;
console. log (fileList) ;
} ) ;
outcome.stopPropagation() and event.preventDefault() terminate the browser's default behavior from happening, and allow your code to run instead. Without them, the browser would otherwise navigate away from your page and open the files the user dropped into the browser window.
Check out Custom elevate-and-drib for a live sit-in.
What almost directories? #
Unfortunately, today there isn't a skillful way to get access to a directory.
The webkitdirectory attribute on the <input type="file"> element allows the user to cull a directory or directories. It is supported in some Chromium-based browsers, and possibly desktop Safari, but has conflicting reports of browser compatibility.
If drag-and-drib is enabled, a user may attempt to drag a directory into the drop zone. When the drop result is fired, it will include a File object for the directory, but will exist unable to admission whatever of the files within the directory.
The File object contains a number of metadata properties most the file. Virtually browsers provide the file name, the size of the file, and the MIME type, though depending on the platform, dissimilar browsers may provide different, or boosted information.
function getMetadataForFileList ( fileList ) {
for ( const file of fileList) {
// Not supported in Safari for iOS.
const name = file.proper name ? file.name : 'Non SUPPORTED' ;
// Not supported in Firefox for Android or Opera for Android.
const blazon = file.type ? file.type : 'Non SUPPORTED' ;
// Unknown cantankerous-browser back up.
const size = file.size ? file.size : 'NOT SUPPORTED' ;
console. log ( {file, name, type, size} ) ;
}
} You tin see this in activity in the input-type-file Glitch demo.
Read a file's content #
To read a file, utilize FileReader, which enables you to read the content of a File object into memory. You tin can instruct FileReader to read a file every bit an assortment buffer, a information URL, or text.
office readImage ( file ) {
// Check if the file is an prototype.
if (file.type && !file.type. startsWith ( 'image/' ) ) {
console. log ( 'File is non an image.' , file.type, file) ;
return ;
} const reader = new FileReader ( ) ;
reader. addEventListener ( 'load' , ( event ) => {
img.src = outcome.target.result;
} ) ;
reader. readAsDataURL (file) ;
}
The example above reads a File provided by the user, then converts it to a information URL, and uses that data URL to display the image in an img element. Bank check out the read-paradigm-file Glitch to see how to verify that the user has selected an prototype file.
Monitor the progress of a file read #
When reading large files, it may be helpful to provide some UX to indicate how far the read has progressed. For that, apply the progress event provided past FileReader. The progress event provides 2 properties, loaded, the corporeality read, and total, the total amount to read.
function readFile ( file ) {
const reader = new FileReader ( ) ;
reader. addEventListener ( 'load' , ( effect ) => {
const upshot = result.target.consequence;
// Do something with issue
} ) ;
reader. addEventListener ( 'progress' , ( result ) => {
if (event.loaded && event.total) {
const percent = (event.loaded / event.total) * 100 ;
console. log ( ` Progress: ${Math. round (percent) } ` ) ;
}
} ) ;
reader. readAsDataURL (file) ;
} Hero prototype past Vincent Botta from Unsplash
Terminal updated: — Amend commodity
Return to all articles
How to Read a Text File in Html
Source: https://web.dev/read-files/
Komentar
Posting Komentar