.gif)
Build a secure, fast file sharing app with Lovable using step-by-step guides for uploads, sharing links, permissions and realtime synchronization.
Book a call with an Expert
Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.
You can build a simple browser-first File Sharing app in Lovable that uploads files directly to a Supabase Storage bucket (no terminal). Use Lovable Chat Mode to add static files (index.html, app.js, styles.css), set two Secrets in Lovable Cloud (SUPABASE_URL, SUPABASE_ANON_KEY), and Preview/Publish. The app lists files, uploads, and generates download links — all from the browser using supabase-js CDN.
A single-page File Sharing app that lets users upload files to a Supabase Storage bucket, list uploaded files with metadata, download files, and delete files. No backend code required — client uses supabase-js CDN. Lovable will host the static app files. You'll configure Supabase resources in the Supabase dashboard (outside Lovable) and add Secrets in Lovable Cloud.
We’ll use Chat Mode edits to create files in public/, add a small client app that uses the supabase-js CDN, and set Secrets via Lovable Cloud Secrets UI. There’s no terminal — Preview will run the app inside Lovable. If you need DB schema or bucket creation, use the Supabase web UI (instructions included). For deeper control (server-side signed URLs), use GitHub export/sync and implement server endpoints outside Lovable.
PROMPT A — Create static app files
.png)
.png)
// Goal: Add frontend files for File Sharing app using supabase-js CDN.
// Create public/index.html, public/app.js, public/styles.css with below content.
// Acceptance: Done when files exist and Preview serves a UI with upload form and file list.
// Create public/index.html
// content:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Lovable File Share</title>
<link rel="stylesheet" href="/public/styles.css" />
<!-- supabase-js CDN -->
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js/dist/umd/supabase.min.js"></script>
</head>
<body>
<div id="app">
<h1>File Share</h1>
<input id="fileInput" type="file" />
<button id="uploadBtn">Upload</button>
<div id="status"></div>
<h2>Files</h2>
<ul id="filesList"></ul>
</div>
<script src="/public/app.js"></script>
</body>
</html>
// Create public/app.js
// content:
// NOTE: Lovable Secrets MUST provide SUPABASE_URL and SUPABASE_ANON_KEY to client.
// The code reads them from window.__ENV__ (Lovable Preview injects env into window.__ENV__).
// If your Lovable setup provides a different mechanism, adapt accordingly.
const SUPABASE_URL = window.__ENV__?.SUPABASE_URL;
const SUPABASE_ANON_KEY = window.__ENV__?.SUPABASE_ANON_KEY;
if (!SUPABASE_URL || !SUPABASE_ANON_KEY) {
document.getElementById('status').innerText = 'Missing Supabase env. Set Secrets SUPABASE_URL and SUPABASE_ANON_KEY in Lovable Cloud.';
} else {
const supabase = supabaseJs.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
const bucket = 'public-files'; // bucket name you will create in Supabase
async function listFiles() {
const listEl = document.getElementById('filesList');
listEl.innerHTML = 'Loading...';
// We assume metadata table not required; list objects from storage
const { data, error } = await supabase.storage.from(bucket).list('/', { limit: 100, offset: 0 });
if (error) {
listEl.innerHTML = 'Error listing files: ' + error.message;
return;
}
listEl.innerHTML = '';
data.forEach(item => {
const li = document.createElement('li');
const link = document.createElement('a');
link.href = '#';
link.innerText = item.name;
link.onclick = async (e) => {
e.preventDefault();
// get public URL
const { data: urlData } = supabase.storage.from(bucket).getPublicUrl(item.name);
window.open(urlData.publicUrl, '_blank');
};
const del = document.createElement('button');
del.innerText = 'Delete';
del.onclick = async () => {
const { error } = await supabase.storage.from(bucket).remove([item.name]);
if (error) alert('Delete failed: ' + error.message);
else listFiles();
};
li.appendChild(link);
li.appendChild(document.createTextNode(' '));
li.appendChild(del);
listEl.appendChild(li);
});
}
document.getElementById('uploadBtn').onclick = async () => {
const input = document.getElementById('fileInput');
if (!input.files.length) return alert('Pick a file');
const file = input.files[0];
const filePath = file.name;
document.getElementById('status').innerText = 'Uploading...';
const { error } = await supabase.storage.from(bucket).upload(filePath, file, { upsert: true });
if (error) document.getElementById('status').innerText = 'Upload error: ' + error.message;
else {
document.getElementById('status').innerText = 'Uploaded';
listFiles();
}
};
listFiles();
}
// Create public/styles.css
// content:
body { font-family: Arial, sans-serif; padding: 20px; }
#filesList li { margin: 8px 0; }
PROMPT B — Add README and instructions
// Goal: Add README.md with Supabase setup steps for the bucket and optional table.
// File to create: README.md
// Acceptance: README.md created explaining Supabase UI steps.
# Supabase setup (instructions for Lovable user)
// 1) In Supabase web UI create a project.
// 2) In "Storage" create a bucket named `public-files` and set it to public (or use RLS signed URLs).
// 3) In "Settings -> API" copy the URL and anon public key.
// 4) In Lovable Cloud Secrets UI add SUPABASE_URL and SUPABASE_ANON_KEY (see Lovable Secrets).
Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!
.svg)
This prompt helps an AI assistant understand your setup and guide to build the feature
This prompt helps an AI assistant understand your setup and guide to build the feature
This prompt helps an AI assistant understand your setup and guide to build the feature
Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!
Book a call with an Expert
Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.
Build the file-sharing app with Supabase (for storage + auth) and a small server-side AI proxy (to keep your OpenAI key secret). In Lovable, use Chat Mode edits to add code, the Secrets UI to store keys, Preview to test client flows, and GitHub export/sync when you need CI/deployment. Keep uploads secure, stream large files, validate MIME types, and surface AI-generated code as suggestions (never auto-execute).
// client/upload.js
// // Install @supabase/supabase-js in package.json dependencies
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_ANON_KEY)
// // file is a File from an <input type="file">
export async function uploadFile(file, userId) {
const key = `${userId}/${Date.now()}_${file.name}`
const { data, error } = await supabase.storage
.from('uploads')
.upload(key, file, { cacheControl: '3600', upsert: false })
if (error) throw error
const url = supabase.storage.from('uploads').getPublicUrl(data.path).publicURL
return { path: data.path, url }
}
// server/api/generate.js
// // This is a server endpoint; read OPENAI_API_KEY from env via Lovable Secrets UI
export default async function handler(req, res) {
// // req.body: { prompt, fileUrl }
const prompt = `Summarize the file at ${req.body.fileUrl}\n\n${req.body.prompt || ''}`
const r = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`
},
body: JSON.stringify({
model: 'gpt-3.5-turbo',
messages: [{ role: 'user', content: prompt }],
max_tokens: 800
})
})
const data = await r.json()
res.json(data)
}
From startups to enterprises and everything in between, see for yourself our incredible impact.
They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.
