Get file path using React - javascript

Background
I have written a terminal-based installer for my application in Python and now I am trying to build a web-based GUI for the installer in React that users will run locally, i.e., I will distribute the web app as part of the package. I want my GUI to save the user-defined paths to a file that my Python backend will then read.
What I tried
I tried using <input type="file"/>, but this simply gives me the name of the file. I then searched for other solutions but I read that browsers don't allow access to the file system for security reasons. I also read that I can use Electron to access the file system, so this is my plan B.
The bottom line
Is it possible for a user to specify a file path in the web app using a browse-box widget (so without actually typing it in) in React without using Electron? If so, how?

Related

Is it possible to scrape a form from an electronjs app that's based off from a url?

I'm trying to scrape off a user input from an application created with electron. I basically used the url to create the electron application in hopes to make an executable and use the following user inputs to tackle an issue with internet connectivity with the native application.
I have the source files for the original application but with me creating the electron application with just a url, i wouldn't have these files on the project. Is it possible for me to scrape user inputs without the original source files and just with basically an index.js in electron?
I Used various libraries and had a look around the html files by looking at developer mode etc, as well as trying to experiment by mixing with the source code, but didn't get any form of results that I needed.

How to change xml value in local project file with javascript

I have a web project that I made with HTML-Javascript. I want to use the XML file (in local project folders) in this web project in javascript. Then I want to make a few changes in this XML file and overwrite the same xml file again. How can I do that?
JavaScript runs in the browser and is isolated from the local system. So the usual way is to upload/download the file. However here are several possibilities.
A small server application
Develop and start a small server application for example with node.js. The server part will provide the file system access.
Use a wrapper
A more advanced version of the previous solution, you encapsulate the web application using a wrapper like Electron.
File System Access API
Use the File System Access API available in some of the new Chromium based browsers.

React Native - How to open my application when click on file from local device

I am using React Native and Expo.
I have file with unique extension (For example: SomeFileName.xxx) and it contains some text.
I want when I try to open this file from the device, it will open the application (Android/IOS) and I need read the content of the file.
How can I do that?
It really depends what is the extension of the file!,
And it also depends upon where the file is saved.
Everything is possible in react-native-cli but in Expo it comes with very limited possibilities,
Expo does have a file-system api that allows you to access local files on device!,You can read/write any file to local directories of device!.
Here's the doc for file system:-
https://docs.expo.io/versions/latest/sdk/filesystem/
Thanks!.

Modify a local file with Javascript

I must make a local app with an interface. This app should load text files, modify them, and save them.
I made the interface with html/css/js, and the core of the app was made with js only.
Currently, I load the file with an input, but to save it, the browser makes me download it. I know this is a security measure.
This app is not going to be put online.
My question is : what can I do to replace directly the loaded file by the new one ?
Can I use my app (html/css/js) without a browser ?
Is there a browser that allows me to edit my local files directly ?
Is there any solution I can't think of ? Using another language to communicate with the js maybe ?
Thanks.
If you don't need your app to be online, with Electron you can make an executable using your existing code (you will have change how you're going to save the file using Electron APIs).
Being a program running on your system, you'll be able to save directly on the file system.
JS in the browser is not able to edit local files, because of security.
If you want to, you can use Node.js, a Desktop/Server Framework, which uses JS.

Loading Files From A Local Folder

I have been working on a HTML/JavaScript program which requires to be downloaded on to you local computer. I am wanting the program to load .mp3 files form the users music folder and display it. How can I do this locally without PHP.
For security reasons,
All the popular browsers does not let you load files from the local computer by default, unless the user select the file (or drag and drop it) on the browser (html5 example here).
Also, the browsers do not let you see a folder's content so that you know the files inside it.
In order to have full access to the file system with javascript, you need something else.
Web App as a computer app
For now, the best way to build a computer application using Web technologies (HTML, Javascript, CSS), is either NW.js or Electron
NW.js
From their github
NW.js is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.
You can start by building your code as a NW.js app (Getting started doc on their github)
Electron
Form their page
If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.
Node.js
You can use Node.js 's API for file system access (fs doc)

Categories

Resources