Javascript local file directory

How to get local folder contents using JavaScript

It was determined that certain files are unsafe for access within a Web application, or that too many calls are being made on file resources How can I get images in a local folder and show these images as HTML? For more info refer to this article : https://www.html5rocks.com/en/tutorials/file/filesystem/#Reading a directory’s contents Question: I’d like to show in my Java application all files inside of a folder, like the windows explorer do.

How to get local folder contents using JavaScript

I am trying to get local folder contents using JavaScript. I have tried the Filesystem API, but I got error like this:

DOMException: It was determined that certain files are unsafe for access within a Web application, or that too many calls are being made on file resources

How can I get images in a local folder and show these images as HTML? Folder structure and images inside a folder are changing dynamically.

Edit: I tried the filesystem here: https://github.com/maciel310/angular-filesystem

FileSystem API is currently being supported only on Chrome and Opera http://caniuse.com/#feat=filesystem

Also you need to obtain permissions from the user to access peristent data.

For more info refer to this article : https://www.html5rocks.com/en/tutorials/file/filesystem/#Reading a directory’s contents

Displaying HTML content via Javascript, One of the primary uses of JavaScript is to manipulate the DOM — i.e. to display HTML. Start with a basic guide to JavaScript and DOM manipulation. – Dan Blows. Jun 6, 2012 at 11:42. 1. That code uses jQuery to manipulate the DOM, but you can do it with simple Javascript. Read up on it and you will be able to …

How to show folder content / explorer in java

I’d like to show in my Java application all files inside of a folder, like the windows explorer do.

I’d like to create a GUI like this:

There you can see, that all folders and files of a path are listed.

Does anyone has a good solution for that?

Try listing the files usibng the method from the file class:

Example:

 final File[] x = new File("C:\\").listFiles(); for (final File file : x)

Not sure how exactly you want to show them but here is one way:

public void listFilesForFolder(final File folder) < for (final File fileEntry : folder.listFiles()) < if (fileEntry.isDirectory()) < listFilesForFolder(fileEntry); >else < System.out.println(fileEntry.getName()); >> > final File folder = new File("/home/you/Desktop"); listFilesForFolder(folder); 

Props to: Read all files in a folder

In case you are building a GUI I would suggest using a File Chooser: https://docs.oracle.com/javase/tutorial/uiswing/components/filechooser.html

Try ApacheIO for this. With minimum code you can achieve it.

 Class: FileUtils Method: iterateFiles(File directory, String[] extensions, boolean recursive) Allows iteration over the files in a given directory (and optionally its subdirectories) which match an array of extensions. iterateFilesAndDirs(File directory, IOFileFilter fileFilter, IOFileFilter dirFilter) Allows iteration over the files in given directory (and optionally its subdirectories). 

JavaScript Examples, The following JavaScript section contains a wide collection of JavaScript examples. The examples are categorized based on the topics, including objects, functions, arrays, DOM, and many more. Many of these program examples contain multiple approaches to solve the problem. Introduction to JavaScript. …

How to display the contents of a directory

I need to write a recursive algorithm to display the contents of a directory in a computer’s file system but I am very new to Java. Does anyone have any code or a good tutorial on how to access a directory in a file system with Java??

You can use the JFileChooser class, check this example .

Optionally you can also execute native commands like DIR , ls using java , here is an example

This took me way too long to write and test, but here’s something that should work.

Note: You can pass in either a string or file.

Note 2: This is a naive implementation. Not only is it single-threaded, but it does not check to see if files are links, and could get stuck in an endless loop due to this.

Note 3: The lines immediately after comments can be replaced with your own implementation.

import java.io.*; public class DirectoryRecurser < public static void parseFile(String filePath) throws FileNotFoundException < File file = new File(filePath); if (file.exists()) < parseFile(file); >else < throw new FileNotFoundException(file.getPath()); >> public static void parseFile(File file) throws FileNotFoundException < if (file.isDirectory()) < for(File child : file.listFiles()) < parseFile(child); >> else if (file.exists()) < // Process file here System.out.println(file.getPath()); >else < throw new FileNotFoundException(file.getPath()); >> > 

Which could then be called something like this (using a Windows path, because this Workstation is using Windows):

public static void main(String[] args) < try < DirectoryRecurser.parseFile("D:\\raisin"); >catch (FileNotFoundException e) < // Error handling here System.out.println("File not found: " + e.getMessage()); >> 

In my case, this prints out:

because said directory is just one I made up. Otherwise, it prints out the path to each file.

Check out apache commons vfs: http://commons.apache.org/vfs/

// Locate the Jar file FileSystemManager fsManager = VFS.getManager(); FileObject jarFile = fsManager.resolveFile( "jar:lib/aJarFile.jar" ); // List the children of the Jar file FileObject[] children = jarFile.getChildren(); System.out.println( "Children of " + jarFile.getName().getURI() ); for ( int i = 0; i

If you need to access files on a network drive, check out JCIFS: http://jcifs.samba.org/

public class Main < public static void main(String[] argv) throws Exception < >public static void visitAllDirsAndFiles(File dir) < System.out.println(dir); if (dir.isDirectory()) < String[] children = dir.list(); for (int i = 0; i < children.length; i++) < visitAllDirsAndFiles(new File(dir, children[i])); >> > > 

How to read all files in a folder from Java?, The method Files.walk (path) will return all files by walking the file tree rooted at the given started file. Files.walk (Paths.get («folder»)) .filter (Files::isRegularFile) .forEach (System.out::println); folder\file1.txt folder\file2.txt folder\subfolder\file3.txt folder\subfolder\file4.txt.

How do I display folder contents on webpage?

My question is a bit confusing, but I would like to display imgaes from a folder within a folder.

Here is my page I’m working on, see those blocks? I want to automatically take images from subfolders and list them in the style of those blocks. I can handle the styling part myself really, but is there an easy way to do this?

I’m very new to web automation and I have no idea how to go about this.

php has a read directory class built in.

 /* This is the WRONG way to loop over the directory. */ while ($entry = readdir($handle)) < echo "$entry\n"; >closedir($handle); > ?> 

Show loader below content Code Example, When table data is being loaded on the div, the loader is visible. After the data is loaded, the loader disappears and then the data is visible. preloader load after the page is loaded. add show loading on entire page. show div until page fully loaded. show loader below content. add overlay loading javascript html.

Источник

The Javascript API to Access a User’s Local Files

Historically, when working with frontend Javascript, it has not been possible to write or edit files on a user’s computer. The justification around this was that it was more secure to prevent direct access to a user’s file from the internet.

The new File System API changes that, and creates a secure way for us to change, edit and add files on a user’s computer. That means we can finally write to a user’s computer from a frontend Javascript file, as long as they give us permission.

How does it work?

There are three key functions we can use with the file systems API:

• window.showSaveFilePicker — which allows us to save a file to a users computer, which we then have read/write access to.
• window.showOpenFilePicker — which allows us to open an existing file on a users computer, which we can then read/write to.
• window.showDirectoryPicker — which gives us access to a directory, which we can then read/write to.

These are all async compatible functions, so we can wait for a user’s response to each before proceeding. If they respond by giving access via the browsers dialog boxes, then we can use the response to write directly to the users disc.

An Example using showSaveFilePicker

Let’s look at an example. Below, we have a button which when the user clicks, will open a save file dialog. This dialog has a default suggested file name of ‘My First File.txt’.

let saveFile; document.getElementById('someButton').addEventListener('click', async () =>   try   saveFile = await window.showSaveFilePicker(  suggestedName: 'My First File.txt'  >);  const file = await saveFile.getFile();  const contents = await file.text();  > catch(e)   console.log(e);  > >); 

Using await saveFile.getFile() , we can get the file after it is created. Then, we can get its current contents using file.text() . Of course, since this file was just created, it will be empty.

Since we have our file, if it exists, saved in the saveFile variable, we can access it elsewhere. For example, we may use a textarea to update the file’s content:

document.getElementById('add-text').addEventListener('keyup', async(e) =>   if(typeof saveFile !== "undefined")   if ((await saveFile.queryPermission()) === 'granted')   const writable = await saveFile.createWritable();  await writable.write(document.getElementById('add-text').value);  await writable.close();  >  > >); 

To summarise what we’ve done here:

• First, we check if saveFile is defined.
• Then, we check if permission has been ‘granted‘ to this file.
• Then we write the value of the textarea to the file using writable.write() .
• Finally, we use writable.close() to end our writing.

With showOpenFilePicker instead

Sometimes, you don’t want to save a file — you want to open one that exists already. The primary purpose of these functions is to request user permission to get access to their files. As such, showOpenFilePicker has similar functionality to showSaveFilePicker .

If you need to open a file rather than save it, you can replace the save function with showOpenFilePicker to allow users to open existing files.

A Save File Demo

Below is a demo of what we’ve described so far. Click the button to create a file, and then type into the textarea. If you check the file on your computer, you’ll see it has been updated.

Note, at the time of writing this, this demo will only work in the latest versions of Chrome and Edge.

Once the file is created, as you type in this textarea, it will automatically save to your disc.

An example with showDirectoryPicker

Let’s look at another example, this time with directories. In this example, a user will select a directory.

let directory; document.getElementById('addToFolder').addEventListener('click', async () =>   try   directory = await window.showDirectoryPicker(  startIn: 'desktop'  >);  for await (const entry of directory.values())   let newEl = document.createElement('div');  newEl.innerHTML = `strong>$entry.name>strong> - $entry.kind>`;  document.getElementById('folder-info').append(newEl);  >  > catch(e)   console.log(e);  > >); 

The above will allow the user to select a directory, which we will then have access to. We will then show a list of all the files within that folder using the for loop we’ve defined above.

Creating Files and Folders

Now with access to this directory, we can create a file or directory using either getDirectoryHandle() or getFileHandle() :

// Creates a file let newFile = directory.getFileHandle('newFile.txt',  create: true >); // Creates a directory let newFile = directory.getDirectoryHandle('myNewDirectory'); 

We can also delete files and directories from directories we have access to. To do that, we simply do:

// Deletes a folder, recursively (i.e. it will delete all within it as well) directory.removeEntry('Some Directory',  recursive: true >); // Deletes a file directory.removeEntry('SomeFile.html'); 

A Directory Access Demo

When you click the button below, it will list all files and folders within your selected directory. So expect a lot of rows if you have a lot of files.

Note, again, this will only work in the latest versions of Edge and Chrome.

Now that we have access to the directory, click below to create a file inside of it.

Support

Since this is a new piece of technology, support varies from browser to browser. For Blink based browsers, support is quite broad:

Conclusion

The File Access API is a game changer. It allows us to have pure frontend web applications alter and edit files, which opens up all sorts of avenues for new applications.

We hope you’ve enjoyed this article. See below for some useful links:

More Tips and Tricks for Javascript

Источник