https://github.com/nextml-code/react-file-upload

File upload component for react.
https://github.com/nextml-code/react-file-upload

javascript npm react

Last synced: 8 days ago
JSON representation

File upload component for react.

• Host: GitHub
• URL: https://github.com/nextml-code/react-file-upload
• Owner: nextml-code
• License: apache-2.0
• Created: 2020-08-31T07:36:49.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-11-22T13:09:48.000Z (about 1 year ago)
• Last Synced: 2025-01-03T15:15:22.937Z (11 days ago)
• Topics: javascript, npm, react
• Language: JavaScript
• Homepage:
• Size: 5.24 MB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @nextml/react-file-upload

**NOTE! v0.x.x-beta. Not stable.**

File upload component for React.

## Installation

```

npm install @nextml/react-file-upload

```

## Basic Usage

```javascript

import { FileUpload } from "@nextml/react-file-upload";

```

```jsx

 {

    // Do something with a file upload response or file

  }}

  // Amount of parallel file uploads.

  // Defaults to 1.

  requestBatchSize={1}

  // Calls this function with the

  // data returned from the upload request

  // of a file

  onRowClick={(fileResponseData) => {

    // Do something with the data from the file upload response

  }}

  // Options for configuring the request made

  // when posting the file to the specified url.

  requestOptions={{

    headers: {},

    body: {

      /* JSON */

    },

  }}

/>

```

## Request options

### JSON

Its possible to set request headers and body through the `requestOptions` parameter.

If a body is set the `content-type` header is set to `application/json` and the file will be converted to a base64 string and passed to the `body.file.data` field i.e.

```javascript

// Request body:

{

  ...requestOptions.body,

  file: {

    ...requestOptions.body.file,

    data: "data:image/jpeg;base64,/9j/4AAQSkZJRgABA...",

  },

}

```

### form-data

Set additional `multipart/form-data` entries through the `requestOptions.form` parameter.

The uploaded file will still be set as the entry `file`.

Example:

```javascript

requestionOptions={{

  form: {

    text: "text",

    value: 3,

  }

}}

```

Does not yet support nested `requestionOptions.form`.

Make sure that the peer dependencies in `package.json` are installed in your application.

## Development

Start storybook with

```

npm start

```

## Contribution

Please let us know if you have any issues. Put an issue here on github and we'll do our best to solve it.