React Native My Uploader

Android için basit ve esnek bir dosya seçici. Bu paket, hem kullanıma hazır bir buton bileşeni hem de kendi arayüzünüzü oluşturmanız için bir Promise tabanlı fonksiyon sunar.

Özellikler

• Tekli ve Çoklu Dosya Seçimi: multipleFiles prop'u ile kolayca geçiş yapın.
• Dosya Tipi Filtreleme: Sadece belirli MIME tiplerindeki (image/*, application/pdf vb.) dosyaların seçilmesine izin verin.
• Limit Kontrolleri: Seçilebilecek maksimum dosya sayısı (maxFiles) ve her bir dosya için maksimum boyut (maxSize) belirleyin.
• Hariç Tutma: Daha önce seçilmiş dosyaların tekrar seçilmesini engelleyin (excludedUris).
• Base64 Çıktısı: Seçilen dosyaların base64 formatında verisini döndürür.
• İki Farklı Kullanım: Hızlı entegrasyon için <MyUploader /> bileşeni veya tam kontrol için pickFile() fonksiyonu.

Kurulum

npm install react-native-my-uploader-android  //"version": "1.0.32"

veya

yarn add react-native-my-uploader-android  //"version": "1.0.32"

Kullanım

Bu paketi kullanmanın iki ana yolu vardır:

Yöntem 1: Hazır Buton <MyUploader /> (Önerilen ve Kolay Yol)

Hızlıca bir "Dosya Seç" butonu eklemek için idealdir. Tüm mantık bileşenin kendi içindedir.

import React,{useState} from 'react';
import { Text,View, Alert, StyleSheet } from 'react-native';
import MyUploader, { FileInfo } from 'react-native-my-uploader-android';

export default function App() {

  const [files,setFiles]=useState<FileInfo[] |null>(null);

  const handleFilesSelected = (files: FileInfo[]) => {
    console.log('Seçilen Dosyalar:', files);
    setFiles(prev => prev ? [...prev, ...files] : [...files]);
  };

  return (
    <View style={styles.container}>
      <MyUploader
        onSelect={handleFilesSelected}
        onError={(error)=>{ Alert.alert('Bir Hata Oluştu', error.message)}}
        buttonPlaceHolder="En Fazla 3 Resim Seç (Max 2MB)"
        ButtonStyle={styles.customButton}
        ButtonTextStyle={styles.customButtonText}
        multipleFiles={true}
        fileTypes={['image/*']}
        maxSize={2}
        maxFiles={3}
      />

      {files ? (
        <View style={styles.fileListContainer}>
          <Text style={styles.fileListTitle}>Seçilen Dosyalar:</Text>

          {files.map((file, index) => (
            <Text key={index} style={styles.fileName}>
              {file.fileName} ({file.fileSize} KB)
            </Text>
          ))}
        </View>
      ) : (
        <View style={styles.fileListContainer}>
          <Text>Dosya Bulunmamaktadır</Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  customButton: {
    backgroundColor: '#00796B',
    paddingVertical: 15,
    paddingHorizontal: 30,
    borderRadius: 30,
  },
  customButtonText: {
    color: '#FFFFFF',
    fontSize: 14,
  },
  fileListContainer: {
    marginTop: 20,
    padding: 15,
    backgroundColor: '#f0f0f0',
    borderRadius: 8,
    width: '100%',
  },
  fileListTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  fileName: {
    fontSize: 14,
    color: '#333',
    marginBottom: 5,
  },
});

Yöntem 2: Fonksiyon pickFile() (Tam Kontrol İçin)

Kendi özel butonunuzu veya dokunma alanınızı tasarlamak istediğinizde bu yöntemi kullanın. async/await ile çalışır ve size tam kontrol sağlar.

import React,{useState} from 'react';
import { Text,View, Alert, StyleSheet ,TouchableOpacity} from 'react-native';
import { pickFile ,FileInfo} from 'react-native-my-uploader-android';

export default function App() {
  const [pickFiles,setPickFiles]=useState<FileInfo[] |null>(null)

  const handlePress = async () => {
    try {
      // Dosya seçiciyi aç ve sonucu bekle
      const files = await pickFile({
        multipleFiles: true,
        fileTypes: ['application/pdf', 'application/vnd.ms-excel'], // Sadece PDF ve Excel
        maxFiles: 5,
        maxSize: 10, // 10MB
      });
      setPickFiles(prev => prev ? [...prev, ...files] : [...files]);
      console.log(files);

    } catch (error: any) {
        Alert.alert('Hata', error.message);
    }
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.fancyButton} onPress={handlePress}>
        <Text style={styles.fancyButtonText}>PDF veya Excel Yükle</Text>
      </TouchableOpacity>
        {pickFiles ?(
          <View style={styles.fileListContainer}>
            <Text style={styles.fileListTitle}>Seçilen Dosyalar:</Text>
            {pickFiles.map((file, index) => (
              <View key={index}>
                <Text style={styles.fileName}>{file.fileName} ({file.fileSize} KB)</Text>
              </View>
            ))}
          </View>
        ):(
          <View>
            <Text>Dosya bulunmamaktadır.</Text>
            </View>
        )};
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  customButton: {
    backgroundColor: '#00796B',
    paddingVertical: 15,
    paddingHorizontal: 30,
    borderRadius: 30,
  },
  customButtonText: {
    color: '#FFFFFF',
    fontSize: 14,
  },
  fileListContainer: {
    marginTop: 20,
    padding: 15,
    backgroundColor: '#f0f0f0',
    borderRadius: 8,
    width: '100%',
  },
  fileListTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  fileName: {
    fontSize: 14,
    color: '#333',
    marginBottom: 15,
    borderBottomWidth:1,
    paddingBottom:10
  },
    fancyButton: {
    borderWidth: 2,
    borderColor: '#6200EE',
    padding: 15,
    borderRadius: 10,
  },
  fancyButtonText: {
    color: '#6200EE',
    fontWeight: 'bold',
    fontSize: 16,
  },
});

Prop'lar

<MyUploader /> & pickFile() Ortak Prop'ları (DocumentPickerOptions)

| Prop | Tip | Varsayılan | Açıklama | |----------------|-------------|------------|-------------------------------------------------------------------------| | multipleFiles| boolean | false | true ise birden fazla dosya seçimine izin verir. | | maxFiles | number | 3 | multipleFiles true iken seçilebilecek maksimum dosya sayısı. 0 ise limitsiz. | | maxSize | number | 0 | Her bir dosya için MB cinsinden maksimum boyut. 0 ise limitsiz. | | fileTypes | string[] | ['*/*'] | Seçilebilecek dosya tipleri (MIME). Örn: ['image/jpeg', 'image/png']. | | excludedUris | string[] | [] | Seçim sonuçlarından hariç tutulacak dosyaların fileUri listesi. |

<MyUploader /> Özel Prop'ları

| Prop | Tip | Varsayılan | Açıklama | |---------------------|-----------------------|-------------|----------------------------------------| | onSelect | (files: FileInfo[]) => void | Zorunlu | Dosyalar başarıyla seçildiğinde tetiklenir. | | onError | (error: Error) => void | undefined | Bir hata oluştuğunda tetiklenir. | | buttonPlaceHolder | string | "Dosya Seç"| Buton üzerinde görünecek metin. | | ButtonStyle | ViewStyle | undefined | Butonun TouchableOpacity stili. | | ButtonTextStyle | TextStyle | undefined | Buton metninin Text stili. | | disabled | boolean | false | true ise buton devre dışı kalır. |

Dönen Değer (FileInfo objesi)

Her iki yöntem de FileInfo objelerinden oluşan bir dizi döndürür:

interface FileInfo {
  fileName: string;     // Dosyanın adı
  fileSize: number;     // Dosyanın boyutu (byte cinsinden)
  fileType: string;     // Dosyanın MIME tipi
  fileUri: string;      // Dosyanın cihazdaki URI'si (Content URI)
  base64: string | null; // Dosyanın Base64 kodlanmış verisi
}

Katkıda Bulunma (Contributing)

Katkılarınız için her zaman açığız! Lütfen CONTRIBUTING.md dosyasını inceleyin.

Lisans

MIT

Made with create-react-native-library