@startupjs-ui/file-input 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,22 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/file-input
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **docs:** support static web bundling (each route as a separate html page) ([5e4738c](https://github.com/startupjs/startupjs-ui/commit/5e4738c50157ae37e14d8dc36cb43d6a45a008ad))
+* **file-input:** refactor FileInput component ([ab87527](https://github.com/startupjs/startupjs-ui/commit/ab87527a6a9dba34b3106034cc33d311f88f8e93))
+* **file-input:** update example ([e019ed2](https://github.com/startupjs/startupjs-ui/commit/e019ed26886d7b7e9d499e76e3c1eca802864774))

package/README.mdx

@@ -0,0 +1,82 @@
+import { useState } from 'react'
+import { $, useSub } from 'startupjs'
+import FileInput, { _PropsJsonSchema as FileInputPropsJsonSchema } from './index'
+import Div from '@startupjs-ui/div'
+import Avatar from '@startupjs-ui/avatar'
+import Span from '@startupjs-ui/span'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# FileInput
+
+FileInput lets users pick a file (or image) and upload it to your StartupJS backend. The `value` is a `fileId` pointing to a document in the `files` model.
+
+```jsx
+import { FileInput } from 'startupjs-ui'
+```
+
+## Basic usage
+
+```jsx example
+const [fileId, setFileId] = useState()
+return (
+  <FileInput
+    value={fileId}
+    onChange={setFileId}
+  />
+)
+```
+
+## Image picker
+
+```jsx
+const $avatarFileId = $()
+const $file = useSub($.files[$avatarFileId.get() ?? '__DUMMY__'])
+return (
+  <Div gap>
+    <Span>Your avatar:</Span>
+    {
+      $avatarFileId.get()
+        ? <Avatar src={$file.getUrl() + '?' + $file.updatedAt.get()}>{name}</Avatar>
+        : <Span italic>No avatar uploaded</Span>
+    }
+    <FileInput
+      image
+      value={$avatarFileId.get()}
+      onChange={fileId => $avatarFileId.set(fileId)}
+    />
+  </Div>
+)
+```
+
+**Note:** the trick with appending `?` and `updatedAt` timestamp to the URL is optional. It might be needed in some cases (like on the page of changing the profile picture of a user) to force reloading the image after it has been changed, otherwise the cached version may be shown in the browser.
+
+## Storage providers
+
+FileInput supports multiple storage backends. By default it uses SQLite, but if `MONGO_URL` is configured (MongoDB is used by StartupJS), the default storage becomes MongoDB (GridFS). You can force a specific provider with `DEFAULT_STORAGE_TYPE`.
+
+### SQLite (default)
+
+- Default when no `MONGO_URL` is configured.
+- Force with `DEFAULT_STORAGE_TYPE=sqlite`.
+
+### MongoDB (GridFS)
+
+- Default when `MONGO_URL` is configured.
+- Force with `DEFAULT_STORAGE_TYPE=mongo`.
+
+### Azure Blob Storage
+
+- Force with `DEFAULT_STORAGE_TYPE=azureblob`.
+- Requires `AZURE_BLOB_STORAGE_CONNECTION_STRING`.
+- Install the Azure SDK: `yarn add @azure/storage-blob`.
+
+## Sandbox
+
+<Sandbox
+  Component={FileInput}
+  propsJsonSchema={FileInputPropsJsonSchema}
+  props={{
+    onChange: fileId => alert('Uploaded fileId: ' + fileId)
+  }}
+  block
+/>

package/constants.d.ts

@@ -0,0 +1,8 @@
+export const GET_FILE_URL: string
+export function getFileUrl (id: string, extension?: string): string
+
+export const UPLOAD_SINGLE_FILE_URL: string
+export function getUploadFileUrl (id?: string): string
+
+export const DELETE_FILE_URL: string
+export function getDeleteFileUrl (id: string): string

package/constants.js

@@ -0,0 +1,16 @@
+export const GET_FILE_URL = '/api/__ui__/files/get/:fileId'
+export const getFileUrl = (id, extension) => {
+  if (!id) throw Error('[ui/FileInput] getFileUrl: fileId is required')
+  return GET_FILE_URL.replace(':fileId', id) + (extension ? `.${extension}` : '')
+}
+
+export const UPLOAD_SINGLE_FILE_URL = '/api/__ui__/files/upload/single/:fileId?'
+export const getUploadFileUrl = id => {
+  return UPLOAD_SINGLE_FILE_URL.replace('/:fileId?', id ? `/${id}` : '')
+}
+
+export const DELETE_FILE_URL = '/api/__ui__/files/delete/:fileId'
+export const getDeleteFileUrl = id => {
+  if (!id) throw Error('[ui/FileInput] getDeleteFileUrl: fileId is required')
+  return DELETE_FILE_URL.replace(':fileId', id)
+}

package/deleteFile.ts

@@ -0,0 +1,16 @@
+import { axios, BASE_URL } from 'startupjs'
+import alert from '@startupjs-ui/dialogs/alert'
+import { getDeleteFileUrl } from './constants.js'
+
+export default async function deleteFile (fileId?: string): Promise<boolean | undefined> {
+  if (!fileId) return
+  try {
+    const res = await axios.post(BASE_URL + getDeleteFileUrl(fileId))
+    fileId = res.data?.fileId
+    if (!fileId) throw Error('File delete failed. No deleted fileId returned from server')
+    return true
+  } catch (err) {
+    console.error(err)
+    await alert('Error deleting file')
+  }
+}

package/files.plugin.js

@@ -0,0 +1,360 @@
+import { $, BASE_URL, serverOnly, Signal, sub } from 'startupjs'
+import { createPlugin } from 'startupjs/registry'
+import busboy from 'busboy'
+import sharp from 'sharp'
+import { DELETE_FILE_URL, GET_FILE_URL, getDeleteFileUrl, getFileUrl, getUploadFileUrl, UPLOAD_SINGLE_FILE_URL } from './constants.js'
+import { deleteFile, getDefaultStorageType, getFileBlob, getFileSize, saveFileBlob } from './providers/index.js'
+
+export default createPlugin({
+  name: 'files',
+  enabled: true,
+  order: 'system ui',
+  isomorphic: () => ({
+    models: models => {
+      return {
+        ...models,
+        files: {
+          default: FilesModel,
+          schema,
+          ...models.files
+        },
+        'files.*': {
+          default: FileModel,
+          ...models['files.*']
+        }
+      }
+    }
+  }),
+  server: () => ({
+    serverRoutes: expressApp => {
+      expressApp.get(GET_FILE_URL, async (req, res) => {
+        let { fileId } = req.params
+
+        // Extract video file detection early for Range support
+        const isVideoRequest = req.url.includes('.mp4') || req.url.includes('.mov') || req.url.includes('.avi')
+        // if id has extension, remove it
+        // (extension is sometimes added for client libraries to properly handle the file)
+        fileId = fileId.replace(/\\.[^.]+$/, '')
+        // url might have ?download=true which means we should force download
+        const download = (req.query?.download != null)
+        const $file = await sub($.files[fileId])
+        const file = $file.get()
+        if (!file) return res.status(404).send(ERRORS.fileNotFound)
+        const { mimeType, storageType, filename, updatedAt } = file
+        if (!mimeType) return res.status(500).send(ERRORS.fileMimeTypeNotSet)
+        const isVideo = mimeType.startsWith('video/') || isVideoRequest
+        if (!storageType) return res.status(500).send(ERRORS.fileStorageTypeNotSet)
+
+        // handle client-side caching of files
+        const clientEtag = req.get('If-None-Match')
+        const etag = `"${updatedAt}"`
+        // lastModified and ifModifiedSince both use UTC time with seconds precision
+        const ifModifiedSince = req.get('If-Modified-Since')
+        const lastModified = new Date(updatedAt).toUTCString()
+
+        function setCacheHeaders () {
+          res.setHeader('Etag', etag)
+          res.setHeader('Last-Modified', lastModified)
+          if (process.env.NODE_ENV === 'production') {
+            res.setHeader('Cache-Control', `public, max-age=${5 * 60}`) // cache on client for 5 mins
+          } else {
+            res.setHeader('Cache-Control', 'no-cache') // always validate cache in development
+          }
+          // the following headers are set by expo (metro) dev server.
+          // We don't want them since we're setting our own cache headers
+          // and a single Cache-Control header fully replaces them.
+          res.removeHeader('Pragma')
+          res.removeHeader('Surrogate-Control')
+          res.removeHeader('Expires')
+
+          // Add Range support for video files (required for iOS AVPlayer)
+          if (isVideo) {
+            res.setHeader('Accept-Ranges', 'bytes')
+          }
+        }
+
+        if (
+          clientEtag === etag ||
+          (ifModifiedSince && +new Date(ifModifiedSince) >= +new Date(lastModified))
+        ) {
+          setCacheHeaders()
+          return res.status(304).send() // Not Modified
+        }
+
+        try {
+          // Performance optimization: True streaming for Range requests
+          if (isVideo && req.headers.range) {
+            const range = req.headers.range
+            console.log('[StartupJS Files] Processing Range request with TRUE streaming:', { fileId, range })
+
+            try {
+              const parts = range.replace(/bytes=/, '').split('-')
+              const start = parseInt(parts[0], 10) || 0
+
+              // Get file size efficiently without loading full file
+              const fileSize = await getFileSize(storageType, fileId)
+              let end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1
+
+              console.log('[StartupJS Files] Processing range:', { range, start, end, fileSize, parts })
+
+              // Fix off-by-one error in range validation
+              if (start >= fileSize || start > end) {
+                console.log('[StartupJS Files] Invalid range:', { start, end, fileSize })
+                res.status(416)
+                res.setHeader('Content-Range', `bytes */${fileSize}`)
+                return res.send('Range Not Satisfiable')
+              }
+
+              // Adjust end to file bounds
+              if (end >= fileSize) {
+                end = fileSize - 1
+              }
+
+              // TRUE STREAMING: get only the requested range from storage
+              const rangeBlob = await getFileBlob(storageType, fileId, { start, end })
+
+              // Handle empty responses from MongoDB GridFS
+              // This can happen for the last byte due to GridFS chunking behavior
+              if (rangeBlob.length === 0) {
+                // For the last byte, return a fake byte to satisfy video players
+                // HTTP 416 for last byte can prevent video playback entirely
+                if (start === fileSize - 1) {
+                  console.log('[StartupJS Files] Last byte unavailable, returning fake byte for video compatibility:', { start, end, fileSize })
+                  res.status(206)
+                  res.setHeader('Content-Range', `bytes ${start}-${end}/${fileSize}`)
+                  res.setHeader('Content-Length', '1')
+                  res.type(mimeType)
+                  setCacheHeaders()
+                  return res.send(Buffer.from([0x00])) // Fake last byte for video compatibility
+                }
+
+                console.log('[StartupJS Files] Empty response from GridFS, returning 416:', { start, end, fileSize })
+                res.status(416)
+                res.setHeader('Content-Range', `bytes */${fileSize}`)
+                return res.send('Range Not Satisfiable')
+              }
+
+              const chunksize = (end - start) + 1
+
+              res.status(206) // Partial Content
+              res.setHeader('Content-Range', `bytes ${start}-${end}/${fileSize}`)
+              res.setHeader('Content-Length', rangeBlob.length.toString())
+              res.type(mimeType)
+
+              if (download) res.setHeader('Content-Disposition', `attachment; filename="${filename}"`)
+              setCacheHeaders()
+
+              console.log('[StartupJS Files] Sending TRUE streaming response:', {
+                start,
+                end,
+                chunksize,
+                totalSize: fileSize,
+                actualChunkSize: rangeBlob.length,
+                contentLength: rangeBlob.length.toString(),
+                isLastByte: start === fileSize - 1
+              })
+              return res.send(rangeBlob)
+            } catch (err) {
+              console.error('[StartupJS Files] Range request error:', err)
+              // Fallback to full file if range processing fails
+            }
+          }
+
+          // Load file for non-Range requests (download functionality preserved)
+          const blob = await getFileBlob(storageType, fileId)
+          const fileBuffer = (blob instanceof Buffer) ? blob : Buffer.from(blob) // avoid unnecessary copy
+
+          // set the Content-Type header
+          res.type(mimeType)
+
+          // force the file to be downloaded by setting the Content-Disposition header
+          if (download) res.setHeader('Content-Disposition', `attachment; filename="${filename}"`)
+
+          setCacheHeaders()
+
+          // send the actual file
+          res.send(fileBuffer)
+        } catch (err) {
+          console.error(err)
+          res.status(500).send('Error getting file')
+        }
+      })
+
+      // this handles both creating and updating a file
+      expressApp.post(UPLOAD_SINGLE_FILE_URL, async (req, res) => {
+        let { fileId, storageType } = req.params
+        try {
+          storageType ??= await getDefaultStorageType()
+        } catch (err) {
+          console.error(err)
+          return res.status(500).send('Error getting default storage type')
+        }
+        const bb = busboy({ headers: req.headers })
+
+        let blob
+        let meta
+        bb.on('file', (fieldname, file, { filename, mimeType, encoding }) => {
+          if (blob) return res.status(500).send('Only one file is allowed')
+
+          const buffers = []
+          let stream = file
+
+          if (mimeType.startsWith('image/')) {
+            // If it's an image, pipe it through sharp for resizing and conversion
+            stream = file.pipe(sharp()
+              .rotate()
+              .resize(1000, 1000, {
+                fit: sharp.fit.inside,
+                withoutEnlargement: true
+              })
+              .toFormat('jpeg', { quality: 80 })) // Convert to JPEG with 85% quality
+
+            filename = filename.replace(/\\.[^.]+$/, '.jpg') // Change extension to .jpg
+            mimeType = 'image/jpeg'
+          }
+
+          // Regardless of whether it's an image or not, collect the data
+          stream.on('data', data => buffers.push(data))
+
+          stream.on('end', async () => {
+            blob = Buffer.concat(buffers)
+            meta = { filename, mimeType, encoding, storageType } // Update meta here to ensure it includes modifications for images
+
+            if (!blob) return res.status(500).send('No file was uploaded')
+
+            // extract extension from filename
+            console.log('meta.filename', meta.filename)
+            const extension = meta.filename?.match(/\\.([^.]+)$/)?.[1]
+            if (extension) meta.extension = extension
+            const create = !fileId
+            if (!fileId) fileId = $.id()
+            // try to save file to sqlite first to do an early exit if it fails
+            try {
+              await saveFileBlob(storageType, fileId, blob)
+            } catch (err) {
+              console.error(err)
+              return res.status(500).send('Error saving file')
+            }
+            if (create) {
+              const doc = { id: fileId, ...meta }
+              // if some of the meta fields were undefined, remove them from the doc
+              for (const key in meta) {
+                if (meta[key] == null) delete doc[key]
+              }
+              await $.files.addNew(doc)
+            } else {
+              const $file = await sub($.files[fileId])
+
+              // when changing storageType we should delete the file from the old storageType
+              const oldStorageType = $file.storageType.get()
+              if (oldStorageType !== meta.storageType) {
+                try {
+                  await deleteFile(oldStorageType, fileId)
+                } catch (err) {
+                  console.error(err)
+                  return res.status(500).send(`Error deleting file from old storageType ${oldStorageType}`)
+                }
+              }
+
+              const doc = { ...$file.get(), ...meta, updatedAt: Date.now() }
+              // if some of the meta fields were undefined, remove them from the doc
+              for (const key in meta) {
+                if (meta[key] == null) delete doc[key]
+              }
+              await $file.set(doc)
+            }
+            console.log(`Uploaded file to ${storageType}`, fileId)
+            res.json({ fileId })
+          })
+        })
+
+        return req.pipe(bb)
+      })
+
+      expressApp.post(DELETE_FILE_URL, async (req, res) => {
+        const { fileId } = req.params
+        const $file = await sub($.files[fileId])
+        const file = $file.get()
+        if (!file) return res.status(404).send(ERRORS.fileNotFound)
+        const { storageType } = file
+        if (!storageType) return res.status(500).send(ERRORS.fileStorageTypeNotSet)
+        try {
+          await deleteFile(storageType, fileId)
+          await $file.del()
+          res.json({ fileId })
+        } catch (err) {
+          console.error(err)
+          res.status(500).send('Error deleting file')
+        }
+      })
+    }
+  })
+})
+
+const schema = {
+  storageType: { type: 'string', required: true },
+  mimeType: { type: 'string', required: true },
+  filename: { type: 'string' }, // original filename with extension
+  encoding: { type: 'string' },
+  extension: { type: 'string' },
+  createdAt: { type: 'number', required: true },
+  // updatedAt is used to determine whether the underlying file
+  // stored in the storageType provider has changed.
+  // This is used to properly cache files on the client side.
+  updatedAt: { type: 'number', required: true }
+}
+
+class FilesModel extends Signal {
+  async addNew (file) {
+    const now = Date.now()
+    return await this.add({
+      ...file,
+      createdAt: now,
+      updatedAt: now
+    })
+  }
+
+  getUrl (fileId, extension) {
+    return BASE_URL + getFileUrl(fileId, extension)
+  }
+
+  getDownloadUrl (fileId, extension) {
+    return BASE_URL + getFileUrl(fileId, extension) + '?download=true'
+  }
+
+  getUploadUrl (fileId) {
+    return BASE_URL + getUploadFileUrl(fileId)
+  }
+
+  getDeleteUrl (fileId) {
+    return BASE_URL + getDeleteFileUrl(fileId)
+  }
+}
+
+class FileModel extends Signal {
+  getUrl () {
+    return BASE_URL + getFileUrl(this.getId(), this.extension.get())
+  }
+
+  getDownloadUrl () {
+    return this.getUrl() + '?download=true'
+  }
+
+  getUploadUrl () {
+    return BASE_URL + getUploadFileUrl(this.getId())
+  }
+
+  getDeleteUrl () {
+    return BASE_URL + getDeleteFileUrl(this.getId())
+  }
+
+  getBlob = serverOnly(function () {
+    return getFileBlob(this.storageType.get(), this.getId())
+  })
+}
+
+const ERRORS = {
+  fileNotFound: 'File not found',
+  fileMimeTypeNotSet: 'File mimeType is not set. This should never happen',
+  fileStorageTypeNotSet: 'File storageType is not set. This should never happen'
+}

package/index.d.ts

@@ -0,0 +1,36 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode, type RefObject } from 'react';
+export { default } from './input';
+export declare const _PropsJsonSchema: {};
+export interface FileInputProps {
+    /** Ref object to access imperative methods (`pickFile`, `deleteFile`, `uploadFile`) */
+    ref?: RefObject<FileInputRef>;
+    /** Current fileId (stored in `files` model on the server) */
+    value?: string;
+    /** MIME types accepted by the picker (passed to `expo-document-picker`) */
+    mimeTypes?: string | string[];
+    /** When true, opens image picker instead of document picker */
+    image?: boolean;
+    /** Upload selected file immediately after picking @default true */
+    uploadImmediately?: boolean;
+    /** Hook called before upload starts (can be async) */
+    beforeUpload?: () => any;
+    /** Hook called after upload finishes (can be async) */
+    afterUpload?: () => any;
+    /** Called with new fileId after successful upload */
+    onChange?: (fileId?: string) => void;
+    /** Custom renderer instead of the default Upload/Change/Delete buttons */
+    render?: () => ReactNode;
+    /** Custom styles (reserved for future use) */
+    style?: any;
+}
+export interface FileInputRef {
+    /** Opens the native picker and (optionally) uploads the selected file */
+    pickFile: () => Promise<any>;
+    /** Deletes the currently selected file */
+    deleteFile: () => Promise<void>;
+    /** Uploads a picked asset to server and returns new fileId */
+    uploadFile: (asset: any, fileId?: string) => Promise<string | undefined>;
+}

package/index.tsx

@@ -0,0 +1,37 @@
+import { type ReactNode, type RefObject } from 'react'
+
+export { default } from './input'
+
+export const _PropsJsonSchema = {/* FileInputProps */}
+
+export interface FileInputProps {
+  /** Ref object to access imperative methods (`pickFile`, `deleteFile`, `uploadFile`) */
+  ref?: RefObject<FileInputRef>
+  /** Current fileId (stored in `files` model on the server) */
+  value?: string
+  /** MIME types accepted by the picker (passed to `expo-document-picker`) */
+  mimeTypes?: string | string[]
+  /** When true, opens image picker instead of document picker */
+  image?: boolean
+  /** Upload selected file immediately after picking @default true */
+  uploadImmediately?: boolean
+  /** Hook called before upload starts (can be async) */
+  beforeUpload?: () => any
+  /** Hook called after upload finishes (can be async) */
+  afterUpload?: () => any
+  /** Called with new fileId after successful upload */
+  onChange?: (fileId?: string) => void
+  /** Custom renderer instead of the default Upload/Change/Delete buttons */
+  render?: () => ReactNode
+  /** Custom styles (reserved for future use) */
+  style?: any
+}
+
+export interface FileInputRef {
+  /** Opens the native picker and (optionally) uploads the selected file */
+  pickFile: () => Promise<any>
+  /** Deletes the currently selected file */
+  deleteFile: () => Promise<void>
+  /** Uploads a picked asset to server and returns new fileId */
+  uploadFile: (asset: any, fileId?: string) => Promise<string | undefined>
+}

package/input.expo.tsx

@@ -0,0 +1,101 @@
+import { useImperativeHandle, type ReactNode } from 'react'
+import { pug, observer } from 'startupjs'
+import Button from '@startupjs-ui/button'
+import Div from '@startupjs-ui/div'
+import { themed } from '@startupjs-ui/core'
+import confirm from '@startupjs-ui/dialogs/confirm'
+import * as DocumentPicker from 'expo-document-picker'
+import * as ImagePicker from 'expo-image-picker'
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt'
+import deleteFileApi from './deleteFile'
+import uploadFileApi from './uploadFile'
+import type { FileInputProps, FileInputRef } from './index'
+
+export default observer(themed('FileInput', FileInput))
+
+function FileInput ({
+  value: initialFileId,
+  mimeTypes,
+  image,
+  uploadImmediately = true,
+  beforeUpload,
+  afterUpload,
+  onChange = () => undefined,
+  render,
+  ref
+}: FileInputProps): ReactNode {
+  let fileId = initialFileId
+
+  useImperativeHandle(ref, (): FileInputRef => {
+    return {
+      pickFile,
+      deleteFile: handleDeleteFile,
+      uploadFile: uploadFileApi
+    }
+  })
+
+  async function pickFile () {
+    let result: any
+    if (image) {
+      result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        allowsEditing: true,
+        aspect: [4, 3],
+        quality: 1
+      })
+    } else {
+      result = await DocumentPicker.getDocumentAsync({ type: mimeTypes as any })
+    }
+
+    const cancelled = result?.cancelled ?? result?.canceled
+    const assets = result?.assets
+    if (cancelled || !assets) return
+
+    if (!uploadImmediately) return assets[0]
+
+    if (beforeUpload) {
+      const beforeUploadResult = beforeUpload()
+      if (beforeUploadResult?.then) await beforeUploadResult
+    }
+
+    let handled
+    for (const asset of assets) {
+      if (handled) throw Error('Only one file is allowed')
+      fileId = await uploadFileApi(asset, fileId)
+      if (!fileId) return
+      onChange(fileId)
+      handled = true
+    }
+
+    if (afterUpload) {
+      const afterUploadResult = afterUpload()
+      if (afterUploadResult?.then) await afterUploadResult
+    }
+  }
+
+  async function handleDeleteFile () {
+    if (!fileId) return
+    if (!await confirm('Are you sure you want to delete this file?')) return
+    const deleted = await deleteFileApi(fileId)
+    if (!deleted) return
+    onChange(undefined)
+  }
+
+  function renderDefault (): ReactNode {
+    return pug`
+      if fileId
+        Div(row)
+          Button(onPress=pickFile) Change
+          Button(pushed onPress=handleDeleteFile variant='text' icon=faTrashAlt)
+      else
+        Button(onPress=pickFile) Upload file
+    `
+  }
+
+  return pug`
+    if render
+      = render()
+    else
+      = renderDefault()
+  `
+}

package/input.tsx

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react'
+import { observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import type { FileInputProps } from './index'
+
+export default observer(themed('FileInput', FileInput))
+
+function FileInput (props: FileInputProps): ReactNode {
+  throw Error(`
+    <FileInput /> is only available in Expo projects
+  `)
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@startupjs-ui/file-input",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": "./index.tsx",
+    "./constants": "./constants.js",
+    "./deleteFile": "./deleteFile.ts",
+    "./uploadFile": "./uploadFile.ts",
+    "./providers": "./providers/index.js",
+    "./files.plugin": "./files.plugin.js"
+  },
+  "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@startupjs-ui/button": "^0.1.3",
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/dialogs": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3",
+    "busboy": "^1.6.0",
+    "expo-document-picker": ">=14.0.0",
+    "expo-image-picker": ">=17.0.0",
+    "sharp": "^0.34.5"
+  },
+  "peerDependencies": {
+    "@azure/storage-blob": "*",
+    "mongodb": "*",
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "peerDependenciesMeta": {
+    "@azure/storage-blob": {
+      "optional": true
+    },
+    "mongodb": {
+      "optional": true
+    }
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}

package/providers/azureblob.js

@@ -0,0 +1,158 @@
+import { BlobServiceClient } from '@azure/storage-blob'
+
+// Replace with your Azure Blob Storage connection string or Azurite connection string
+const AZURE_BLOB_STORAGE_CONNECTION_STRING = process.env.AZURE_BLOB_STORAGE_CONNECTION_STRING
+const CONTAINER_NAME = 'files' // Container name for storing blobs
+
+let blobServiceClient
+let containerClient
+
+export function validateSupport () {
+  if (!AZURE_BLOB_STORAGE_CONNECTION_STRING) {
+    throw new Error(ERRORS.azureNotAvailable)
+  }
+  // Initialize the BlobServiceClient and ContainerClient once
+  if (!blobServiceClient) {
+    blobServiceClient = BlobServiceClient.fromConnectionString(AZURE_BLOB_STORAGE_CONNECTION_STRING)
+    containerClient = blobServiceClient.getContainerClient(CONTAINER_NAME)
+    // Ensure container exists
+    containerClient.createIfNotExists().catch((err) => {
+      console.error('[Azure Blob Storage] Failed to create container:', err)
+      throw err
+    })
+  }
+}
+
+export async function getFileBlob (fileId, range) {
+  validateSupport()
+  const blobClient = containerClient.getBlobClient(fileId)
+
+  try {
+    // Check if blob exists
+    const properties = await blobClient.getProperties()
+    const actualFileSize = properties.contentLength
+
+    if (range) {
+      console.log('[Azure Blob Storage] Using Range request for optimal streaming:', { fileId, range })
+
+      // Validate range boundaries
+      if (range.start >= actualFileSize || range.start < 0) {
+        console.log('[Azure Blob Storage] Range start out of bounds:', { start: range.start, actualFileSize })
+        throw new Error('Range start out of bounds')
+      }
+
+      // Ensure end is within file bounds
+      const adjustedEnd = Math.min(range.end, actualFileSize - 1)
+
+      // Ensure end is not before start
+      if (adjustedEnd < range.start) {
+        console.log('[Azure Blob Storage] Invalid range:', { start: range.start, end: adjustedEnd, actualFileSize })
+        throw new Error('Invalid range')
+      }
+
+      console.log('[Azure Blob Storage] Downloading blob with range:', {
+        start: range.start,
+        end: adjustedEnd,
+        actualFileSize,
+        originalEnd: range.end
+      })
+
+      // Download blob with range
+      const response = await blobClient.download(range.start, adjustedEnd - range.start + 1)
+      const chunks = []
+
+      for await (const chunk of response.readableStreamBody) {
+        chunks.push(chunk)
+      }
+
+      const result = Buffer.concat(chunks)
+      const expectedSize = adjustedEnd - range.start + 1
+
+      console.log('[Azure Blob Storage] Range response:', {
+        expected: expectedSize,
+        actual: result.length,
+        start: range.start,
+        end: adjustedEnd,
+        fileId
+      })
+
+      if (result.length === 0) {
+        console.warn('[Azure Blob Storage] Empty range response - this may indicate a problem')
+      }
+
+      return result
+    } else {
+      // Regular download for non-Range requests
+      const response = await blobClient.download()
+      const chunks = []
+
+      for await (const chunk of response.readableStreamBody) {
+        chunks.push(chunk)
+      }
+
+      return Buffer.concat(chunks)
+    }
+  } catch (error) {
+    if (error.statusCode === 404) {
+      throw new Error(ERRORS.fileNotFound)
+    }
+    console.error('[Azure Blob Storage] Error downloading blob:', error)
+    throw error
+  }
+}
+
+export async function getFileSize (fileId) {
+  validateSupport()
+  const blobClient = containerClient.getBlobClient(fileId)
+
+  try {
+    const properties = await blobClient.getProperties()
+    return properties.contentLength
+  } catch (error) {
+    if (error.statusCode === 404) {
+      throw new Error(ERRORS.fileNotFound)
+    }
+    console.error('[Azure Blob Storage] Error getting blob size:', error)
+    throw error
+  }
+}
+
+export async function saveFileBlob (fileId, blob) {
+  validateSupport()
+  const blobClient = containerClient.getBlockBlobClient(fileId)
+
+  try {
+    // Upload blob (overwrites if exists)
+    await blobClient.upload(blob, blob.length)
+    console.log('[Azure Blob Storage] Blob uploaded successfully:', fileId)
+  } catch (error) {
+    console.error('[Azure Blob Storage] Error uploading blob:', error)
+    throw error
+  }
+}
+
+export async function deleteFile (fileId) {
+  validateSupport()
+  const blobClient = containerClient.getBlobClient(fileId)
+
+  try {
+    await blobClient.deleteIfExists()
+    console.log('[Azure Blob Storage] Blob deleted successfully:', fileId)
+  } catch (error) {
+    if (error.statusCode === 404) {
+      throw new Error(ERRORS.fileNotFound)
+    }
+    console.error('[Azure Blob Storage] Error deleting blob:', error)
+    throw error
+  }
+}
+
+const ERRORS = {
+  azureNotAvailable: `
+    Azure Blob Storage connection is not available.
+    Make sure you have configured the AZURE_BLOB_STORAGE_CONNECTION_STRING environment variable.
+  `,
+  fileNotFound: `
+    File not found in Azure Blob Storage.
+  `
+}

package/providers/index.js

@@ -0,0 +1,60 @@
+import { mongo, sqlite } from 'startupjs/server'
+
+export async function getFileBlob (storageType, fileId, range) {
+  return (await getStorageProvider(storageType)).getFileBlob(fileId, range)
+}
+
+export async function getFileSize (storageType, fileId) {
+  return (await getStorageProvider(storageType)).getFileSize(fileId)
+}
+
+export async function saveFileBlob (storageType, fileId, blob) {
+  return (await getStorageProvider(storageType)).saveFileBlob(fileId, blob)
+}
+
+export async function deleteFile (storageType, fileId) {
+  return (await getStorageProvider(storageType)).deleteFile(fileId)
+}
+
+export async function getDefaultStorageType () {
+  const storage = process.env.DEFAULT_STORAGE_TYPE
+
+  if (storage) return storage
+  if (mongo) return 'mongo'
+  if (sqlite) return 'sqlite'
+  throw Error(ERRORS.noDefaultStorageProvider)
+}
+
+const moduleCache = {}
+
+async function getStorageProvider (storageType) {
+  if (moduleCache[storageType]) return moduleCache[storageType]
+
+  let theModule
+  if (storageType === 'sqlite') {
+    theModule = await import('./sqlite.js')
+  } else if (storageType === 'mongo') {
+    theModule = await import('./mongo.js')
+  } else if (storageType === 'azureblob') {
+    theModule = await import('./azureblob.js')
+  } else {
+    throw Error(ERRORS.unsupportedStorageType(storageType))
+  }
+
+  await theModule.validateSupport?.()
+
+  moduleCache[storageType] = theModule
+  return theModule
+}
+
+const ERRORS = {
+  unsupportedStorageType: storageType => `
+    [@startupjs/ui] FileInput: You tried getting file from storageType '${storageType}',
+    but it's not supported.
+    This should never happen.
+  `,
+  noDefaultStorageProvider: `
+    [@startupjs/ui] FileInput: No default storage provider can be used.
+    Neither MongoDB is used in your project nor SQLite (persistent mingo).
+  `
+}

package/providers/mongo.js

@@ -0,0 +1,187 @@
+import { mongo } from 'startupjs/server'
+import { GridFSBucket } from 'mongodb'
+
+let bucket
+
+export function validateSupport () {
+  if (!mongo) throw Error(ERRORS.mongoNotAvailable)
+  // Initialize the GridFSBucket once
+  if (!bucket) {
+    bucket = new GridFSBucket(mongo)
+  }
+}
+
+export async function getFileBlob (fileId, range) {
+  validateSupport()
+  const files = await bucket.find({ filename: fileId }).toArray()
+  if (!files || files.length === 0) {
+    throw new Error(ERRORS.fileNotFound)
+  }
+
+  return new Promise((resolve, reject) => {
+    // Performance optimization: use Range requests for partial content
+    let downloadStream
+    if (range) {
+      console.log('[MongoDB GridFS] Using Range request for optimal streaming:', { fileId, range })
+
+      // Validate range boundaries
+      const actualFileSize = files[0].length
+      if (range.start >= actualFileSize || range.start < 0) {
+        console.log('[MongoDB GridFS] Range start out of bounds:', { start: range.start, actualFileSize })
+        return reject(new Error('Range start out of bounds'))
+      }
+
+      // Ensure end is within file bounds
+      const adjustedEnd = Math.min(range.end, actualFileSize - 1)
+
+      // Ensure end is not before start
+      if (adjustedEnd < range.start) {
+        console.log('[MongoDB GridFS] Invalid range:', { start: range.start, end: adjustedEnd, actualFileSize })
+        return reject(new Error('Invalid range'))
+      }
+
+      console.log('[MongoDB GridFS] Opening download stream with range:', {
+        start: range.start,
+        end: adjustedEnd,
+        actualFileSize,
+        originalEnd: range.end
+      })
+
+      downloadStream = bucket.openDownloadStreamByName(fileId, {
+        start: range.start,
+        end: adjustedEnd
+      })
+
+      // Add error handling for stream errors
+      downloadStream.on('error', (error) => {
+        console.error('[MongoDB GridFS] Stream error:', error)
+        reject(error)
+      })
+    } else {
+      // Regular download for non-Range requests (download functionality)
+      downloadStream = bucket.openDownloadStreamByName(fileId)
+    }
+
+    const chunks = []
+
+    downloadStream.on('data', (chunk) => {
+      chunks.push(chunk)
+    })
+
+    downloadStream.on('error', (err) => {
+      reject(err)
+    })
+
+    downloadStream.on('end', () => {
+      const result = Buffer.concat(chunks)
+      if (range) {
+        const expectedSize = range.end - range.start + 1
+        console.log('[MongoDB GridFS] Range response:', {
+          expected: expectedSize,
+          actual: result.length,
+          start: range.start,
+          end: range.end,
+          fileId
+        })
+
+        // Validate that we got the expected data
+        if (result.length === 0) {
+          console.warn('[MongoDB GridFS] Empty range response - this may indicate a problem')
+        }
+      }
+      resolve(result)
+    })
+  })
+}
+
+export async function getFileSize (fileId) {
+  validateSupport()
+  const files = await bucket.find({ filename: fileId }).toArray()
+  if (!files || files.length === 0) {
+    throw new Error(ERRORS.fileNotFound)
+  }
+  return files[0].length
+}
+
+export async function saveFileBlob (fileId, blob) {
+  console.log('[MongoDB GridFS] Saving file:', {
+    fileId,
+    blobType: blob ? blob.constructor.name : 'undefined',
+    blobLength: blob instanceof Buffer ? blob.length : 'N/A'
+  })
+
+  validateSupport()
+  // Delete existing files with the same filename
+  const files = await bucket.find({ filename: fileId }).toArray()
+  for (const file of files) {
+    console.log('[MongoDB GridFS] Deleting existing files')
+    await bucket.delete(file._id)
+  }
+
+  console.log('db', mongo)
+
+  return new Promise((resolve, reject) => {
+    console.log('[MongoDB GridFS] Opening upload stream')
+    const uploadStream = bucket.openUploadStream(fileId)
+
+    uploadStream.on('data', (chunk) => {
+      console.log('[MongoDB GridFS] Stream data received:', { fileId, chunkLength: chunk.length })
+    })
+    uploadStream.on('end', () => {
+      console.log('[MongoDB GridFS] Stream end event:', fileId)
+    })
+    uploadStream.on('close', () => {
+      console.log('[MongoDB GridFS] Stream closed:', fileId)
+    })
+
+    uploadStream.on('error', (err) => {
+      console.warn('[MongoDB GridFS] error writing to stream', err)
+      reject(err)
+    })
+
+    uploadStream.on('finish', () => {
+      console.log('[MongoDB GridFS] Finished writing to stream')
+      resolve()
+    })
+
+    try {
+      if (blob instanceof Buffer) {
+        uploadStream.write(blob)
+        uploadStream.end()
+      } else if (blob.readable) {
+        blob.pipe(uploadStream)
+      } else {
+        const err = new Error('Unsupported blob type')
+        console.error('[MongoDB GridFS] Error:', err)
+        reject(err)
+      }
+    } catch (err) {
+      console.error('[MongoDB GridFS] Error writing blob:', err)
+      reject(err)
+    }
+
+    console.log('here we go')
+  })
+}
+
+export async function deleteFile (fileId) {
+  validateSupport()
+  const files = await bucket.find({ filename: fileId }).toArray()
+  if (!files || files.length === 0) {
+    throw new Error(ERRORS.fileNotFound)
+  }
+
+  for (const file of files) {
+    await bucket.delete(file._id)
+  }
+}
+
+const ERRORS = {
+  mongoNotAvailable: `
+    [@startupjs/ui] FileInput: MongoDB connection is not available.
+    Make sure you have connected to MongoDB before using this function.
+  `,
+  fileNotFound: `
+    File not found in MongoDB GridFS.
+  `
+}

package/providers/sqlite.js

@@ -0,0 +1,113 @@
+import { sqlite } from 'startupjs/server'
+
+export async function validateSupport () {
+  if (!sqlite) throw Error(ERRORS.disabled)
+}
+
+export async function getFileBlob (fileId, range) {
+  return await new Promise((resolve, reject) => {
+    sqlite.get('SELECT * FROM files WHERE id = ?', [fileId], (err, row) => {
+      if (err) return reject(err)
+      if (!row) return reject(new Error(ERRORS.fileNotFoundInSqlite))
+      if (!row.data) return reject(new Error(ERRORS.fileDataNotFoundInSqlite))
+
+      const blob = row.data
+      const actualFileSize = blob.length
+
+      if (range) {
+        console.log('[SQLite] Using Range request for optimal streaming:', { fileId, range })
+
+        // Validate range boundaries
+        if (range.start >= actualFileSize || range.start < 0) {
+          console.log('[SQLite] Range start out of bounds:', { start: range.start, actualFileSize })
+          return reject(new Error('Range start out of bounds'))
+        }
+
+        // Ensure end is within file bounds
+        const adjustedEnd = Math.min(range.end, actualFileSize - 1)
+
+        // Ensure end is not before start
+        if (adjustedEnd < range.start) {
+          console.log('[SQLite] Invalid range:', { start: range.start, end: adjustedEnd, actualFileSize })
+          return reject(new Error('Invalid range'))
+        }
+
+        console.log('[SQLite] Retrieving blob with range:', {
+          start: range.start,
+          end: adjustedEnd,
+          actualFileSize,
+          originalEnd: range.end
+        })
+
+        // Extract the requested range from the blob
+        const result = blob.slice(range.start, adjustedEnd + 1)
+        const expectedSize = adjustedEnd - range.start + 1
+
+        console.log('[SQLite] Range response:', {
+          expected: expectedSize,
+          actual: result.length,
+          start: range.start,
+          end: adjustedEnd,
+          fileId
+        })
+
+        if (result.length === 0) {
+          console.warn('[SQLite] Empty range response - this may indicate a problem')
+        }
+
+        resolve(result)
+      } else {
+        // Return full blob for non-range requests
+        resolve(blob)
+      }
+    })
+  })
+}
+
+export async function saveFileBlob (fileId, blob) {
+  return await new Promise((resolve, reject) => {
+    sqlite.run('INSERT OR REPLACE INTO files (id, data) VALUES (?, ?)', [fileId, blob], err => {
+      if (err) return reject(err)
+      resolve()
+    })
+  })
+}
+
+export async function deleteFile (fileId) {
+  return await new Promise((resolve, reject) => {
+    sqlite.run('DELETE FROM files WHERE id = ?', [fileId], err => {
+      if (err) return reject(err)
+      resolve()
+    })
+  })
+}
+
+export async function getFileSize (fileId) {
+  await validateSupport()
+  return await new Promise((resolve, reject) => {
+    sqlite.get('SELECT data FROM files WHERE id = ?', [fileId], (err, row) => {
+      if (err) return reject(err)
+      if (!row) return reject(new Error(ERRORS.fileNotFoundInSqlite))
+      if (!row.data) return reject(new Error(ERRORS.fileDataNotFoundInSqlite))
+      resolve(row.data.length)
+    })
+  })
+}
+
+const ERRORS = {
+  disabled: `
+    [@startupjs/ui] FileInput: You tried getting file from SQLite,
+    but it's not used in your project.
+    ('storageType' is set to 'sqlite' in the 'files' document).
+    This should never happen.
+    If you migrated your DB from local SQLite in dev
+    to MongoDB in production, you must reupload all your files from SQLite to MongoDB
+    while also changing 'storageType' to 'mongo' in your 'files' collection.
+  `,
+  fileNotFoundInSqlite: `
+    File not found in SQLite.
+  `,
+  fileDataNotFoundInSqlite: `
+    File data not found in SQLite.
+  `
+}

package/uploadFile.ts

@@ -0,0 +1,72 @@
+import { Platform } from 'react-native'
+import { axios, BASE_URL } from 'startupjs'
+import alert from '@startupjs-ui/dialogs/alert'
+import { getUploadFileUrl } from './constants.js'
+
+const isWeb = Platform.OS === 'web'
+
+export default async function uploadFile (asset: any, fileId?: string): Promise<string | undefined> {
+  try {
+    const formData = new FormData()
+    const uri: string | undefined = asset?.uri
+    if (!uri) throw Error('File upload failed. No asset.uri provided')
+    let type = asset.mimeType
+    const name = asset.name || asset.fileName || getFilenameFromUri(uri)
+    if (!type) {
+      if (asset.type === 'image') type = getImageMimeType(uri || asset.fileName || asset.name || '')
+    }
+
+    if (isWeb) {
+      // on web we'll receive it as a uri blob
+      const blob = await (await fetch(uri)).blob()
+      formData.append('file', blob, name)
+    } else {
+      formData.append('file', {
+        uri,
+        name,
+        type
+      } as any)
+    }
+    const res = await axios.post(BASE_URL + getUploadFileUrl(fileId), formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    })
+    fileId = res.data?.fileId
+    if (!fileId) throw Error('File upload failed. No fileId returned from server')
+    console.log('Uploaded file:', fileId)
+    return fileId
+  } catch (err) {
+    console.error(err)
+    await alert('Error uploading file')
+  }
+}
+
+function getFilenameFromUri (uri: string) {
+  if (uri.length > 1000) return 'file' // if it's a base64 encoded uri
+  return (uri.split(/[/\\]/).pop() ?? 'file').toLowerCase()
+}
+
+function getImageMimeType (filename: string) {
+  // Extract the file extension from the filename
+  const extension = (filename.split('.').pop() ?? '').toLowerCase()
+
+  // Map of image extensions to MIME types
+  const mimeTypes: Record<string, string> = {
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    png: 'image/png',
+    gif: 'image/gif',
+    bmp: 'image/bmp',
+    webp: 'image/webp',
+    tiff: 'image/tiff',
+    svg: 'image/svg+xml',
+    ico: 'image/vnd.microsoft.icon',
+    heic: 'image/heic',
+    heif: 'image/heif',
+    avif: 'image/avif'
+  }
+
+  // Return the corresponding MIME type or default to image/{extension}
+  return mimeTypes[extension] || (extension ? `image/${extension}` : 'image')
+}