{"_id":"@atom-design-mog/upload-field","_rev":"2-e2f8157034695a00524592114dae5d72","name":"@atom-design-mog/upload-field","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@atom-design-mog/upload-field","version":"1.0.0","keywords":["react-native","upload","file","progress","component"],"author":{"name":"Avi Gupta"},"license":"MIT","_id":"@atom-design-mog/upload-field@1.0.0","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"bd29cc40b7b1b0ba2f31d6d3825c16c9772ef1f4","tarball":"https://registry.npmjs.org/@atom-design-mog/upload-field/-/upload-field-1.0.0.tgz","fileCount":3,"integrity":"sha512-CabhSLUzta0XmHAUayVccWSLJLVp2UXOFJx3LpcQkYXk7o2Ej4jL1DoE9ig2OD2aTVshCtj9yHSQZ5Q+JvU2Vg==","signatures":[{"sig":"MEYCIQD57Ezx4+g8/LpoMH6iRbDXTBXzQ91aymyRa7F4i2i/7gIhAPb8ZZy7LUELlnSY3NAUHiGtnLkibbmJ1ovcOHh/6QOg","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":5882},"main":"index.js","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"React Native UploadField component with progress and file picker","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","react-native-progress":"*","react-native-image-picker":"*"},"_npmOperationalInternal":{"tmp":"tmp/upload-field_1.0.0_1763727403084_0.6057735996044342","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atom-design-mog/upload-field","version":"1.0.1","description":"React Native UploadField component with progress and file picker","main":"index.js","author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","upload","file","progress","component"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","react-native-progress":"*","react-native-image-picker":"*"},"_id":"@atom-design-mog/upload-field@1.0.1","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-ccaYIS1oyeGoZ8QShZYZq4WXt3/ja3c+uaimiNpgyQEwgCSl/5D29EoyPGZAv/9E1SoYq3PcJ90NOEXzn52vDg==","shasum":"ef2c45d392294d3fbbb4763c100fd95fb8a36490","tarball":"https://registry.npmjs.org/@atom-design-mog/upload-field/-/upload-field-1.0.1.tgz","fileCount":4,"unpackedSize":8701,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCNhmbvl7hQ7RENnTvZF9kl8tQ2VmLMUfug6NKfWteapgIhANaDJa/iDRaI9kOZGGL16lXbkMdNzp7HWwVADg3ED5q0"}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/upload-field_1.0.1_1763969221781_0.6565477308944374"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-21T12:16:42.998Z","modified":"2025-11-24T07:27:02.129Z","1.0.0":"2025-11-21T12:16:43.266Z","1.0.1":"2025-11-24T07:27:01.933Z"},"author":{"name":"Avi Gupta"},"license":"MIT","keywords":["react-native","upload","file","progress","component"],"description":"React Native UploadField component with progress and file picker","maintainers":[{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"# @atom-design-mog/upload-field\n\nA customizable file upload component for React Native with:\n\n- Image/File picker\n- Camera fallback\n- File size validation\n- Live upload progress (simulated)\n- File preview + remove option\n- Designed for the Atom Design System (Moglix)\n\n---\n\n## 📦 Installation\n\nInstall the package:\n\n```bash\nnpm install @atom-design-mog/upload-field\n```\n\nRequired dependencies (if not already installed):\n\n```bash\nnpm install react-native-image-picker react-native-progress\n```\n\nFor iOS, run pods:\n\n```bash\ncd ios && pod install\n```\n\n---\n\n## 🚀 Usage\n\n```javascript\nimport UploadField from '@atom-design-mog/upload-field';\n\nexport default function App() {\n  const handleFileSelected = (file) => {\n    console.log('Selected File → ', file);\n  };\n\n  return (\n    <UploadField onFileSelected={handleFileSelected} maxSizeMB={50} />\n  );\n}\n```\n\n---\n\n## 🧩 Props\n\n| Prop             | Type             | Default     | Description                      |\n| ---------------- | ---------------- | ----------- | -------------------------------- |\n| `onFileSelected` | `(file) => void` | `undefined` | Callback when a file is selected |\n| `maxSizeMB`      | `number`         | `50`        | Maximum allowed file size        |\n\n---\n\n## 📁 File Object Returned\n\nWhen a file is selected, the component returns an object shaped like:\n\n```json\n{\n  \"uri\": \"string\",\n  \"name\": \"string\",\n  \"size\": 12345, // in bytes\n  \"type\": \"image/jpeg\" // MIME type\n}\n```\n\n---\n\n## 🖼 Example Output UI\n\n- Upload button\n- Shows upload progress\n- Displays selected file name + size\n- Allows deleting uploaded file\n- Simulated progress bar (can be integrated with real upload APIs)\n\n---\n\n## 🧠 How It Works\n\n1. User selects a file via the image library; if the library fails the component falls back to camera.\n2. The component validates file size against `maxSizeMB`.\n3. A simulated upload progress updates every 500ms; replace `simulateUpload()` with your real upload logic to integrate.\n\n---\n\n## 🛠 Example Test Screen\n\n```javascript\nimport React from 'react';\nimport { ScrollView, View, Text } from 'react-native';\nimport UploadField from '@atom-design-mog/upload-field';\n\nexport default function TestFileInputsScreen() {\n  const handleFileSelected = (file) => {\n    console.log('File selected:', file);\n  };\n\n  return (\n    <ScrollView>\n      <View style={{ padding: 20, gap: 40 }}>\n        <Text>Upload Field with Progress Bar</Text>\n        <UploadField onFileSelected={handleFileSelected} />\n      </View>\n    </ScrollView>\n  );\n}\n```\n\n---\n\n## 📚 Features\n\n- Image picker + file picker\n- Camera fallback\n- Upload progress simulation (replaceable with real API)\n- File size validation and name/size preview\n- Remove / reset file action\n- Clean UI following the Moglix Atom Design System\n\n---\n\n## Author\n\nAvi Gupta\n","readmeFilename":"README.md"}