Update storage upload and scroll view with download.

Author: saimon24

README.md

@@ -1,14 +1,25 @@
-# Expo Router Example
+# React Native File Upload with Expo to Supabase Storage
 
-Use [`expo-router`](https://expo.github.io/router) to build native navigation using files in the `app/` directory.
+This app is using the [`expo-router`](https://expo.github.io/router) and [Supabase](https://supabase.io) to upload files to Supabase Storage.
 
-## 🚀 How to use
+Routes are protected by [Supabase Auth](https://supabase.io/docs/guides/auth).
 
-```sh
-npx create-expo-app -e with-router
-```
+## Configuration
+
+1. Make sure to include your own Supabase keys inside the `config/initSupabase.ts` file.
+2. Also create a new bucket `files` inside Supabase Storage, and use the `create-policy.sql` to create a policy that allows users to upload files only to their own folder inside the bucket.
+
+## Running this example
 
-## 📝 Notes
+To run the provided example, you can use:
+
+```bash
+npm expo start
+```
 
-- [Expo Router: Docs](https://expo.github.io/router)
-- [Expo Router: Repo](https://github.com/expo/router)
+## Preview
+<div style="display: flex; flex-direction: 'row';">
+<img src="./screenshots/1.png" width=30%>
+<img src="./screenshots/2.png" width=30%>
+<img src="./screenshots/3.png" width=30%>
+</div>

app/(auth)/_layout.tsx

@@ -1,6 +1,13 @@
 import { Stack } from 'expo-router';
+import { useAuth } from '../../provider/AuthProvider';
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
 
+// Simple stack layout within the authenticated area
 const StackLayout = () => {
+  const { signOut } = useAuth();
+
   return (
     <Stack
       screenOptions={{
@@ -13,6 +20,11 @@ const StackLayout = () => {
         name="list"
         options={{
           headerTitle: 'My Files',
+          headerRight: () => (
+            <TouchableOpacity onPress={signOut}>
+              <Ionicons name="log-out-outline" size={30} color={'#fff'} />
+            </TouchableOpacity>
+          ),
         }}></Stack.Screen>
     </Stack>
   );

app/(auth)/list.tsx

@@ -1,68 +1,29 @@
-import { View, Text, StyleSheet, TouchableOpacity, Image, FlatList } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
 import React, { useEffect, useState } from 'react';
 import { Ionicons } from '@expo/vector-icons';
 import * as ImagePicker from 'expo-image-picker';
 import { useAuth } from '../../provider/AuthProvider';
-import Uppy from '@uppy/core';
-import Tus from '@uppy/tus';
-import { TusFileReader } from '../../helper/tusFileReader';
 import * as FileSystem from 'expo-file-system';
 import { decode } from 'base64-arraybuffer';
-
-const SUPABASE_STORAGE_URL = 'https://kolrncrjvromhaivenfp.supabase.co/storage/v1/';
+import { supabase } from '../../config/initSupabase';
+import { FileObject } from '@supabase/storage-js';
+import ImageItem from '../../components/ImageItem';
 
 const list = () => {
-  const { session } = useAuth();
-  const [uppy, setUppy] = useState<Uppy>(null);
-  const [progress, setProgress] = useState(0);
-  const [uploading, setUploading] = useState(false);
-  const [files, setFiles] = useState([]);
+  const { user } = useAuth();
+  const [files, setFiles] = useState<FileObject[]>([]);
 
   useEffect(() => {
-    if (!session) return;
-
-    const uppyInstance = new Uppy({ debug: true, autoProceed: false })
-      .use(Tus, {
-        endpoint: `${SUPABASE_STORAGE_URL}object/files/${session.user.id}`,
-        // fileReader: new TusFileReader(), <- this is not working
-        // retryDelays: [0, 3000, 5000, 10000, 20000],
-        // uploadDataDuringCreation: true,
-        headers: {
-          authorization: `Bearer ${session.access_token}`,
-          'x-upsert': 'true',
-        },
-        chunkSize: 6 * 1024 * 1024,
-        allowedMetaFields: ['bucketName', 'objectName', 'contentType', 'cacheControl'],
-      })
+    if (!user) return;
 
-      .on('file-added', (file) => {
-        file.meta = {
-          ...file.meta,
-          bucketName: `files`,
-          objectName: `${session.user.id}/${file.name}`,
-          contentType: file.type,
-        };
-        console.log('file-added:', file);
-      })
-      .on('upload-progress', (file, progress) => {
-        console.log('upload-progress:', progress);
+    // Load user images
+    loadImages();
+  }, [user]);
 
-        setProgress(progress.bytesUploaded / progress.bytesTotal);
-      })
-      .on('complete', (result) => {
-        console.log('complete:', result);
-        setFiles([]);
-        setUploading(false);
-      })
-      .on('progress', (progress) => {
-        console.log('progress:', progress);
-      })
-      .on('error', (error) => {
-        console.log('error:', JSON.stringify(error));
-      });
-
-    setUppy(uppyInstance);
-  }, [session]);
+  const loadImages = async () => {
+    const { data } = await supabase.storage.from('files').list(user.id);
+    setFiles(data);
+  };
 
   const onSelectImage = async () => {
     const options: ImagePicker.ImagePickerOptions = {
@@ -74,84 +35,29 @@ const list = () => {
 
     // Save image if not cancelled
     if (!result.canceled) {
-      // UPPY APPROACH
       const img = result.assets[0];
-      const fetchResponse = await fetch(img.uri);
-      const blob = await fetchResponse.blob();
-      console.log('🚀 ~ file: list.tsx:83 ~ onSelectImage ~ blob:', blob);
+      const base64 = await FileSystem.readAsStringAsync(img.uri, { encoding: 'base64' });
+      const filePath = `${user.id}/${new Date().getTime()}.${img.type === 'image' ? 'png' : 'mp4'}`;
       const contentType = img.type === 'image' ? 'image/png' : 'video/mp4';
-      const fileName = `${new Date().getTime()}.${img.type === 'image' ? 'png' : 'mp4'}`;
-      console.log('🚀 ~ file: list.tsx:87 ~ onSelectImage ~ fileName:', fileName);
-
-      // Add file to uppy with blob data
-      uppy.addFile({
-        id: fileName,
-        name: fileName,
-        type: blob.type,
-        data: blob,
-        size: blob.size,
-      });
-
-      // Add image to local files array
-      setFiles((old) => [...old, { uri: img.uri, fileName, contentType }]);
-
-      // SUPABASE STANDARD APPROACH
-      // THIS WORKS
-      // const img = result.assets[0];
-      // const base64 = await FileSystem.readAsStringAsync(img.uri, { encoding: 'base64' });
-      // const filePath = `${user.id}/${new Date().getTime()}.${img.type === 'image' ? 'png' : 'mp4'}`;
-      // const contentType = img.type === 'image' ? 'image/png' : 'video/mp4';
-      // let { error, data } = await supabase.storage.from('files').upload(filePath, decode(base64), { contentType });
-      // console.log('error', error);
-      // console.log('data', data);
+      await supabase.storage.from('files').upload(filePath, decode(base64), { contentType });
+      loadImages();
     }
   };
 
-  const onUpload = async () => {
-    uppy.upload();
-    setUploading(true);
-  };
-
-  const onPause = async () => {
-    uppy.pauseAll();
-    setUploading(false);
-  };
-
-  const onResume = async () => {
-    uppy.resumeAll();
-    setUploading(true);
-  };
-
-  // Render image list item
-  const renderItem = ({ item }: { item: any }) => {
-    return (
-      <View style={{ flexDirection: 'row', margin: 1, alignItems: 'center', gap: 5 }}>
-        <Image style={{ width: 80, height: 80 }} source={{ uri: item.uri }} />
-        <Text style={{ flex: 1, color: '#fff' }}>{item.fileName}</Text>
-      </View>
-    );
+  const onRemoveImage = async (item: FileObject, listIndex: number) => {
+    supabase.storage.from('files').remove([`${user.id}/${item.name}`]);
+    const newFiles = [...files];
+    newFiles.splice(listIndex, 1);
+    setFiles(newFiles);
   };
 
   return (
     <View style={styles.container}>
-      {/* Progress bar */}
-      {uploading && <View style={{ width: `${progress}%`, height: 4, backgroundColor: '#fff', marginBottom: 10, borderRadius: 2 }} />}
-
-      {/* Row with 3 buttons to start, pause and resume uploads */}
-      <View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
-        <TouchableOpacity onPress={onUpload} style={styles.button}>
-          <Text style={{ color: '#fff' }}>Upload</Text>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={onPause} style={styles.button}>
-          <Text style={{ color: '#fff' }}>Pause</Text>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={onResume} style={styles.button}>
-          <Text style={{ color: '#fff' }}>Resume</Text>
-        </TouchableOpacity>
-      </View>
-
-      {/* List of images to upload */}
-      <FlatList data={files} renderItem={renderItem} style={{ marginTop: 50 }} />
+      <ScrollView>
+        {files.map((item, index) => (
+          <ImageItem key={item.id} item={item} userId={user.id} onRemoveImage={() => onRemoveImage(item, index)} />
+        ))}
+      </ScrollView>
 
       {/* FAB to add images */}
       <TouchableOpacity onPress={onSelectImage} style={styles.fab}>
@@ -179,12 +85,6 @@ const styles = StyleSheet.create({
     backgroundColor: '#2b825b',
     borderRadius: 100,
   },
-  button: {
-    borderWidth: 2,
-    borderColor: '#2b825b',
-    padding: 12,
-    borderRadius: 4,
-  },
 });
 
 export default list;

app/_layout.tsx

@@ -2,6 +2,7 @@ import { Slot, useRouter, useSegments } from 'expo-router';
 import { useEffect } from 'react';
 import { AuthProvider, useAuth } from '../provider/AuthProvider';
 
+// Makes sure the user is authenticated before accessing protected pages
 const InitialLayout = () => {
   const { session, initialized } = useAuth();
   const segments = useSegments();
@@ -10,24 +11,22 @@ const InitialLayout = () => {
   useEffect(() => {
     if (!initialized) return;
 
+    // Check if the path/url is in the (auth) group
     const inAuthGroup = segments[0] === '(auth)';
 
-    // console.log('CHANGED: ', session);
-
     if (session && !inAuthGroup) {
-      console.log('REDIRECTING TO LIST');
-
+      // Redirect authenticated users to the list page
       router.replace('/list');
     } else if (!session) {
-      console.log('REDIRECTING TO LOGIN');
-
+      // Redirect unauthenticated users to the login page
       router.replace('/');
     }
   }, [session, initialized]);
 
   return <Slot />;
 };
 
+// Wrap the app with the AuthProvider
 const RootLayout = () => {
   return (
     <AuthProvider>

app/index.tsx

@@ -5,10 +5,11 @@ import Spinner from 'react-native-loading-spinner-overlay';
 import { supabase } from '../config/initSupabase';
 
 const Login = () => {
-  const [email, setEmail] = useState('[email protected]');
-  const [password, setPassword] = useState('123456');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
   const [loading, setLoading] = useState(false);
 
+  // Sign in with email and password
   const onSignInPress = async () => {
     setLoading(true);
 
@@ -21,6 +22,7 @@ const Login = () => {
     setLoading(false);
   };
 
+  // Create a new user
   const onSignUpPress = async () => {
     setLoading(true);
     const { error } = await supabase.auth.signUp({

components/ImageItem.tsx

@@ -0,0 +1,34 @@
+import { FileObject } from '@supabase/storage-js';
+import { Image, View, Text, TouchableOpacity } from 'react-native';
+import { supabase } from '../config/initSupabase';
+import { useState } from 'react';
+import { Ionicons } from '@expo/vector-icons';
+
+// Image item component that displays the image from Supabase Storage and a delte button
+const ImageItem = ({ item, userId, onRemoveImage }: { item: FileObject; userId: string; onRemoveImage: () => void }) => {
+  const [image, setImage] = useState<string>('');
+
+  supabase.storage
+    .from('files')
+    .download(`${userId}/${item.name}`)
+    .then(({ data }) => {
+      const fr = new FileReader();
+      fr.readAsDataURL(data);
+      fr.onload = () => {
+        setImage(fr.result as string);
+      };
+    });
+
+  return (
+    <View style={{ flexDirection: 'row', margin: 1, alignItems: 'center', gap: 5 }}>
+      {image ? <Image style={{ width: 80, height: 80 }} source={{ uri: image }} /> : <View style={{ width: 80, height: 80, backgroundColor: '#1A1A1A' }} />}
+      <Text style={{ flex: 1, color: '#fff' }}>{item.name}</Text>
+      {/* Delete image button */}
+      <TouchableOpacity onPress={onRemoveImage}>
+        <Ionicons name="trash-outline" size={20} color={'#fff'} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default ImageItem;

config/initSupabase.ts

@@ -3,6 +3,7 @@ import 'react-native-url-polyfill/auto';
 
 import { createClient } from '@supabase/supabase-js';
 
+// Use a custom secure storage solution for the Supabase client to store the JWT
 const ExpoSecureStoreAdapter = {
   getItem: (key: string) => {
     return SecureStore.getItemAsync(key);
@@ -15,13 +16,10 @@ const ExpoSecureStoreAdapter = {
   },
 };
 
-export const supabase = createClient(
-  'https://kolrncrjvromhaivenfp.supabase.co',
-  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImtvbHJuY3JqdnJvbWhhaXZlbmZwIiwicm9sZSI6ImFub24iLCJpYXQiOjE2ODg0Nzc1MTAsImV4cCI6MjAwNDA1MzUxMH0.QlBUWRQByC9NibQFivFDSeT2FPkq5r_Owyj0MQSQbLQ',
-  {
-    auth: {
-      storage: ExpoSecureStoreAdapter as any,
-      detectSessionInUrl: false,
-    },
-  }
-);
+// Initialize the Supabase client
+export const supabase = createClient('YOUR-SUPABASE-URL', 'YOUR-SUPABASE-ANON-KEY', {
+  auth: {
+    storage: ExpoSecureStoreAdapter as any,
+    detectSessionInUrl: false,
+  },
+});

create-policy.sql

@@ -0,0 +1,5 @@
+CREATE POLICY "Enable storage access for users based on user_id" ON "storage"."objects"
+AS PERMISSIVE FOR ALL
+TO public
+USING (bucket_id = 'files' AND auth.uid()::text = (storage.foldername(name))[1])
+WITH CHECK (bucket_id = 'files' AND auth.uid()::text = (storage.foldername(name))[1])