FileInput with Transloadit

Uppy
1

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:

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.

2

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, where the rest of the team can see it

- Andrew