React Native ActiveStorage

Use direct upload for uploading files to Rails ActiveStorage.

Installation

Install this package and react-native-blob-util

1yarn add react-native-activestorage react-native-blob-util

Usage

Add Active Storage provider

1import { ActiveStorageProvider } from 'react-native-activestorage'
2
3const App = () => (
4  <ActiveStorageProvider host="https://localhost:4000">
5    <Navigation />
6  </ActiveStorageProvider>
7)

You can provide mountPath to provider if you have different than /rails/active_storage

Use with React Hooks

1import { useDirectUpload } from 'react-native-activestorage'
2
3const Upload = () => {
4  const onSuccess = ({ signedIds }) => {
5    // Do something;
6  }
7
8  const { upload, uploading, uploads } = useDirectUpload({ onSuccess });
9
10  const onUploadButtonClick = async () => {
11    const files = await showPicker();
12    const { signedIds } = await upload(files);
13    // Assign signed IDs
14  }
15
16  return (
17    <View>
18      <View onClick={onUploadButtonClick}>
19        <Text>Upload</Text>
20      </View>
21
22      {uploads.map(upload => (
23        <UploadItem upload={upload} key={upload.id} />
24      ))}
25    </View>
26  )
27}

Use with React Component

1import { DirectUpload } from 'react-native-activestorage'
2
3const Upload = () => (
4  <DirectUpload onSuccess={({ signedIds }) => console.warn({ signedIds })}>
5    {({ upload, uploading, uploads }) => (
6      <View>
7        <View onClick={() => showPicker((files) => upload(files))}>
8          <Text>Upload</Text>
9        </View>
10        {uploads.map(upload => <UploadItem upload={upload} key={upload.id} />)}
11      </View>
12    )}
13  </DirectUpload>
14)

Use directUpload without React

1import { directUpload } from 'react-native-activestorage'
2
3const file = {
4  name: 'image.jpg',
5  size: 123456,
6  type: 'image/jpeg',
7  path: '/var/lib/...'
8}
9
10const directUploadsUrl = 'https://localhost:3000/rails/active_storage/direct_uploads';
11
12const onStatusChange = ({ status, progress, cancel }) => {
13  // status - waiting/uploading/success/error/canceled
14  // progress - 0-100% (for uploading status)
15  // cancel - function to stop uploading a file
16}
17
18directUpload({ file, directUploadsUrl, onStatusChange });

License

The package is available as open source under the terms of the MIT License.