Opening certain files in certain folders in a HTML page - html

I am trying to learn a bit about web technologies therefore I am trying to create a catalogue for my files.
The situation is the following:
I have a folder with N sub folders;
in each of there sub folders there is an image with always the same name (ie: image.jpg)
in each of there sub folders there is also a certain swg file with always the same name (ie: test.swg)
I would like to create an HTML file which read all the sub folders and create a preview using image.jpg, and when one clicks on the preview test.swg should be launched (not in the browser if possible)
The HTML files should contains all these preview like a catalogue.
How can I do this? should I have a local web server which runs in my machine? is it possible to do this with non web page technologies?
Thank you!

As far as i know Javascript & HTML doesn't have access to the filesystem as it's running on your browser and shouldn't be possible to go through the files iteratively because it would be some kind of breach in security.
If you ask me it's possible or not without a server, it should be possible but it is going to use other technology, for example:
Using a Command Line Interface in Linux or Windows based os you could write a shell script that iteratively will go through the files and folder path, and possibly create a JSON from it. From there the javascript could technically load that file like below.
<script type="text/javascript" src="data.json"></script>
<script type="text/javascript" src="javascript.js"></script>
But do note that you should periodically run the shell script periodically with something like scheduler or refresh it manually.
If you want to do it the normal way you could use many different server side language, for example NodeJs, or PHP as I think both of them require only little configuration.
You could post follow up question if you've decided on which language you want to use.
Below is some reference that you can use to start working on reading the directories
NodeJS
Node.js fs.readdir recursive directory search
Get all files recursively in directories NodejS
PHP
List all the files and folders in a Directory with PHP recursive function
How to recursively iterate through files in PHP?
After reading the directories & Files you just need to pass the data to the "rendering" part, and use some javascript to invoke the .swg when the image is clicked
But I'm not really sure about the .swg file can be invoked to the desktop app directly or not you could do some research on it
Open online file with desktop applications?

Related

Flutter render downloaded html

I have an elearning APP in Flutter, which can render html files stored online. Now I want to download these files to assets, so they may be accessed offline. For this, I will download a zipped file with the entire html's folder and unzip it.
The problem is the html has many subfolders with it's own assets, which I would have to declare in the pubsp.yaml in order to access, but these downloadable htmls are constantly being added (every new course has new files).
I see a few ways to solve the problem:
Somehow declare access to subfolders in the pubsp.yaml.
As far as I know, this cannot be done.
Update the folder access for the installed APP dynamically.
As far as I know, this cannot be done.
Read the html file without unziping it.
I don't know if this is doable (I'm using webview_flutter_plus to render) and weather it would allow access to files in folders inside the zip without declaring them in the .yaml.
Pre-load empty folders inside assets that would mimic the html folder structure, declare them in the .yaml and then unzip and read the htmls from these folders. I would create some 100 of them in order to accomodate a large number of course downloads.
I believe this method would work, but it seems very cumbersome and inelegant.
So my questions are:
Would any of methods 1-3 work and if so how?
Would method 4 work?
Is it possible to reference folders in the .yaml file without them existing? It would make method 4 far easier.
Is there any other way to accomplish this? I cannot change the language, since the APP is months along, but plugins are fair game.
Thanks in advance!

Generating .html file from template engine

My aim is to create some html files (about 30, preferably via CLI) that are identical except for some arbitrary variables to be replaced in the url of links and scripts sources.
I wish I could automate the file creation process but I'm still struggling with the structure.
My first idea was to use Mustache or Handlebars and save the HTML output to file. It's possible with those tools? Are there any more suitable tools or methods?
Ideal for me would be to create files via node and CLI
Any suggestions are welcome.

ReactJS link to local HTML file from different folder/project

I'm using ReactJS to build a site, and I want to create a link (a href="relativepath") to a local HTML file so that when the user clicks on the link, it'll open up the html page. The local file is in a different folder X outside of the project, and I don't want to upload it into my src folder because the html file depends on a lot of other files in X. Is there a good way to do so?
I also want to upload a different local HTML file that is already within the src folder of my React App. I currently have something like this:
import htmlFile from "../links/htmlFile.html"; export default function Something(props) { return (<a href={htmlFile}></a>)}
and it says in my terminal that
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <html>| | <head> >
I already tried adding in webpack + an htmlLoader, but I think I followed the steps incorrectly as I wasn't able to get it to work. I uninstalled those packages, so I'm now back to square one.
Thank you so much!
Just linking to or importing from a local file in some other location won't work unless those local files are also deployed to the server in the same location relative to the app (and the web server has access to that location).
So you'll need to copy the file and its linked dependencies in a folder that will be deployed along with your react build, but not where it'll get treated as part of the react codebase so webpack will try to compile it (so not in src either).
If you used create-react-app to set up your application, for example, this would be the public folder; other webpack setups may use different names but the general concept is the same.

Import files into a directory on a HTML document

I am wondering if I can have a webpage where I can tell it to grab my file and put it in a directory, such as: "http://example.ex/folder". Meaning the file I provided is put into the "folder" folder.
Overall process:
Button says: "Import file"
I select a file, and my file is "text.txt"
It takes my file "text.txt" and adds it to the local system/directory of the website.
You can do this using JQuery File Upload and then adding a backend service that captures the file and saves it.
For example, here is a repository that has a basic Python (Flask) server integrated with JQuery File Upload that will take an uploaded file and place it on the server:
https://github.com/ngoduykhanh/flask-file-uploader
I'd put the rest of the code here, but it is a lot - and requires HTML, JavaScript and a back-end language (like Python).
Here is the documentation on JQuery File Upload: https://github.com/blueimp/jQuery-File-Upload
As a word of caution, DO NOT TRUST ANYTHING UPLOADED TO YOUR SERVER. Meaning, do not put it out on the open internet without some sort of authentication or checks in place to make sure only files you intend are uploaded. Otherwise, people will find it and upload scripts turning your device into a Bitcoin miner, spam relay, or bot host.
Instead of doing it this way, why not use SFTP to upload it to your server to host? At least that way you can lock down access.

Is there any way to fill in Sharepoint entries via parsing text file?

My workplace has a whole bunch of unannotated .zip files that need to be uploaded to the new file server (Windows). I've used perl to parse through through the excel files within the .zip files to create an annotation.txt file for each .zip file that contains information about the .zip file. I have 1000's of zip files and do not want to manually enter in information for each entry if there's a way to automate it. I am proficient in perl and mysql, and wondering if there is any way to utilize my skillsets to port this information into the Microsoft Sharepoint website.
Thank you in advance for any advice or suggestions.
There a many, many ways to meet your requirement.
You could write a event receiver to parse the files once uploaded and set metadata.
A better approach for your use case might be to write a .NET based console application and reference Microsoft.SharePoint.Client and then upload your files using the Client side object model (CSOM) and set the metadata during that process as outlined here: Upload a document to a SharePoint list from Client Side Object Model
There are also REST and ASMX webservices that you could call from a non .NET runtime process.
Plenty of options, pick the one that fits your needs and skills best.