Skip to main content

File Storage

Upload and manage images, documents, and other files for your INSTROC application.

Overview​

INSTROC provides built-in file storage for:

  • Images (logos, photos, icons)
  • Documents (PDFs, spreadsheets)
  • Media (videos, audio)
  • Any other files your app needs

Uploading Files​

From the Editor​

  1. Click the Assets tab in the file panel
  2. Click Upload or drag files into the panel
  3. Files are uploaded and ready to use

From AI Chat​

Ask the AI to add images:

Add a hero image of a modern office space

The AI can suggest and place stock images or prompt you to upload your own.

Programmatically​

Upload files from your app's code:

import { storage } from '@/lib/storage';

const file = event.target.files[0];
const { url, error } = await storage.upload('images', file);

Using Files​

In Components​

Reference uploaded files in your components:

<img src="/assets/hero-image.jpg" alt="Hero" />

Or use the storage URL:

<img src={imageUrl} alt="Dynamic content" />

In Styles​

Use images as backgrounds:

.hero {
  background-image: url('/assets/pattern.svg');
}

In AI Prompts​

Reference your uploaded files:

Use the logo I uploaded as the header image

File Management​

Organizing Files​

Create folders to organize assets:

  1. Click the folder icon in Assets
  2. Name your folder
  3. Drag files into folders

Common organization:

assets/
├── images/
│   ├── hero/
│   ├── products/
│   └── team/
├── icons/
├── documents/
└── videos/

Renaming Files​

  1. Right-click the file
  2. Select Rename
  3. Enter the new name
  4. References are updated automatically

Deleting Files​

  1. Right-click the file
  2. Select Delete
  3. Confirm deletion
caution

Deleting a file that's in use will break those references. Check usage before deleting.

Image Optimization​

INSTROC automatically optimizes images:

Automatic Resizing​

Images are served at optimal sizes:

  • Multiple resolutions generated
  • Appropriate size served based on viewport
  • Reduced bandwidth and faster loading

Format Conversion​

Modern formats when supported:

  • WebP for most browsers
  • AVIF for newest browsers
  • JPEG/PNG fallback for older browsers

Lazy Loading​

Images below the fold load on scroll:

  • Faster initial page load
  • Reduced data usage
  • Better performance scores

Storage Limits​

PlanStorageFile Size Limit
Free500 MB10 MB
Pro10 GB50 MB
Team100 GB100 MB

Checking Usage​

View your storage usage:

  1. Go to Project Settings
  2. Click Storage
  3. See usage by file type

Supported File Types​

Images​

  • JPEG, PNG, GIF, WebP, SVG, ICO
  • AVIF, HEIC (converted to WebP)

Documents​

  • PDF, TXT, MD
  • CSV, JSON, XML

Media​

  • MP4, WebM (video)
  • MP3, WAV, OGG (audio)

Other​

  • ZIP (for bulk uploads)
  • Font files (WOFF, WOFF2, TTF)

CDN Delivery​

All files are served through our global CDN:

  • Fast loading worldwide
  • Automatic caching
  • DDoS protection
  • HTTPS delivery

Security​

Access Control​

Files can be:

  • Public - Anyone with the URL can access
  • Private - Requires authentication

Signed URLs​

For sensitive files, use signed URLs:

const { signedUrl } = await storage.createSignedUrl('private/document.pdf', {
  expiresIn: 3600 // 1 hour
});

Best Practices​

Optimize Before Upload​

  • Compress images before uploading
  • Use appropriate dimensions
  • Choose the right format (SVG for icons, JPEG for photos)

Use Descriptive Names​

Good: team-photo-2024.jpg Bad: IMG_4521.jpg

Organize Early​

Set up folder structure before uploading many files.

Clean Up Unused Files​

Periodically review and remove files no longer in use.