Use direct upload for uploading files to Rails ActiveStorage.
Install this package and rn-fetch-blob
yarn add react-native-activestorage rn-fetch-blob
import { directUpload } from 'react-native-activestorage'
const file = {
name: 'image.jpg',
size: 123456,
type: 'image/jpeg',
path: '/var/lib/...'
}
const directUploadsUrl = 'https://localhost:3000/rails/active_storage/direct_uploads';
directUpload({ file, directUploadsUrl }, ({ status, progress, cancel }) => {
// status - waiting/progress/finished/error
// progress - 0-100%
// cancel - function to stop uploading a file
});
Use with React Component
import DirectUpload from 'react-native-activestorage'
const directUploadsUrl = 'https://localhost:3000/rails/active_storage/direct_uploads';
const Upload = () => (
<DirectUpload directUploadsUrl={directUploadUrl} onSuccess={({ signedIds }) => console.warn({ signedIds })}>
{({ handleUpload, uploading, uploads }) => (
<View>
<View onClick={() => showPicker(handleUpload)}>
<Text>Upload</Text>
</View>
{uploads.map(upload => <UploadItem upload={upload} key={upload.id} />)}
</View>
)}
</DirectUpload>
)
The package is available as open source under the terms of the MIT License.