https://github.com/jpalumickas/react-native-activestorage

React Native support for Rails ActiveStorage
https://github.com/jpalumickas/react-native-activestorage

activestorage rails react react-native

Last synced: 2 months ago
JSON representation

React Native support for Rails ActiveStorage

• Host: GitHub
• URL: https://github.com/jpalumickas/react-native-activestorage
• Owner: jpalumickas
• License: mit
• Created: 2019-06-25T22:26:32.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2023-10-07T20:52:37.000Z (over 1 year ago)
• Last Synced: 2024-11-02T00:24:26.557Z (2 months ago)
• Topics: activestorage, rails, react, react-native
• Language: TypeScript
• Homepage:
• Size: 428 KB
• Stars: 15
• Watchers: 1
• Forks: 12
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Native ActiveStorage

Use direct upload for uploading files to Rails ActiveStorage.

## Installation

Install this package and [react-native-blob-util](react-native-blob-util)

```sh

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

```

## Usage

### Add Active Storage provider

```jsx

import { ActiveStorageProvider } from 'react-native-activestorage'

const App = () => (

  

    

  

)

```

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

### Use with React Hooks

```jsx

import { useDirectUpload } from 'react-native-activestorage'

const Upload = () => {

  const onSuccess = ({ signedIds }) => {

    // Do something;

  }

  const { upload, uploading, uploads } = useDirectUpload({ onSuccess });

  const onUploadButtonClick = async () => {

    const files = await showPicker();

    const { signedIds } = await upload(files);

    // Assign signed IDs

  }

  return (

    

      

        Upload

      

      {uploads.map(upload => (

        

      ))}

    

  )

}

```

### Use with React Component

```jsx

import { DirectUpload } from 'react-native-activestorage'

const Upload = () => (

   console.warn({ signedIds })}>

    {({ upload, uploading, uploads }) => (

      

         showPicker((files) => upload(files))}>

          Upload

        

        {uploads.map(upload => )}

      

    )}

  

)

```

### Use `directUpload` without React

```js

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';

const onStatusChange = ({ status, progress, cancel }) => {

  // status - waiting/uploading/success/error/canceled

  // progress - 0-100% (for uploading status)

  // cancel - function to stop uploading a file

}

directUpload({ file, directUploadsUrl, onStatusChange });

```

## License

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

[license]: https://raw.githubusercontent.com/jpalumickas/react-native-activestorage/master/LICENSE

[react-native-blob-util]: https://www.npmjs.com/package/react-native-blob-util