Home Courses Supabase Day 3
Day 03 Applied Practice

Storage: Files and Images

Create buckets, upload files from the browser, serve images with transformation URLs, and set policies.

~1 hour Hands-on Precision AI Academy

Today’s Objective

Create buckets, upload files from the browser, serve images with transformation URLs, and set policies.

Storage: Files and Images is one of the most important topics in Supabase in 5 Days. This lesson builds the foundation you need before moving to more advanced concepts — take time with each example and run the code yourself.

Supabase Storage Buckets

Create a bucket
CREATE A BUCKET
// In SQL Editor:
-- Or use the Storage UI in the dashboard
INSERT INTO storage.buckets (id, name, public)
VALUES ('avatars', 'avatars', true);
Upload from the browser
UPLOAD FROM THE BROWSER
import { supabase } from './supabase';

async function uploadAvatar(file, userId) { const fileExt = file.name.split('.').pop(); const filePath = `${userId}/avatar.${fileExt}`; const { error } = await supabase.storage .from('avatars') .upload(filePath, file, { upsert: true  // replace if exists }); if (error) throw error; // Get the public URL const { data } = supabase.storage .from('avatars') .getPublicUrl(filePath); return data.publicUrl;
}

// In a React component:
async function handleFileInput(event) { const file = event.target.files[0]; const url = await uploadAvatar(file, user.id); setAvatarUrl(url);
}
Storage RLS policies
STORAGE RLS POLICIES
-- Allow users to upload to their own folder
CREATE POLICY 'Users upload own avatar' ON storage.objects FOR INSERT WITH CHECK ( bucket_id = 'avatars' AND auth.uid()::text = (storage.foldername(name))[1] );

-- Public read for avatar bucket
CREATE POLICY 'Public read avatars' ON storage.objects FOR SELECT USING (bucket_id = 'avatars');
📝 Day 3 Exercise
Build an Avatar Upload
  1. C
  2. r
  3. e
  4. a
  5. t
  6. e
  8. a
  9. n
  11. a
  12. v
  13. a
  14. t
  15. a
  16. r
  17. s
  19. b
  20. u
  21. c
  22. k
  23. e
  24. t
  25. .
  27. B
  28. u
  29. i
  30. l
  31. d
  33. a
  35. f
  36. i
  37. l
  38. e
  40. i
  41. n
  42. p
  43. u
  44. t
  46. t
  47. h
  48. a
  49. t
  51. u
  52. p
  53. l
  54. o
  55. a
  56. d
  57. s
  59. a
  60. n
  62. i
  63. m
  64. a
  65. g
  66. e
  68. t
  69. o
  71. <
  72. c
  73. o
  74. d
  75. e
  76. >
  77. u
  78. s
  79. e
  80. r
  81. I
  82. d
  83. /
  84. a
  85. v
  86. a
  87. t
  88. a
  89. r
  90. .
  91. j
  92. p
  93. g
  94. <
  95. /
  96. c
  97. o
  98. d
  99. e
  100. >
  101. .
  103. D
  104. i
  105. s
  106. p
  107. l
  108. a
  109. y
  111. t
  112. h
  113. e
  115. u
  116. p
  117. l
  118. o
  119. a
  120. d
  121. e
  122. d
  124. i
  125. m
  126. a
  127. g
  128. e
  130. u
  131. s
  132. i
  133. n
  134. g
  136. t
  137. h
  138. e
  140. p
  141. u
  142. b
  143. l
  144. i
  145. c
  147. U
  148. R
  149. L
  150. .
  152. A
  153. d
  154. d
  156. R
  157. L
  158. S
  160. s
  161. o
  163. u
  164. s
  165. e
  166. r
  167. s
  169. c
  170. a
  171. n
  173. o
  174. n
  175. l
  176. y
  178. o
  179. v
  180. e
  181. r
  182. w
  183. r
  184. i
  185. t
  186. e
  188. t
  189. h
  190. e
  191. i
  192. r
  194. o
  195. w
  196. n
  198. a
  199. v
  200. a
  201. t
  202. a
  203. r
  204. .

Supporting Resources

Go deeper with these references.

Supabase
Supabase Documentation Complete reference for Auth, Database, Storage, Edge Functions, and Realtime.
→
GitHub
Supabase Examples Official collection of quickstarts and example apps in multiple frameworks.
→
YouTube
Supabase YouTube Channel Tutorial videos from the Supabase team covering new features and patterns.
→

Day 3 Checkpoint

Before moving on, make sure you can answer these without looking:

Continue To Day 4
Edge Functions
→