How do I get a string from a file path? - reactjs

I have a file path in my react website and want to get the contents from that file.
I have tried the fs readFile but it just gives me TypeError: Object(...) is not a function. I'm not sure that's the way to go.
I have done some searching but I'm very new to react and javascript so I haven't found anything.
Here's my code
import { readFile } from "fs";
...
readFile("../../../" + filePath,'utf8').text}
where ""../../../" + filePath" is a relative path to the markdown file I want.
I expect the readFile() to return just a string that looks something like
Hello!
This is **markdown** text
in one string but right now it just gives me the error I gave above as soon as it's run.

The fs object exists in Node.js, and React is a browser framework. You can't read a file from the filesystem in the browser - that would be a security problem.
Instead, you probably want to issue an XMLHttpRequest to fetch the content from the server at which point you can manipulate the content in the browser context.

You can't open a file in javascript that runs on browser's side. This will be a security issue, coz everyone will be able to write scripts which will get all the files from the user's filesystem and push them on some server.
The readFile() directive comes from nodejs, so if you have a nodejs server which represents the backend than you will have the posibility to open/read and write to file.

Related

problem when read files from local computer in pyscript

When I run the Python file, the file works correctly, but when I run the Python file with the script, it gives an error in read txt file(file not found).
how can i solve this problem؟
Software written in any language (Python, JavaScript, WASM) cannot access local files directly. This is a browser security restriction. The browser can access files on behalf of your application using the <input type="file"> DOM element link.
In Python and JavaScript, you must provide the user with a file input selector. The user selects the file and your application can the retrieve the file data from the browser.
In JavaScript this functionality is implemented with the FileReader class. This class can be used in Python via the create_proxy() function to proxy event callbacks.
If you are just getting started with Pyscript, I have written a number of articles link.
See this issue report.
Code running in a webpage is sandboxed and can't freely access files on the computer hosting the browser.
(It would be a terrible security problem if just visiting a webpage would give the author of the page access to your files).
If you want to access a file on the user's computer, use <input type="file"> and have the user select it. I don't know if you can access it directly or if you would need to use a JavaScript FileReader and then pass the results from JS to PyScript … but one of those two approaches should be possible.

Call a locally hosted server from Expo

I have followed this great blog post: How to call a locally hosted server from Expo?
However I get stuck at the next step:
The above command will return a URL accessible across Internet of the form https://application-mock-server.localtunnel.me. This URL can be plugged inside the React Native code base and will be accessible from the application running inside Expo on the mobile.
I have tried to figure out how to "plug the localtunnel URL inside the React Native code base". I thought that it would be "homepage" in "package.json", but so far no luck. Can you please help?
Never mind. I haven't noticed this "tunnel" option until now, which does the trick.
You need to specify that URL where you are sending API request. If you have not created a separate file, you can create apiConfig.js file or any similar named file and export that URL from the file and reference where ever you need to call the backend API.

Using print-js with react

I'm new to React Js and i'm trying to print a file from a url using printJS.
My intention is to access the DB and get a url of pdf file to print, and then print it (without opening a new page if possible).
For testing, after returning with the url i'm just trying to print a local file and not the url given from the db(I assume there might problematic due to security issues, CORS, etc.)
After importing the library into the project i'm trying to do:
printJS('path/to/file/a.pdf');
I don't get any error, and it seems nothing happens, except this warning:
Resource interpreted as Document but transferred with MIME type application/pdf: "blob:http://localhost:3000/18bdc43e-6b53-47ea-91e4-bb62ad76dcc6".
The file exists and when i'm using the url bar and putting path/to/file/a.pdf, i'm able to access the pdf.
https://github.com/crabbly/Print.js/issues/176
Looks like you need to use a domain url instead of a local file path.

capture and save string to local file

I have a very simple app with which I want to capture a string and save it to a file within the app directory. Is it possible to use $http to post/put to a file within the app tree similar to how you'd get static files like views?
Thanks
C
Use HTML5 filesystem API. Example here.

Is there anything wrong with using html files without the ".html" extension?

I was wondering if there is anything wrong with using html and php files without extensions.
For example, if I was to upload a file with an extension, I would get to by using a URL like this:
http://yoursite.com/randompage.html
If I used a file without an extension, I would use a URL like this:
http://yoursite.com/randompage
I know that this can't be the preferred method because it leaves the file without a way to be identified, but is there anything that would stop the site from working properly?
What you want to do is done with url-rewriting .
Basically, you will add a rewrite rule to your web server, so when he receives a request for url yoursite.com/randompage he will change it to yoursite.com/randompage.html. You will find a lot of examples on the web if you google for "mod_rewrite examples" or "url rewrite examples".
Document types are sent from the webserver in http headers, so it is perfectly possible to do what you are asking.
For instance when using Apache, to tell it that any file with no extension is html, in the 'conf' file you can say:
DefaultType text/html
More details at Apache The Definitive Guide
This point to concrete document (randompage.html in this case):
http://yoursite.com/randompage.html
This point to default document in directory:
http://yoursite.com/randompage/
Default document is set in you webserver. This could be for example: index.html, default.html, index.php, default.apsx,...

Resources