Opening Files

Learn all the ways to open and load Markdown files in MarkView

MarkView provides multiple convenient methods to open and view your Markdown files. Choose the method that best fits your workflow.

Methods to Open Files

Upload Button

The upload button provides a traditional file picker interface for selecting Markdown files.

1. Locate the Upload Button

   In the left sidebar, you’ll find an upload button (upward arrow icon) at the top of the interface.

2. Click to Select Files

   Click the upload button to open your system’s file picker dialog.

3. Choose Files

   Select one or multiple Markdown files (.md or .markdown extensions).

   You can select multiple files at once by holding Ctrl (Windows/Linux) or Cmd (Mac) while clicking.

4. View Your Files

   Once loaded, your files will appear in the sidebar file list. Click any file to view its contents.

The upload functionality is implemented using Tauri’s native dialog plugin:

// From app/page.tsx:595-610
const handleFileInput = async (e: React.ChangeEvent<HTMLInputElement>) => {
  try {
    const selected = await open({
      multiple: true,
      filters: [{ name: 'Markdown', extensions: ['md', 'markdown'] }]
    });
    if (selected) {
      const paths = Array.isArray(selected) ? selected : [selected];
      for (const path of paths) {
        await loadFileFromPath(path);
      }
    }
  } catch {
    handleFileUpload(e.target.files);
  }
};

Drag and Drop

The fastest way to open files is by dragging them directly into the MarkView window.

1. Select Files in File Explorer

   Open your system file explorer and navigate to your Markdown files.

2. Drag Files into MarkView

   Select one or more .md or .markdown files and drag them directly into the MarkView application window.

   You can drag files from any location on your computer - desktop, file explorer, or even other applications.

3. Drop to Load

   Release your mouse button while hovering over the MarkView window. The files will be automatically loaded and appear in the sidebar.

Drag and drop is handled at the application level and works anywhere in the window:

// From app/page.tsx:647-667
const handleDrop = (e: React.DragEvent) => {
  e.preventDefault();
  const items = e.dataTransfer.items;
  if (items) {
    const droppedFiles: File[] = [];
    for (let i = 0; i < items.length; i++) {
      const item = items[i];
      if (item.kind === 'file') {
        const file = item.getAsFile();
        if (file) droppedFiles.push(file);
      }
    }
    if (droppedFiles.length > 0) {
      handleFileUpload(droppedFiles);
    }
  }
};

Folder Upload

Load an entire directory of Markdown files at once with the folder upload feature.

1. Click the Folder Button

   In the left sidebar, click the folder button (folder icon with plus sign) next to the upload button.

2. Select a Directory

   Choose a folder containing Markdown files from your system’s directory picker.

3. Automatic Loading

   MarkView will automatically scan the directory and load all .md and .markdown files it finds.

   Only files in the root level of the selected directory are loaded. Subdirectories are not recursively scanned.

4. Browse Your Files

   All loaded files will appear in the sidebar, organized alphabetically.

The folder upload uses Tauri’s directory selection dialog:

// From app/page.tsx:612-623
const handleFolderInput = async (e: React.ChangeEvent<HTMLInputElement>) => {
  try {
    const selected = await open({
      directory: true,
    });
    if (selected && typeof selected === 'string') {
      await loadFolderFromPath(selected);
    }
  } catch {
    handleFolderUpload(e.target.files);
  }
};

The Rust backend handles directory reading:

// From src-tauri/src/lib.rs:43-69
#[tauri::command]
fn read_markdown_dir(path: String) -> Result<Vec<FileData>, String> {
    let mut files = Vec::new();
    let path = Path::new(&path);
    if path.is_dir() {
        if let Ok(entries) = fs::read_dir(path) {
            for entry in entries.flatten() {
                let entry_path = entry.path();
                if entry_path.is_file() {
                    if let Some(ext) = entry_path.extension() {
                        if ext == "md" || ext == "markdown" {
                            if let Ok(content) = fs::read_to_string(&entry_path) {
                                let name = entry_path
                                    .file_name()
                                    .unwrap_or_default()
                                    .to_string_lossy()
                                    .into_owned();
                                files.push(FileData { name, content });
                            }
                        }
                    }
                }
            }
        }
    }
    Ok(files)
}

Command Line

Open files directly from your terminal when launching MarkView.

1. Open Terminal

   Navigate to the directory containing your MarkView executable or add it to your system PATH.

2. Run with File Arguments

   Pass file or directory paths as command-line arguments:

   Single File

   ./markview README.md
   
3. Automatic Launch

   MarkView will launch and automatically load all specified files or directories.

See Command Line Usage for detailed CLI documentation.

Supported File Types

MarkView accepts the following file extensions:

• .md - Standard Markdown files
• .markdown - Alternative Markdown extension

Files with other extensions will be ignored, even if they contain Markdown content.

File Management

Duplicate Prevention

MarkView automatically prevents duplicate files from being loaded:

// From app/page.tsx:446-450
setFiles(prev => {
  const existingNames = new Set(prev.map(f => f.name));
  if (existingNames.has(fileData.name)) return prev;
  return [...prev, newFile];
});

If you try to load a file that’s already open, MarkView will skip it silently.

File Identification

Each loaded file gets a unique ID to handle files with the same name:

// From app/page.tsx:442
const newFile: MarkdownFile = {
  id: `${fileData.name}-${Date.now()}-${Math.random()}`,
  name: fileData.name,
  content: fileData.content,
};

Empty State

When no files are loaded, MarkView displays a helpful empty state with instructions:

No Files Loaded

Upload files, a folder, or drag and drop markdown files here

This empty state appears in the main content area and provides visual guidance for getting started.

Next Steps

Navigation

Learn how to navigate between files and use the search features

Command Line

Master the CLI interface for power users