Working without a database?

[beniroquai]

Hey @Saifullah-dev, thanks a lot for making this beautiful code open-source! It looks gorgeous! May I ask you if the backend could also work without the mongodb database? I could write my own backend I'm assuming, but maybe you have a switch in the softare already! Thanks!

[Saifullah-dev]

Hey @Saifullah-dev, thanks a lot for making this beautiful code open-source! It looks gorgeous! May I ask you if the backend could also work without the mongodb database? I could write my own backend I'm assuming, but maybe you have a switch in the softare already! Thanks!

Hi @beniroquai , thank you so much for your kind words. I'm glad you're finding this project useful 🙌

Yes, you may use any Database and backend language combination for it, you just need to follow the file structure as shown in the Readme.md.
MongoDB with Node.js is just an example implementation here.

I'm also planning on adding relational DB like postgreSQL implementation.

[beniroquai]

Hey, thanks for your help! I have created a little fastapi to mimic the file-backend. I guess I'm missing something.I don't see any sub-folders nor files inside the basefolders:

from fastapi import FastAPI, UploadFile, File, HTTPException, Form, Query
from pydantic import BaseModel
from typing import List
import os
import shutil
from fastapi.responses import FileResponse
import zipfile
import uvicorn
from fastapi.middleware.cors import CORSMiddleware
from fastapi import HTTPException
from pathlib import Path
from typing import Optional

# add cors, all origins
app = FastAPI()
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# Base upload directory
BASE_DIR = Path("./")
BASE_DIR.mkdir(parents=True, exist_ok=True)

# Pydantic Model for folder creation
class CreateFolderRequest(BaseModel):
    name: str
    parentId: str | None = None  # Optional parent folder

# 📁 Create a Folder
@app.post("/folder")
def create_folder(request: CreateFolderRequest):
    """
    Create a folder using JSON payload.
    """
    # Resolve folder path
    parent_path = request.parentId or ""
    folder_path = os.path.join(BASE_DIR, parent_path, request.name)

    # Check if folder already exists
    if os.path.exists(folder_path):
        raise HTTPException(status_code=400, detail="Folder already exists")

    # Create folder
    try:
        os.makedirs(folder_path, exist_ok=True)
        return {"message": f"Folder '{request.name}' created successfully", "path": folder_path}
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

class FileSystemItem(BaseModel):
    name: str
    isDirectory: bool
    path: str
    size: int = None
    mimeType: str = None


# Utility: List files/folders
def list_items(base_path: Path):
    items = []
    for item in base_path.iterdir():
        items.append({
            "name": item.name,
            "isDirectory": item.is_dir(),
            "path": str(item.relative_to(BASE_DIR)),
            "size": item.stat().st_size if item.is_file() else None,
        })
    return items


# 📂 Get All Files/Folders
@app.get("/")
def get_items(path: str = ""):
    directory = BASE_DIR / path
    if not directory.exists():
        raise HTTPException(status_code=404, detail="Path not found")
    return list_items(directory)



# ⬆️ Upload a File

@app.post("/upload")
def upload_file(file: UploadFile = File(...), target_path: Optional[str] = Form("")):
    """
    Upload a file to the specified target directory.
    - `file`: The file being uploaded.
    - `target_path`: The relative path where the file should be uploaded.
    """
    # Resolve target directory
    upload_dir = BASE_DIR / target_path
    upload_dir.mkdir(parents=True, exist_ok=True)  # Create directory if it doesn't exist

    # Save the uploaded file
    file_location = upload_dir / file.filename
    with open(file_location, "wb") as buffer:
        shutil.copyfileobj(file.file, buffer)

    return {"message": f"File '{file.filename}' uploaded successfully", "path": str(file_location)}

# 📋 Copy File(s) or Folder(s)
@app.post("/copy")
def copy_item(source: str = Form(...), destination: str = Form(...)):
    src = BASE_DIR / source
    dest = BASE_DIR / destination / src.name
    if not src.exists():
        raise HTTPException(status_code=404, detail="Source not found")
    if dest.exists():
        raise HTTPException(status_code=400, detail="Destination already exists")
    if src.is_dir():
        shutil.copytree(src, dest)
    else:
        shutil.copy2(src, dest)
    return {"message": "Item copied successfully", "destination": str(dest)}


# 📤 Move File(s) or Folder(s)
@app.put("/move")
def move_item(source: str = Form(...), destination: str = Form(...)):
    src = BASE_DIR / source
    dest = BASE_DIR / destination / src.name
    if not src.exists():
        raise HTTPException(status_code=404, detail="Source not found")
    shutil.move(src, dest)
    return {"message": "Item moved successfully", "destination": str(dest)}


# ✏️ Rename a File or Folder
@app.patch("/rename")
def rename_item(source: str = Form(...), new_name: str = Form(...)):
    src = BASE_DIR / source
    new_path = src.parent / new_name
    if not src.exists():
        raise HTTPException(status_code=404, detail="Source not found")
    src.rename(new_path)
    return {"message": "Item renamed successfully", "new_path": str(new_path)}


# 🗑️ Delete File(s) or Folder(s)
@app.delete("/")
def delete_item(paths: List[str]):
    for path in paths:
        target = BASE_DIR / path
        if not target.exists():
            raise HTTPException(status_code=404, detail=f"Path '{path}' not found")
        if target.is_dir():
            shutil.rmtree(target)
        else:
            target.unlink()
    return {"message": "Item(s) deleted successfully"}


# ⬇️ Download File(s) or Folder(s)
@app.get("/download")
def download_file(path: str = Query(...)):
    target = BASE_DIR / path
    if not target.exists():
        raise HTTPException(status_code=404, detail="File/Folder not found")
    if target.is_file():
        return FileResponse(target, filename=target.name)
    # If it's a folder, zip it and send
    zip_path = target.with_suffix(".zip")
    with zipfile.ZipFile(zip_path, "w") as zipf:
        for root, _, files in os.walk(target):
            for file in files:
                full_path = Path(root) / file
                zipf.write(full_path, arcname=full_path.relative_to(target.parent))
    return FileResponse(zip_path, filename=zip_path.name)


uvicorn.run(app, host="localhost", port=3000)

Ideally I would see files and can download them. So far I have this:

Also files are getting uploaded to the base-folder always

[Saifullah-dev]

Can you share the response of your files array so that I can have a better idea of the issue here?
I guess there is some issue with the path of your files/folder.

/Documents means, Document folder is located in the root directory.

Similarly, /Documents/Fav means, Fav is the sub folder of Documents.

Let me know if this helps. Thanks.

PS. sorry for the late reply, I didn't get any notification of your reply for some reason 😭

[beniroquai]

No worries at all! Thanks for helping me out! @Saifullah-dev
The files-array (I'm assuming coming from the / endpoint give this:

[
  {
    "name": "New Folder",
    "isDirectory": true,
    "path": "New Folder",
    "size": null
  },
  {
    "name": ".DS_Store",
    "isDirectory": false,
    "path": ".DS_Store",
    "size": 8196
  },
  {
    "name": "frontend",
    "isDirectory": true,
    "path": "frontend",
    "size": null
  },
  {
    "name": "LICENSE",
    "isDirectory": false,
    "path": "LICENSE",
    "size": 1073
  },
  {
    "name": "test",
    "isDirectory": true,
    "path": "test",
    "size": null
  },
  {
    "name": "release.config.cjs",
    "isDirectory": false,
    "path": "release.config.cjs",
    "size": 80
  },
  {
    "name": "backend",
    "isDirectory": true,
    "path": "backend",
    "size": null
  },
  {
    "name": "README.md",
    "isDirectory": false,
    "path": "README.md",
    "size": 17485
  },
  {
    "name": "public",
    "isDirectory": true,
    "path": "public",
    "size": null
  },
  {
    "name": ".gitignore",
    "isDirectory": false,
    "path": ".gitignore",
    "size": 363
  },
  {
    "name": ".github",
    "isDirectory": true,
    "path": ".github",
    "size": null
  },
  {
    "name": "string",
    "isDirectory": true,
    "path": "string",
    "size": null
  }
]

If you know a little bit of python, you can give the file above a shot. It's a simple fastapi backend. Maybe I'm missing something here.

So for Documents/Fav I should provide this as a subfolder in the / endpoint?

The fastapi/swagger looks like this:

[Saifullah-dev]

Everything looks fine except for the path structure.
You'll have to add / at the start of the path. You can either store it into Database like this when creating/uploading folders/files or format the path when responding to the get items API request.
I'll recommend storing it that way (with / in start) into the Database if you don't have a specific requirement for path.

I haven't worked with the python unfortunately but this is how your path format should be:

[
  {
    "name": "New Folder",
    "isDirectory": true,
    "path": "New Folder",  // Should be "/New Folder"
    "size": null
  },
]

[beniroquai]

Cool, this did it:

def list_items(base_path: str):
    items = []
    for root, dirs, files in os.walk(base_path):
        for name in dirs + files:
            item_path = os.path.join(root, name)
            items.append({
                "name": name,
                "isDirectory": os.path.isdir(item_path),
                "path": os.path.relpath(item_path, BASE_DIR),
                "size": os.path.getsize(item_path) if os.path.isfile(item_path) else None,
            })
    return items

Clicking on a jpeg does not give a previw yet. Backend or frontend issue? ;-)

[Saifullah-dev]

You'll need to pass filePreviewPath prop to the FileManager component as described in the Readme.

And In the screenshot attached, I can see that you're trying to view a .js file which isn't supported yet.

Also, note that files should also have a / at start of the path e.g. /frontend/src/index.js.

[beniroquai]

Hey @Saifullah-dev I think I made some progress. However, when I want to download a file the filepath is still empty (undefined) and nothing gets downloaded. May I kindly ask you how the download path is defined and which part of the API has to provide it / receives it? It looks as follows:

Thanks!! I'm really excited it almost works! :-) (Preview of files is working! Yay! Thanks.

[Saifullah-dev]

Thanks!! I'm really excited it almost works! :-) (Preview of files is working! Yay! Thanks.

@beniroquai that's great! :)

--

Hey @Saifullah-dev I think I made some progress. However, when I want to download a file the filepath is still empty (undefined) and nothing gets downloaded. May I kindly ask you how the download path is defined and which part of the API has to provide it / receives it?

You don't have any id for the file/folder objects, how are you managing file operations like copy, move etc. without it?

I can see that having an id in the File object isn't mentioned in the Readme.md, which can be confusing (Will update it).
Actually, you can have any number of other properties along with the required ones (i.e. name, path, isDirectory).

[
  {
    name: "New Folder",
    path: "/New Folder",
    isDirectory: true,
    // Other metadata you may want to have 
  }
]

--

Here is the implementation guide for handling file downloads.

Frontend:

const handleDownload = async (files) => {
  if (files.length === 0) return;

  try {
    const fileQuery = files.map((file) => `files=${encodeURIComponent(file._id)}`).join("&");
    const url = `${import.meta.env.VITE_API_BASE_URL}/download?${fileQuery}`;

    const link = document.createElement("a");
    link.href = url;

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } catch (error) {
    return error;
  }
};

<FileManager
  // Other props...
  onDownload={handleDownload}
/>

Backend(Node.js): API for Download request

You can use the above API implementation as an example to handle file downloads in your python app.
This includes:

• Single File/Folder download.
• Mutiple Files/Folders download (Zipped with the folder structure maintained).

PS. I would really appreciate if you could contribute your python implementation example to this repo. Your contribution could be a huge help for others in the community who prefer Python!