Free to use folder/file structures to image utility

I need to write documentation for my customers. And more than once it requires an explanation of some kind of folder structure. What you usually see are screen captures of Windows or Apple filebrowsers. Or even worse, some artwork with lines created with the keyboard.

In this website I have a shortcode that does this for me.

This was created with the following code:

[folder]
o root
+o first folder
+^ second folder
++. first_file.jpg
++. second_file.docx
[/folder]

Now there is a free utility

The documentation I write usually comes in a PDF format (and sometimes on paper as well). So I thought let's make a utility that combines what I already have and described above, with the possibility to convert it into an image for downloading or use in a website that doesn't support shortcodes with Markdown.

The utility is accessible on www.folder2image.com and it is free to use.

Licensed material

Fontawesome icons

The icons used are from the free to use and no attribution required Fontawesome Free edition. I have included version 4, 5 and 6. You can choose the solid and open icons.

Bootstrap icons

I have also included the Bootstrap icons, which are also free to use, even in commercial presentations.

htmlcanvas utility

I convert the images in JavaScript with the library html2canvas is created by Niklas von Hertzen which is licensed under the MIT License.

How I did this?

Backend is PHP with Laravel

The backend is a Laravel 11 PHP backend server (kind of overkill) with a mysql database. I have this Laravel implementation available for other utilities as well, but for this utility I use it to generate the homepage view with twig. I am not to comfortable with Blade, which is default in Laravel.

No catch, just an easy-to-use utility

I use middleware to retrieve the client IP-address and I use a external free to use webservice to get geo information with the found IP-address. I am not saving anything that relates to a user of the utility, other than the IP-address. I am not using any external analytics software. The purpose is simply to offer a easy-to-use utility and to see where in the world users are accessing and using it. No further catch here.

The structure with all the styles included is processed on the server to convert into a Twig partial that is send back to the browser.

Frontend is HTML and vanilla JavaScript

I am not using jQuery or any other library like ReactJS. The page is driven by a single vanilla JavaScript class/object.

Some settings entered in the frontend are saved in cookies, like colors and font used. When the browser cache is not cleaned, these settings will be reloaded when accessing the utility again.

Disclaimer

This utility has been written with the intensive use of AI (OpenAI). I recommend any developer who has some hesitation to use AI on own initiative to embrase it as a serious help virtually sitting next to you. A few functions I had included in no time, thanks to AI. I use the Mindmac AI client on an Apple Mac.

The software quality was not first priority, and there is some work in progress.

The frontend

1. Folder structure

Here you enter your own structure. The sample in (2) Sample Structure can be copied into the folder structure field by pressing (3) Copy Sample Structure. This might give you a headstart.

4. Generated Structure

At the moment you start entering a structure in *(1), the contents in this field will be presented in the final format with icons. When you press the Generate Image button, an image snapshot is placed in (5) Generated Image. This should be exactly the same as the output presented in (4)**.

5. Download Image

By pressing the Download Image button a file in png format will be downloaded to your local harddrive. The name of the file downloaded can be modified. Default value is folder-contents, but in (7) Icon Font and Output you change the name of the file, before downloading.

6. Colors

You can change the background and foreground colors in this section Colors. The modified colors are kept in a cookie which will be used when reloading this utility.

When clicking a color a default color selecter is presented. To modify how you want to enter the color, mark the smal modifier (see image). By clicking this modifier you can change the values the colorpicker accepts.

7. Icon Font and Output

In this dialog you can select the icon font. I have limited it to 3 versions of Fontawesome icons and Bootstrap icons. Initially I had a version prepared where a custom font could be entered, but that created for the initial version too much validation for a successful result.

8. Characters

Here you can modify the characters used for a structure. It gives you a way of customizing your own structure. This setting is not saved in a cookie and on reload it wil have the original values.