Week 7: Camera, Media & the File System

npx expo install expo-camera

import { CameraView, useCameraPermissions } from 'expo-camera';
import { useRef } from 'react';

function CameraScreen() {
  const [permission, requestPermission] = useCameraPermissions();
  const cameraRef = useRef<CameraView>(null);

  if (!permission) return null; // still loading
  if (!permission.granted) {
    return (
      <View>
        <Text>We need your permission to use the camera.</Text>
        <Pressable onPress={requestPermission}><Text>Grant permission</Text></Pressable>
      </View>
    );
  }

  async function takePhoto() {
    const photo = await cameraRef.current?.takePictureAsync({ quality: 0.7 });
    console.log(photo?.uri); // a local file:// URI
  }

  return (
    <CameraView ref={cameraRef} style={{ flex: 1 }} facing="back">
      <Pressable onPress={takePhoto} style={{ alignSelf: 'center', marginBottom: 24 }}>
        <Text>Capture</Text>
      </Pressable>
    </CameraView>
  );
}

npx expo install expo-image-picker

import * as ImagePicker from 'expo-image-picker';

async function pickImage() {
  const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (status !== 'granted') return;

  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    quality: 0.7,
  });

  if (!result.canceled) {
    return result.assets[0].uri; // a local file:// URI, same shape as the camera result
  }
}

import * as FileSystem from 'expo-file-system';

async function saveToAppStorage(tempUri: string) {
  const filename = tempUri.split('/').pop();
  const destination = FileSystem.documentDirectory + filename;

  await FileSystem.copyAsync({ from: tempUri, to: destination });
  return destination; // safe to store this URI long-term
}

async function listSavedPhotos() {
  const files = await FileSystem.readDirectoryAsync(FileSystem.documentDirectory!);
  return files.filter((f) => f.endsWith('.jpg') || f.endsWith('.png'));
}

async function uploadPhoto(uri: string) {
  const formData = new FormData();
  formData.append('photo', {
    uri,
    name: 'photo.jpg',
    type: 'image/jpeg',
  } as any);

  const response = await fetch('https://api.example.com/upload', {
    method: 'POST',
    headers: { 'Content-Type': 'multipart/form-data' },
    body: formData,
  });

  if (!response.ok) throw new Error('Upload failed');
  return response.json();
}