# FileInput with Transloadit

**URL:** <https://community.transloadit.com/t/fileinput-with-transloadit/15479>\
**Category:** Uppy\
**Created:** [October 23, 2020, 11:13pm UTC](https://community.transloadit.com/t/fileinput-with-transloadit/15479 "2020-10-23T23:13:36Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![phipps73](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/phipps73/32/296_2.png) [@phipps73](https://community.transloadit.com/u/phipps73)\
**Post date:** [October 23, 2020, 11:13pm UTC](https://community.transloadit.com/t/fileinput-with-transloadit/15479/1 "2020-10-23T23:13:36Z")

</div>

I am in the process of switching from the transloadit jquery sdk to Uppy and I need a simple button to be able to select a single file which is then uploaded upon selection.

I have previously had success using Uppy Dashboard with Transloadit but this is too much UI for a single image upload. However, switching to Uppy.FileInput seems to not actually upload the file. I click the button, select a file and the transloadit step generates the start of an assembly but a file is never actually uploaded so the process gets stuck at the encoding step. Some example code:

```auto
var uppyProfileImg = Uppy.Core({
  debug: true,
  autoProceed: true,
  restrictions: {
    maxNumberOfFiles: 1,
    minNumberOfFiles: 1,
    allowedFileTypes: ['image/*'],
  },
})
uppyProfileImg
  .use(Uppy.Transloadit, {
    waitForEncoding: true,
    waitForMetadata: true,
    processZeroFiles: false,
    region: 'eu-west-1',
    fields: {
      personid: $personID,
    },
    params: {
      auth: { key: app.tl.key },
      template_id: app.tl.pi.templateid,
    },
    limit: 1,
  })
  .use(Uppy.FileInput, {
    target: '.ProfileForm',
    replaceTargetContent: true,
    pretty: true,
    inputName: 'profileimage',
    locale: {
      strings: {
        chooseFiles: 'Choose Photo',
      },
    },
  })
  .use(Uppy.StatusBar, {
    target: '.ProfileProgressBar',
    hideUploadButton: false,
    hideAfterFinish: false,
  })

```

The personid field is posted to transloadit but 0 files are uploaded. Is there an extra step required to connect FileInput to Transloadit. The examples only show FileInput being used with XHRUpload.

Any pointers would be appreciated.

---

<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:** [February 6, 2021, 11:30pm UTC](https://community.transloadit.com/t/fileinput-with-transloadit/15479/2 "2021-02-06T23:30:44Z")

</div>

Hello!

I doubt this is an issue with `@uppy/file-input` itself, as it’s a 131 line wrapper around the DOM. However it definitely could be. Perhaps there’s some strange compatibility issue here - I’m left to speculate on this one. Nevertheless, if this is still an issue, you can open an issue [here](https://github.com/transloadit/uppy/issues), where the rest of the team can see it

- Andrew