@atom-design-mog/upload-field

A customizable file upload component for React Native with:

• Image/File picker
• Camera fallback
• File size validation
• Live upload progress (simulated)
• File preview + remove option
• Designed for the Atom Design System (Moglix)

📦 Installation

Install the package:

npm install @atom-design-mog/upload-field

Required dependencies (if not already installed):

npm install react-native-image-picker react-native-progress

For iOS, run pods:

cd ios && pod install

🚀 Usage

import UploadField from '@atom-design-mog/upload-field';

export default function App() {
  const handleFileSelected = (file) => {
    console.log('Selected File → ', file);
  };

  return (
    <UploadField onFileSelected={handleFileSelected} maxSizeMB={50} />
  );
}

🧩 Props

| Prop | Type | Default | Description | | ---------------- | ---------------- | ----------- | -------------------------------- | | onFileSelected | (file) => void | undefined | Callback when a file is selected | | maxSizeMB | number | 50 | Maximum allowed file size |

📁 File Object Returned

When a file is selected, the component returns an object shaped like:

{
  "uri": "string",
  "name": "string",
  "size": 12345, // in bytes
  "type": "image/jpeg" // MIME type
}

🖼 Example Output UI

• Upload button
• Shows upload progress
• Displays selected file name + size
• Allows deleting uploaded file
• Simulated progress bar (can be integrated with real upload APIs)

🧠 How It Works

1. User selects a file via the image library; if the library fails the component falls back to camera.
2. The component validates file size against maxSizeMB.
3. A simulated upload progress updates every 500ms; replace simulateUpload() with your real upload logic to integrate.

🛠 Example Test Screen

import React from 'react';
import { ScrollView, View, Text } from 'react-native';
import UploadField from '@atom-design-mog/upload-field';

export default function TestFileInputsScreen() {
  const handleFileSelected = (file) => {
    console.log('File selected:', file);
  };

  return (
    <ScrollView>
      <View style={{ padding: 20, gap: 40 }}>
        <Text>Upload Field with Progress Bar</Text>
        <UploadField onFileSelected={handleFileSelected} />
      </View>
    </ScrollView>
  );
}

📚 Features

• Image picker + file picker
• Camera fallback
• Upload progress simulation (replaceable with real API)
• File size validation and name/size preview
• Remove / reset file action
• Clean UI following the Moglix Atom Design System

Author

Avi Gupta