Forem: Mike

HTML to PDF Documents with BoltonSea API

Mike — Tue, 20 Jan 2026 19:21:52 +0000

An overview regarding HTML-to-PDF document conversion and form creation capabilities.

While Microsoft Word serves as a primary word processor, its PDF export functionality often fails to preserve complex fillable form fields. While Adobe Acrobat Pro remains the industry standard for creating interactive PDFs, these features require a premium subscription.

Original article here 👉 [Link Here]

HTML Document

As an alternative, website forms can be built using HTML and CSS. Furthermore, the BoltonSea file management system (version 4.0) now supports the conversion of HTML code into both standard and interactive PDF documents.

HTML to PDF Creation - Example Scenario

This article's example is based on the scenario to create a rental agreement. By utilizing HTML to PDF conversion, you can create professional, fillable documents suitable for notarization and legal use. Please find the drafted agreement in HTML below for your review.

Test HTML to PDF Creation via BoltonSea API

You can also refer to the quick Docker Image installer guide available at [Link to Guide] for additional details.

HTML to PDF

API Endpoint: http://localhost:9200/media/document/html_to_pdf_template

Request Body
The complete HTML body is present at the bottom of this article.

{
"media_group_id":"1",
"file_name":"rent_renewal",
"html_content":"<div>Empty WebPage HTML .... </div>"
}

Response Body Response with the URL of the created 'PDF document'.

{
    "id": 1,
    "width": 0,
    "height": 0,
    "maintain_aspect_ratio": false,
    "is_parent_file": false,
    "mime_type": "application/pdf",
    "private_url": "http://localhost:9200/media/file/1/2026/01/pviucoc525r9i4ro176893530770996561.pdf",
    "public_url": "http://localhost:9200/media/file/1/2026/01/pviucoc525r9i4ro176893530770996561.pdf",
    "original_file_name": "rent_renewal.pdf",
    "file_size": 5818,
    "created_on": "2026-01-20T18:55:07.707+00:00"
}

PDF File Preview

Renewal Service Agreement - HTML Content

<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\" />\n    <style>\n        @page land {\n            size: landscape;\n        }\n\n        @page port {\n            size: portrait;\n        }\n\n        body {\n            page: port;\n        }\n\n        .header {\n            text-align: center;\n        }\n\n        .brand a {\n            text-decoration: none;\n        }\n\n        h1 {\n            font-weight: 500;\n        }\n\n        .main_container {\n            page: port;\n            font-family: sans-serif;\n            width: 17.06cm;\n\n            padding: 16px;\n            margin: 0 auto;\n\n            margin-top: 32px;\n        }\n\n        .content-container {\n            margin-top: 32px;\n            gap: 10px;\n        }\n\n        .content {\n            margin-top: 5px;\n            border: 1px solid #e4e4e4;\n            border-radius: 3px;\n        }\n\n        .content-title {\n            width: auto;\n            color: whitesmoke;\n            font-weight: 200;\n            background-color: #3e6667;\n            padding: 10px;\n        }\n\n        .form-group {\n            padding: 5px;\n        }\n\n        td {\n            padding: 5px;\n        }\n\n        input[type=\"text\"],\n        input[type=\"number\"] {\n            width: 200px;\n            padding: 3.5px;\n            border: 1px solid green;\n            border-radius: 5px;\n        }\n\n        .signature_line {\n            height: 60px;\n            border: 1px solid black;\n            border-radius: 3px;\n        }\n\n        .signature_line,\n        #signature_label {\n            width: 360px;\n            margin-top: 15px;\n            margin-left: auto;\n            /* justify-self: right; */\n        }\n\n        #signature_label {\n            color: #5d5d5d;\n            font-style: italic;\n            text-align: center;\n            font-size: 14px;\n            padding: 5px;\n            width: calc(360px - 5px);\n        }\n    </style>\n</head>\n\n<body>\n    <div class=\"main_container\">\n        <div class=\"header\">\n            <div>\n                <div class=\"brand\" style=\"align-content: center\">\n                    <a href=\"https://boltonsea.com\">\n                        <img src=\"https://s3.us-east-1.amazonaws.com/io.boltonsea.com/dev/logo/2025/boltonsea_logo2.png\" style=\"width: 250px; margin: 0 auto\" />\n                    </a>\n                </div>\n\n                <div>\n                    <h1>Renewal Service Agreement</h1>\n                </div>\n            </div>\n\n            <div style=\"text-align: left\">\n                <span>Agreement Date: January 6, 2025</span>\n            </div>\n        </div>\n\n        <div class=\"content-container\">\n            <div class=\"content\">\n                <div class=\"content-title\">\n                    <strong>Business Center Address:</strong>\n                </div>\n\n                <table>\n                    <tr>\n                        <td>180 Northfield Drive West</td>\n                    </tr>\n                    <tr>\n                        <td>(Unit 4)</td>\n                    </tr>\n                    <tr>\n                        <td>Waterloo, Ontario</td>\n                    </tr>\n                    <tr>\n                        <td>Canada</td>\n                    </tr>\n                </table>\n            </div>\n\n            <div class=\"content\">\n                <div class=\"content-title\">\n                    <strong>Client Address </strong>\n                </div>\n\n                <form>\n                    <table>\n                        <tr>\n                            <td>Company Name</td>\n                            <td>\n                                <input type=\"text\" class=\"form-control\" id=\"company_name\" />\n                            </td>\n                        </tr>\n                        <tr>\n                            <td>Contact Name</td>\n                            <td>\n                                <input type=\"text\" class=\"form-control\" id=\"contact_name\" />\n                            </td>\n                        </tr>\n                        <tr>\n                            <td>Address</td>\n                            <td>\n                                <input type=\"text\" class=\"form-control\" id=\"address\" />\n                            </td>\n                        </tr>\n                        <tr>\n                            <td>Phone Number</td>\n                            <td>\n                                <input type=\"number\" class=\"form-control\" id=\"phone\" />\n                            </td>\n                        </tr>\n                        <tr>\n                            <td>Email</td>\n                            <td>\n                                <input type=\"text\" class=\"form-control\" id=\"email\" />\n                            </td>\n                        </tr>\n                    </table>\n                </form>\n            </div>\n        </div>\n\n        <div>\n            <div class=\"content-title\">\n                <strong>Renewal Payment Details</strong>\n            </div>\n\n            <div class=\"content-container\">\n                <div>\n                    <table>\n                        <tr>\n                            <td>Type of Service:</td>\n                            <td>Rent</td>\n                        </tr>\n                        <tr>\n                            <td>Service Discount:</td>\n                            <td>50%</td>\n                        </tr>\n                        <tr>\n                            <td>Monthly Price:</td>\n                            <td>$0.5</td>\n                        </tr>\n                    </table>\n                </div>\n\n                <div class=\"signature_line\"></div>\n                <div id=\"signature_label\">Client Signature and Date (dd/mm/yyyy)</div>\n            </div>\n        </div>\n    </div>\n</body>\n\n</html>

Tools

Docker File Server (BoltonSea - Community Plan)

Video Streaming for Multi-Screen Size Responsive Performance

Mike — Mon, 22 Dec 2025 13:39:23 +0000

I write to share a strategy for optimizing website video streaming performance, particularly on mobile devices and variable screen sizes.

The goal is to improve user experience, reduce data consumption, and minimize performance bottlenecks.

Original article here 👉 [Link Here]

The Problem

High-quality, large video files (e.g., a 30-minute, 300mb video) create several issues:

High Data Consumption: Browsers must fully download the large file, which quickly depletes a user's mobile data plan.
Slow Playback Initiation: Users experience a delay while the entire file downloads before the video can begin to stream.
Performance Bottlenecks: Processing large media files requires significant memory, which can slow down the performance of the user's device.

Solutions

An approach that combines responsive video compression with file segmentation.

Versioned Video Responsive Compression

This strategy involves generating multiple compressed versions of a video, each optimized for different screen sizes (e.g., mobile, tablet, and desktop). This ensures the device only downloads the resolution appropriate for its display, directly addressing the performance issues associated with non-optimized, high-quality files.

Segmentation of Large Video Files

Videos should be broken down into small, manageable segments (chunks), with a corresponding playlist file to manage them.

Playlist File: This is a file that lists multiple media files (or segments) for playback by a media player.
For a 30-minute (1,800-seconds) video, using 10-second segments would result in 180 segments. If the total file size is 300mb, each segment would be approximately 1.67mb.

Example of an MPEG (.m3u8) Playlist File with segment (.ts) media files
**File Name:* playlist_1280x720p.m3u8

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:4
#EXT-X-MEDIA-SEQUENCE:1
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:3,
video_track_1280x720p_6_00001.ts
#EXTINF:3,
video_track_1280x720p_6_00002.ts
#EXTINF:3,
video_track_1280x720p_6_00003.ts
#EXTINF:3,
video_track_1280x720p_6_00004.ts
#EXTINF:3,
video_track_1280x720p_6_00005.ts
#EXTINF:3,
video_track_1280x720p_6_00006.ts
#EXTINF:3,
video_track_1280x720p_6_00007.ts
#EXTINF:3,
video_track_1280x720p_6_00008.ts
#EXTINF:1,
video_track_1280x720p_6_00009.ts
#EXT-X-ENDLIST

The web browser would sequentially download each small segment only as needed while playing. This method allows for immediate playback and significantly reduces initial download time and data consumption.

Advanced Responsiveness

The most comprehensive and optimized solution is to combine these two strategies: Generate a master playlist of Compressed, Segmented Videos.

This involves creating separate segmented playlists for each screen size (e.g., a segmented playlist for mobile, one for tablet, and one for desktop). These individual playlists are then aggregated into a single master playlist.

This system allows the browser on any device to play the master playlist and automatically select the most suitable resolution and segment based on the device type, screen size, and Internet (network) speed, ensuring the fastest, most optimal viewing experience for every device type.

Example of a Master Playlist File with screen-size specific playlists
File Name: master_playlist.m3u8

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-INDEPENDENT-SEGMENTS
#EXT-X-STREAM-INF:BANDWIDTH=667612,AVERAGE-BANDWIDTH=508186,CODECS="avc1.64001e,mp4a.40.5",RESOLUTION=480x270,FRAME-RATE=59.940
playlist_480x270p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2183596,AVERAGE-BANDWIDTH=1099733,CODECS="avc1.64001f,mp4a.40.5",RESOLUTION=640x360,FRAME-RATE=59.940
playlist_640x360p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=4853046,AVERAGE-BANDWIDTH=2730357,CODECS="avc1.640020,mp4a.40.5",RESOLUTION=960x540,FRAME-RATE=59.940
playlist_960x540p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=7945434,AVERAGE-BANDWIDTH=4125547,CODECS="avc1.640020,mp4a.40.5",RESOLUTION=1280x720,FRAME-RATE=59.940
playlist_1280x720p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=11649009,AVERAGE-BANDWIDTH=7825004,CODECS="avc1.64002a,mp4a.40.2",RESOLUTION=1920x1080,FRAME-RATE=59.940
playlist_1920x1080p.m3u8

Should you have any inquiries or have questions, post your comments below.

AI to Match Qualified Candidates with Job Postings

Mike — Fri, 14 Nov 2025 15:55:02 +0000

Our current hiring process involves manually reviewing resumes from various platforms to match candidates with job descriptions. This is inefficient given the high volume of applications.

My Proposal

I propose developing an AI workflow to automate this initial screening. The system would match candidates' experience, education, and skills against job requirements, providing hiring managers with a pre-vetted list of qualified candidates. This would streamline the hiring process significantly.

Workflow Components:

Job Board: A full-stack application designed to serve both job seekers (users) and hiring managers.
Content Management System: A system, such as Boltonsea, to effectively manage and organize candidate resumes.
AI Engine: An integration with a large language model provider (e.g., DeepSeek, OpenAI) for intelligent features.

This outlines the process an applicant undergoes when applying for a position on our job board. Upon submitting their resume, which details their experience, education, and skills, a candidate record is created within our database. The original resume document, whether in MS Word or PDF format, is then securely stored in our Content Management System (CMS) for convenient access.

Furthermore, each candidate's resume link (resume URL) is forwarded to our AI engine layer to train or retrain our existing AI model. For optimal efficiency, every resume is first converted into a Markdown format, from which only the essential information is extracted and utilized for training purposes.

This streamlined system is designed to benefit the Hiring Manager by optimizing the job application review process and identifying only the most qualified candidates.

AI Training Script (Python Snippet)

Convert PDF to Markdown

# Processing resume: self.file_path
docling_doc = self.converter.convert(self.file_path).document

# 🔄 Converting to markdown format
text = docling_doc.export_to_markdown()

# ✅ Conversion complete
metadata = {
    "source": self.file_path,
    "format": "resume",
}

yield LCDocument(page_content=text, metadata=metadata)

Train AI Model


def train_resume(resume_url: str):
    OPENAI_API_URL = "https//OPEN_URL"
    index_path = f"{resume_url}_faiss_index"

    # 🔤 Initializing embedding model
    embeddings = HuggingFaceEmbeddings(
        model_name="sentence-transformers/all-MiniLM-L6-v2"
    )

    # ✅ Embedding model initialized
    if os.path.exists(index_path):
        print("📦 Loading existing vector store...")
        vectorstore = FAISS.load_local(
            index_path, embeddings, allow_dangerous_deserialization=True
        )
        # ✅ Vector store loaded
    else:
        # 💫 No existing index found. Creating new one...

        loader = DoclingResumeLoader(resume_url)
        documents = loader.load()

        print("\n📄 Splitting document into chunks...")
        text_splitter = RecursiveCharacterTextSplitter(
            chunk_size=1000, chunk_overlap=200, separators=["\n\n", "\n", " ", ""]
        )
        splits = text_splitter.split_documents(documents)
        print(f"✅ Created {len(splits)} chunks")

        print("\n📦 Building vector store and creating embeddings...")
        vectorstore_start = time.time()
        vectorstore = FAISS.from_documents(splits, embeddings)
        vectorstore_time = time.time() - vectorstore_start
        print(f"✅ Vector store built in {vectorstore_time:.2f} seconds")

        print(f"💾 Saving vector store to {index_path}")
        save_start = time.time()
        vectorstore.save_local(index_path)
        save_time = time.time() - save_start
        print(f"✅ Vector store saved in {save_time:.2f} seconds")

    retriever = vectorstore.as_retriever(search_type="mmr", search_kwargs={"k": 5})
    print("✅ Vector store ready")

    print("\n🤖 Connecting to local language model...")

    llm = ChatOpenAI(
        model="local-model",
        openai_api_base=OPENAI_API_URL,
        openai_api_key="not-needed",
        temperature=0,
    )

    template = """You are a helpful assistant answering questions about the resume: {book_name}.
    Use the following context to answer the question: {context}
    Question: {question}
    Answer the question accurately and concisely based on the context provided."""

    prompt = PromptTemplate(
        input_variables=["book_name", "context", "question"], template=template
    )

    # ✨ System ready! Total setup took
    return ConversationalRetrievalChain.from_llm(
        llm=llm,
        retriever=retriever,
        return_source_documents=True,
        combine_docs_chain_kwargs={
            "prompt": prompt,
            "document_variable_name": "context",
        },
    )

Ask A.I. "The Question"

Question: Who qualifies for this job with {{description}}

trained_model = train_resume(args.url)
chat_history = []

print("\n Ready to answer questions \n")
print("Type 'quit!' to exit")

while True:
    question = input("\n Ask a question: ")
    if question.lower() == "quit!":
        break

    print("\n ... Processing ... \n")
    result = trained_model.invoke(
        {
            "question": question,
            "chat_history": chat_history,
            "book_name": os.path.basename(args.resume_path),
        }
    )

    print_result(result)
    chat_history.append((question, result["answer"]))

Tools & Dependency

requirements.txt

  langchain-core==0.3.28
  langchain-text-splitters==0.3.4
  langchain_huggingface==0.1.2
  docling==2.14.0
  langchain_community==0.3.13
  langchain_openai==0.2.14
  langchain==0.3.13
  faiss-cpu==1.9.0

Installation: pip install -r requirements.txt

Job Portal (NextJS): Superio is suitable for you to show professional job board websites that require high advanced features to powerful functions and useful services for users
BoltonSea (CMS): BoltonSea is a content management system that offers services related to files, media management and streaming with an APIs and a dashboard UI
Docling (Open Source Document Processing for AI): Docling simplifies document processing with advanced PDF understanding, OCR support, and seamless AI integrations. Parse PDFs, DOCX, PPTX, images & more

References:

Guide: Integrate a Self-Hosted File Server with Your Web Page

Mike — Sat, 08 Nov 2025 18:00:37 +0000

When building an application (frontend or backend) that requires file management, developers typically face two choices: build a custom feature or purchase an enterprise management service.

Building a complete file management system or Content Management System (CMS) can be a significant time investment, especially when several robust, premium enterprise solutions already exist. However, while paying for an existing enterprise solution seems easier, the pricing tiers often become a major consideration.

This tutorial guide will offer developers an alternative by walking through how to quickly integrate a self-hosted file management application with a ReactJS application.

To follow along with this tutorial, you should have:

Docker Engine installed
Working knowledge of JavaScript and ReactJS
General web development experience

Download Self-Hosted File Server (Free)

Here are the steps for setting up your self-hosted, Docker-based file server using the free BoltonSea Community Service.

Please follow these steps to deploy the service. You can also refer to the quick installer guide available at [Link to Guide] for additional details.

Pull/download the BoltonSea Community Service Image from DockerHub
- docker pull boltonsea/cms_api:latest
Verify the Image Download
- docker images boltonsea/cms_api
Run the container, exposing the service on port 9080 of your host machine (mapping to port 9200 on the container).
- docker run -d --name myBoltonSeaCMS -p 9080:9200 boltonsea/cms_api

Our File Service now Live

The file service is available here: http://localhost:9080
Test an endpoint (via Chrome Browser): http://localhost:9080/organizations/1

Create the React Application

We will begin by creating the base React application using the following commands:

npx create-react-app my-app
cd my-app

Install Dependencies and Start the UI

npm install ajv --save-dev
npm start

The command terminal should display the following output, confirming successful compilation and providing the local access details:

Compiled successfully!

You can now view file-upload-app in the browser.

 Local:            http://localhost:3000
 On Your Network:  http://192.168.4.31:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

Now, let's test our react UI. It should look like this

Integrate with File Service API

To begin the UI integration process, please set up the necessary files:

Navigate to the my-app/src folder.
Create the file named lib.js within that directory.

This is the template of the lib.js file.

// ---------------- DEFAULT CONSTANT DECLARATIONs  ----------------

const organizationId = 1;
const mediaGroupId = 1;

// ------ Endpoint to our docker-based BoltonSea File Server ------

const FILE_SERVER_ENDPOINT = "http://localhost:9080";
const UPLOAD_ENDPOINT = `${FILE_SERVER_ENDPOINT}/media`;
const MEDIA_GROUP_ENDPOINT = `${FILE_SERVER_ENDPOINT}/mediagroup/${mediaGroupId}/content`;

// ----------------------------------

// function to upload files into the filer_server
export async function uploadFile(file) {
… …
}

// function to get files from the filer_server
export async function fetchData() {
… …
}

const mediaGroupContent = (content) => {
… …
}

We can see that there are three helper method function definitions here.

This method helps upload files to the file-server
function uploadFile(file)

This method helps fetch the list of files from the file-server
function fetchData()

This is a helper method to extract an API requests output
const mediaGroupContent = (content)

Copy the full content of the lib.js file.

// ---------------- DEFAULT CONSTANT DECLARATIONs  ----------------

const organizationId = 1;
const mediaGroupId = 1;

// ---------------- Endpoint to our docker-based BoltonSea File Server ----------------

const FILE_SERVER_ENDPOINT = "http://localhost:9080";
const UPLOAD_ENDPOINT = `${FILE_SERVER_ENDPOINT}/media`;
const MEDIA_GROUP_ENDPOINT = `${FILE_SERVER_ENDPOINT}/mediagroup/${mediaGroupId}/content`;

// --------------------------------------------------------------------

export async function uploadFile(file) {
  // Create an object of formData
  const formData = new FormData();

  // Update the formData object
  formData.append("media_group_id", mediaGroupId);
  formData.append("account_id", organizationId);
  formData.append("file", file);

  try {
    const response = await fetch(UPLOAD_ENDPOINT, {
      method: "POST",
      body: formData,
    });

    if (response.ok) {
      alert("File uploaded successfully!");
      window.location.reload();
    } else {
      console.error("File upload failed:", response.statusText);
      alert("File upload failed!");
    }
  } catch (error) {
    console.error("Error during file upload:", error);
    alert("An error occurred during file upload.");
  }
}

export async function fetchData() {
  let result = [];
  try {
    const response = await fetch(MEDIA_GROUP_ENDPOINT); // Replace with your API URL
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    result = await response.json();
    result = mediaGroupContent(result.content);
  } catch (error) {
    console.error("Error Getting Response");
  }

  return result;
}

const mediaGroupContent = (content) => {
  content = content.filter((item) => item != null);
  return content.map((mediaItem) => {
    let type = "document";

    if (mediaItem?.mime_type?.includes("image")) {
      type = "image";
    }
    mediaItem["type"] = type;

    return mediaItem;
  });
};

Please follow these steps to update the application files:

Navigate to App.js

Update App.js:
- Copy the contents.
- Navigate to the App.js file and paste the copied contents into the file.
- Refresh the user interface (UI).

Refresh the UI

import { useEffect, useState } from "react";
import { uploadFile, fetchData } from "./lib";

import logo from "./logo.svg";
import "./App.css";

let file_ = null;

function App() {
  const [mediaList, setMediaList] = useState([]);

  useEffect(() => {
    fetchData()
      .then(setMediaList)
      .catch((e) => console.error("An error occured!", e));
  }, []);

  const handleChange = async (e) => {
    file_ = e.target.files[0];
  };

  const uploadAction = async (e) => {
    e.preventDefault();

    if (file_) {
      await uploadFile(file_);
      file_ = null;
    }
  };

  return (
    <div className="App">
      <div id="page_title">
        <img src={logo} className="App-logo" alt="logo" height={100} />
        <h1>Document Management Dashboard</h1>
      </div>

      <div id="upload-component" className="container">
        <div className="input-group">
          <input
            type="file"
            onChange={handleChange}
            className="form-control"
            id="fileInput"
            aria-describedby="uploadButton"
            aria-label="Upload"
          />
          <button
            className="btn btn-outline-primary"
            type="button"
            id="uploadButton"
            onClick={uploadAction}
          >
            Upload
          </button>
        </div>
      </div>

      <div id="media_list" className="container text-center">
        <div className="row">
          {mediaList?.map((item, i) => (
            <div key={i} className="col-12 col-sm-6 col-lg-4">
              <div className="media_item">
                {item.type === "image" && (
                  <img src={item.public_url} alt={item.original_file_name} />
                )}

                <div>
                  <a target="_blank" rel="noreferrer" href={item.public_url}>
                    {item.original_file_name}
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default App;

Navigate to App.css
- Copy the contents of the methods.
- Navigate to the App.css file and paste the copied contents into the file.
- Refresh the user interface (UI).

Refresh the UI

@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css");

body {
  background-color: white;
  font-family: "Roboto", sans-serif;
}
h1 {
  color: #444;
  text-align: center;
}

button {
  background-color: #6161d4;
}

/* ------- Other Components ------- */

#page_title {
  margin: 6rem;
  text-align: center;
}

#upload-component {
  margin: 3rem auto;
  max-width: 50rem;
}

#media_list {
  padding: 1rem 2rem;
  background-color: #f8f8f8;
}

.media_item {
  height: 15rem;
  overflow: scroll;
  margin: 1.5rem 1rem;
  border-radius: 5px;
  align-content: center;
  background-color: #fff;
  box-shadow: 0 0 5px #ccc; /* A black shadow, offset, blurred, and semi-transparent */
}

.media_item img {
  max-height: 80%;
  margin-bottom: 1em;
}

Live Test Our File-Service UI Dashboard

We need to conduct a test of our File Service using the Dashboard interface.

Please upload a few test files directly through the Dashboard UI and then verify that they can be successfully retrieved afterward. This will help us confirm that the upload and retrieval processes are functioning correctly.

Here is what my Dashboard looks like 👇 after my file uploads through the Dashboard.

Tools

Docker File Server (BoltonSea - Community Plan)
DashBoard (React APP)

Happy Coding!