https://github.com/oakfang/comp-up

Minimal, yet sane, file handling solution for ReactJS
https://github.com/oakfang/comp-up

Last synced: 6 days ago
JSON representation

Minimal, yet sane, file handling solution for ReactJS

• Host: GitHub
• URL: https://github.com/oakfang/comp-up
• Owner: oakfang
• Created: 2019-08-25T06:38:03.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T08:13:53.000Z (about 2 years ago)
• Last Synced: 2024-10-11T00:08:31.316Z (3 months ago)
• Language: TypeScript
• Size: 1.41 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 17
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# comp-up

The minimal, yet sane, way to handle files with ReactJS

## Why, though?

Handling files with React is not always great.

You have to go through the same "hide-the-input" routine, keep some state, sync the values, etc. Or you can opt for the huge chunky 3rd-party uploader that does everything for you, but you have to bend and shpe it for a while before it resembles what you actually want.

These utilities are simple abstractions with little to no design implications.

## How, though?

Well, a simple use-case would be something like this:

```jsx

import React, { useEffect } from 'react';

import axios from 'axios';

import { FileUploader, FileProvider, useFileList } from 'comp-up';

function UploadImagesPage() {

  return (

    

      
Upload image files here:

      

        

      

    

  );

}


function UploadImages() {

  const [files, clearFiles] = useFileList();

  useEffect(() => {

    if (files.length) {

      const data = new FormData();

      data.append('files', files);

      axios.post('/upload', data).then(() => {

        clearFiles();

      });

    }

  }, [files]);

  return (

    

      
Pick files

    

  );

}

```


See further example in the `example` directory.

### Caveats

- You can't use a `` inside of the ``. This is due to some arcane event rules. Please, for the sake of a11y, make sure to add `role=button` to the "button-ish" you do add.