การรองรับ React Native

Dropup ทำงานใน React Native ด้วย native adapter

การติดตั้ง

npm install @samithahansaka/dropup

# สำหรับเลือกรูปภาพ
npx expo install expo-image-picker

# สำหรับเลือกเอกสาร
npx expo install expo-document-picker

# สำหรับจัดการรูปภาพ (ไม่บังคับ)
npx expo install expo-image-manipulator

การตั้งค่าพื้นฐาน

import { useDropup } from '@samithahansaka/dropup';
import { NativeAdapter } from '@samithahansaka/dropup/native';
import * as ImagePicker from 'expo-image-picker';
import { View, Text, Button, Image, FlatList } from 'react-native';

function NativeUploader() {
  const { files, actions, state } = useDropup({
    // ใช้ native adapter
    adapter: NativeAdapter,

    upload: {
      url: 'https://your-api.com/upload',
    },
  });

  const pickImage = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsMultipleSelection: true,
      quality: 0.8,
    });

    if (!result.canceled) {
      // แปลงเป็น File-like objects
      const files = result.assets.map(asset => ({
        uri: asset.uri,
        name: asset.fileName || 'photo.jpg',
        type: asset.mimeType || 'image/jpeg',
      }));

      actions.addFiles(files);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="เลือกรูปภาพ" onPress={pickImage} />

      <FlatList
        data={files}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <View style={styles.fileItem}>
            {item.preview && (
              <Image source={{ uri: item.preview }} style={styles.preview} />
            )}
            <Text>{item.name}</Text>
            <Text>{item.status}</Text>
            {item.status === 'uploading' && (
              <Text>{item.progress}%</Text>
            )}
          </View>
        )}
      />

      <Button
        title="อัปโหลดทั้งหมด"
        onPress={() => actions.upload()}
        disabled={state.isUploading}
      />
    </View>
  );
}

const styles = {
  container: {
    flex: 1,
    padding: 20,
  },
  fileItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  preview: {
    width: 50,
    height: 50,
    marginRight: 10,
    borderRadius: 4,
  },
};

การผสานรวม Image Picker

เลือกจากแกลเลอรี

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

const pickFromGallery = async () => {
  // ขอสิทธิ์
  const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (status !== 'granted') {
    alert('ต้องการสิทธิ์');
    return;
  }

  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.All,
    allowsMultipleSelection: true,
    quality: 0.8,
    selectionLimit: 10,
  });

  if (!result.canceled) {
    const files = result.assets.map(asset => ({
      uri: asset.uri,
      name: asset.fileName || `photo_${Date.now()}.jpg`,
      type: asset.mimeType || 'image/jpeg',
      size: asset.fileSize,
    }));

    actions.addFiles(files);
  }
};

ถ่ายภาพ

const takePhoto = async () => {
  const { status } = await ImagePicker.requestCameraPermissionsAsync();
  if (status !== 'granted') {
    alert('ต้องการสิทธิ์กล้อง');
    return;
  }

  const result = await ImagePicker.launchCameraAsync({
    quality: 0.8,
    allowsEditing: true,
    aspect: [4, 3],
  });

  if (!result.canceled) {
    const asset = result.assets[0];
    actions.addFiles([{
      uri: asset.uri,
      name: `photo_${Date.now()}.jpg`,
      type: asset.mimeType || 'image/jpeg',
    }]);
  }
};

Document Picker

import * as DocumentPicker from 'expo-document-picker';

const pickDocument = async () => {
  const result = await DocumentPicker.getDocumentAsync({
    type: ['application/pdf', 'application/msword'],
    multiple: true,
  });

  if (result.type === 'success') {
    actions.addFiles([{
      uri: result.uri,
      name: result.name,
      type: result.mimeType,
      size: result.size,
    }]);
  }
};

การบีบอัดรูปภาพ (Native)

import * as ImageManipulator from 'expo-image-manipulator';

async function compressNativeImage(uri: string): Promise<string> {
  const result = await ImageManipulator.manipulateAsync(
    uri,
    [{ resize: { width: 1200 } }],
    { compress: 0.7, format: ImageManipulator.SaveFormat.JPEG }
  );

  return result.uri;
}

// ใช้กับ Dropup
const { actions } = useDropup({
  onFilesAdded: async (newFiles) => {
    for (const file of newFiles) {
      if (file.type.startsWith('image/')) {
        const compressedUri = await compressNativeImage(file.uri);
        actions.updateFileMeta(file.id, { compressedUri });
      }
    }
  },
});

ตัวอย่าง Native เต็มรูปแบบ

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Image,
  FlatList,
  StyleSheet,
  ActivityIndicator,
} from 'react-native';
import { useDropup } from '@samithahansaka/dropup';
import { NativeAdapter } from '@samithahansaka/dropup/native';
import * as ImagePicker from 'expo-image-picker';
import * as DocumentPicker from 'expo-document-picker';

export default function FileUploader() {
  const { files, actions, state } = useDropup({
    adapter: NativeAdapter,
    maxFiles: 10,
    upload: {
      url: 'https://your-api.com/upload',
      headers: {
        'Authorization': 'Bearer token',
      },
    },
    onUploadComplete: (file) => {
      console.log('อัปโหลดแล้ว:', file.uploadedUrl);
    },
    onUploadError: (file, error) => {
      console.error('ล้มเหลว:', error.message);
    },
  });

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

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

    if (!result.canceled) {
      const files = result.assets.map(asset => ({
        uri: asset.uri,
        name: asset.fileName || 'image.jpg',
        type: asset.mimeType || 'image/jpeg',
      }));
      actions.addFiles(files);
    }
  };

  const pickDocuments = async () => {
    const result = await DocumentPicker.getDocumentAsync({
      multiple: true,
    });

    if (!result.canceled) {
      const files = result.assets.map(asset => ({
        uri: asset.uri,
        name: asset.name,
        type: asset.mimeType,
        size: asset.size,
      }));
      actions.addFiles(files);
    }
  };

  const takePhoto = async () => {
    const { status } = await ImagePicker.requestCameraPermissionsAsync();
    if (status !== 'granted') return;

    const result = await ImagePicker.launchCameraAsync({
      quality: 0.8,
    });

    if (!result.canceled) {
      const asset = result.assets[0];
      actions.addFiles([{
        uri: asset.uri,
        name: `photo_${Date.now()}.jpg`,
        type: 'image/jpeg',
      }]);
    }
  };

  const renderFile = ({ item }) => (
    <View style={styles.fileItem}>
      {item.preview && (
        <Image source={{ uri: item.preview }} style={styles.thumbnail} />
      )}
      <View style={styles.fileInfo}>
        <Text style={styles.fileName} numberOfLines={1}>
          {item.name}
        </Text>
        <Text style={styles.fileStatus}>
          {item.status === 'uploading'
            ? `กำลังอัปโหลด ${item.progress}%`
            : item.status}
        </Text>
      </View>
      <TouchableOpacity
        onPress={() => actions.remove(item.id)}
        style={styles.removeBtn}
      >
        <Text style={styles.removeText}>×</Text>
      </TouchableOpacity>
    </View>
  );

  return (
    <View style={styles.container}>
      {/* ปุ่มการทำงาน */}
      <View style={styles.buttonRow}>
        <TouchableOpacity style={styles.button} onPress={pickImages}>
          <Text style={styles.buttonText}>แกลเลอรี</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={takePhoto}>
          <Text style={styles.buttonText}>กล้อง</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={pickDocuments}>
          <Text style={styles.buttonText}>ไฟล์</Text>
        </TouchableOpacity>
      </View>

      {/* รายการไฟล์ */}
      <FlatList
        data={files}
        keyExtractor={item => item.id}
        renderItem={renderFile}
        style={styles.list}
        ListEmptyComponent={
          <Text style={styles.emptyText}>ยังไม่ได้เลือกไฟล์</Text>
        }
      />

      {/* ปุ่มอัปโหลด */}
      <TouchableOpacity
        style={[styles.uploadBtn, state.isUploading && styles.uploadBtnDisabled]}
        onPress={() => actions.upload()}
        disabled={state.isUploading || files.length === 0}
      >
        {state.isUploading ? (
          <View style={styles.uploadingRow}>
            <ActivityIndicator color="white" />
            <Text style={styles.uploadBtnText}>
              กำลังอัปโหลด {state.progress}%
            </Text>
          </View>
        ) : (
          <Text style={styles.uploadBtnText}>
            อัปโหลด {files.length} ไฟล์
          </Text>
        )}
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff',
  },
  buttonRow: {
    flexDirection: 'row',
    gap: 12,
    marginBottom: 16,
  },
  button: {
    flex: 1,
    backgroundColor: '#f0f0f0',
    padding: 16,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: {
    fontWeight: '600',
  },
  list: {
    flex: 1,
  },
  fileItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  thumbnail: {
    width: 50,
    height: 50,
    borderRadius: 4,
    marginRight: 12,
  },
  fileInfo: {
    flex: 1,
  },
  fileName: {
    fontWeight: '500',
  },
  fileStatus: {
    color: '#666',
    fontSize: 12,
    marginTop: 2,
  },
  removeBtn: {
    padding: 8,
  },
  removeText: {
    fontSize: 24,
    color: '#999',
  },
  emptyText: {
    textAlign: 'center',
    color: '#999',
    marginTop: 40,
  },
  uploadBtn: {
    backgroundColor: '#2196f3',
    padding: 16,
    borderRadius: 8,
    alignItems: 'center',
    marginTop: 16,
  },
  uploadBtnDisabled: {
    backgroundColor: '#ccc',
  },
  uploadBtnText: {
    color: 'white',
    fontWeight: '600',
    fontSize: 16,
  },
  uploadingRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
});

ความแตกต่างของแพลตฟอร์ม

ฟีเจอร์	Web	React Native
ลากและวาง	ใช่	ไม่
File picker	Native	expo-image-picker
Preview URLs	Object URLs	File URIs
การเข้าถึงไฟล์	File object	URI-based

Expo vs Bare React Native

Expo (Managed)

ตัวอย่างทั้งหมดข้างต้นทำงานกับ Expo managed workflow

Bare React Native

สำหรับ bare React Native ติดตั้ง native modules:

# แทนที่ expo packages
npm install react-native-image-picker
npm install react-native-document-picker

# Link ถ้าจำเป็น (RN เวอร์ชันเก่า)
npx react-native link

จากนั้นใช้ APIs ที่เกี่ยวข้องจาก packages เหล่านั้น