# Load some file by default, react

**URL:** <https://community.transloadit.com/t/load-some-file-by-default-react/14749>\
**Category:** Uppy\
**Created:** [September 24, 2018, 8:04am UTC](https://community.transloadit.com/t/load-some-file-by-default-react/14749 "2018-09-24T08:04:43Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ssadeghi](https://avatars.discourse-cdn.com/v4/letter/s/838e76/32.png) [@ssadeghi](https://community.transloadit.com/u/ssadeghi)\
**Post date:** [September 24, 2018, 8:04am UTC](https://community.transloadit.com/t/load-some-file-by-default-react/14749/1 "2018-09-24T08:04:43Z")

</div>

in react i want my file uploader consist of some file that fetch from server, then i can edit them and resend them to server

---

<div class="post-metadata">

**Author:** ![ajkachnic](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/ajkachnic/32/260_2.png) [@ajkachnic](https://community.transloadit.com/u/ajkachnic)\
**Post date:** [July 15, 2020, 11:39am UTC](https://community.transloadit.com/t/load-some-file-by-default-react/14749/2 "2020-07-15T11:39:57Z")

</div>

I know that this is a **really** old post, but I can still help.

The best way to do this would probably be to call the `addFile` method on uppy after initializing it.

Here’s an example (using hooks)

```auto
const MyComponent = () => {
  const uppy = React.useMemo(async () => {
    // fetching image
    const res = await fetch('my url')
    const blob = await res.blob()
    // Do all the configuration here
    return Uppy()
      .use(Transloadit, {})
      .addFile({
        name: 'my-file.jpg', // file name
        type: 'image/jpeg', // file type
        data: blob, // file blob
      });
  }, []);
  React.useEffect(() => {
    return () => uppy.close()
  }, [])

  return <DashboardModal uppy={uppy} />
}

```