File: webkitRelativePath property - Web APIs | MDN (2024)

The File.webkitRelativePath is a read-only property that contains a string which specifies the file's path relative to the directory selected by the user in an <input> element with its webkitdirectory attribute set.

Value

A string containing the path of the file relative to the ancestor directory the user selected.

Example

In this example, a directory picker is presented which lets the user choose one or more directories. When the change event occurs, a list of all files contained within the selected directory hierarchies is generated and displayed.

HTML

<input type="file" id="filepicker" name="fileList" webkitdirectory multiple /><output id="output"></output>
output { display: block; white-space: pre-wrap;}

JavaScript

const output = document.getElementById("output");const filepicker = document.getElementById("filepicker");filepicker.addEventListener("change", (event) => { const files = event.target.files; for (const file of files) { output.textContent += `${file.webkitRelativePath}\n`; }});

Result

Specifications

Specification
File and Directory Entries API
# dom-file-webkitrelativepath

Browser compatibility

BCD tables only load in the browser

See also

File: webkitRelativePath property - Web APIs | MDN (2024)

FAQs

File: webkitRelativePath property - Web APIs | MDN? ›

The webkitRelativePath read-only property of the File interface contains a string which specifies the file's path relative to the directory selected by the user in an <input> element with its webkitdirectory attribute set.

How to get the relative path of a file in JavaScript? ›

The path. relative() method is used to find the relative path from a given path to another path based on the current working directory. If both the given paths are the same, it would resolve to a zero-length string.

How to get full path of uploaded image in JavaScript? ›

  1. window.addEventListener("load", function() {
  2. document.getElementById("file-upload").onchange = function(event) {
  3. var reader = new FileReader();
  4. reader.readAsDataURL(event.srcElement.files[0]);
  5. var me = this;
  6. reader.onload = function () {
  7. var fileContent = reader.result;
  8. console.log(fileContent);
Oct 5, 2013

What is Webkitdirectory? ›

webkitdirectory is a property that reflects the webkitdirectory HTML attribute and indicates that the <input> element should let the user select directories instead of files.

What is a file object in JavaScript? ›

Represents a file in the local file system in a platform-independent manner. All properties and methods resolve file system aliases automatically and act on the original file unless otherwise noted.

What is webkitRelativePath in JavaScript? ›

The webkitRelativePath read-only property of the File interface contains a string which specifies the file's path relative to the directory selected by the user in an <input> element with its webkitdirectory attribute set.

How to find the relative path of a file? ›

Relative file paths start with ./ , followed by the path to the local file. Follow the steps below to link to a file on the web using a relative path: Step 1: Ensure that the file you want to link to exists on the same server as the HTML file you're working with.

How to get the absolute path of a file in js? ›

js, you can use the __filename variable to get the absolute path to the current script file, and __dirname to get the absolute path to the directory containing the current script. Here's an example: Copied! console.

How to get the current path in JavaScript? ›

If you're using JavaScript in the browser you can get the full current URL by using window. location. href .

What is the difference between relative path and absolute path? ›

Absolute paths always start with the root directory and provide the full path to the file or directory. For example, the absolute path to the home directory of a user named "waqas" would be "/home/waqas". On the other hand, a relative path is a path to a file or directory that is relative to the current directory.

How to open a directory in JavaScript? ›

To open a directory, call showDirectoryPicker() , which returns a promise with the picked directory.

How to select folder path in HTML? ›

To get the full file path in IE browser, we could enable the security setting in Internet Explorer (open Internet Options, select Security tab, click the "Custom level...", enable the "Include local directory path when uploading files to a server" option and click OK button to save the change), after that we could use ...

How do I open a directory? ›

The "cd" command is used to change directories in the Windows command prompt. Type "cd" followed by a space, but do not press Enter just yet. Type the address of the folder after the space and press ↵ Enter . You'll need to include every folder and sub-folder the folder is located in.

How do you add properties to a file in JavaScript? ›

To add a new property to an object, you can use dot notation or bracket notation in JavaScript. object['property'] = value; Replace object with the name of the object you want to add the property to, property with the name of the new property, and value with the value you want to assign to the property.

How to read a file object in JavaScript? ›

The main methods:
  1. readAsArrayBuffer(blob) – read the data in binary format ArrayBuffer .
  2. readAsText(blob, [encoding]) – read the data as a text string with the given encoding ( utf-8 by default).
  3. readAsDataURL(blob) – read the binary data and encode it as base64 data url.
  4. abort() – cancel the operation.
Apr 9, 2020

How to read a text file in JavaScript? ›

There are four inbuilt methods in the FileReader API to read local files:
  1. readAsArrayBuffer(): Reads the contents of the specified input file. ...
  2. readAsBinaryString(): Reads the contents of the specified input file. ...
  3. readAsDataURL(): Reads the contents of the specified input file.
Nov 24, 2023

How to get directory from file path in JavaScript? ›

A path can be passed to the path. dirname() function to get the working directory of the path. A full path to the current file is provided in the _filename module.

How to get the URL path from JavaScript? ›

If you're using JavaScript in the browser you can get the full current URL by using window. location. href .

How to get absolute path of a file in JavaScript? ›

An absolute path in JavaScript is the full path starting from the root of the operating file system up until the working directory. So let's say you run your javascript app in /Users/dannysteenman/home/projects/example-project/src/index.

How to get the root path of an application in JavaScript? ›

To simply access the app's root path, use the module as though it were a string:
  1. var appRoot = require('app-root-path'); var myModule = require(appRoot + '/lib/my-module. js'); ...
  2. var reqlib = require('app-root-path'). ...
  3. // In app.js global. ...
  4. var myModulePath = require('app-root-path'). ...
  5. path. ...
  6. path.
Aug 16, 2022

Top Articles
Latest Posts
Article information

Author: Prof. Nancy Dach

Last Updated:

Views: 6629

Rating: 4.7 / 5 (77 voted)

Reviews: 92% of readers found this page helpful

Author information

Name: Prof. Nancy Dach

Birthday: 1993-08-23

Address: 569 Waelchi Ports, South Blainebury, LA 11589

Phone: +9958996486049

Job: Sales Manager

Hobby: Web surfing, Scuba diving, Mountaineering, Writing, Sailing, Dance, Blacksmithing

Introduction: My name is Prof. Nancy Dach, I am a lively, joyous, courageous, lovely, tender, charming, open person who loves writing and wants to share my knowledge and understanding with you.