How do I get the transloadit final link saved on the file's storage server (as in Google Cloud Storage) back to the component?

Question

I'm trying to figure out how to get the final link saved in google storage (starting with "https://storage.googleapis.com/...") in a React component, but the Doc is not so clear.

In the ok value of the transloadit object (in result console) I keep getting "ASSEMBLY_UPLOADING" and not "ASSEMBLY_COMPLETED" even if the file was successfully uploaded.

 uppy.on('complete', (result) => {
     console.log(result)
   })

.

// UppyDashboard.tsx

'use client'

import themeModeState from '@/recoils/themeMode/themeModeState'
import '@uppy/core/dist/style.css'
import '@uppy/dashboard/dist/style.css'
import { Dashboard } from '@uppy/react'
import '@uppy/url/dist/style.css'
import * as React from 'react'
import { useRecoilValue } from 'recoil'
import { useEffect, useState } from 'react'
import createUppy from '@/components/uppy/createUppy'

export interface IUppyDashboard {
 // ...
}

const UppyDashboard: React.FC<IUppyDashboard> = ({
  templateId,
  authKey,
  authSecret,
}) => {
  const themeMode = useRecoilValue(themeModeState)
  const houseId = 'mainHouse'
  const roomId = 'mainRoom'
  const [uppy] = useState(() =>
    createUppy({
      ids: {
        houseId,
        roomId,
      },
      authKey,
      authSecret,
      templateId,
    })
  )

  useEffect(() => {
    if (houseId && roomId) {
      uppy.setOptions({ meta: { houseId, roomId } })
    }
  }, [uppy, houseId, roomId])

  uppy.on('complete', (result) => {
    console.log(result)
  })

  return (
          <Dashboard
            uppy={uppy}
            plugins={[
              // 'Webcam',
              'Dropbox',
              'GoogleDrive',
              'Facebook',
              'OneDrive',
              'Box',
              'Url',
            ]}
            metaFields={[
              { id: 'name', name: 'Name', placeholder: 'Image name' },
              {
                id: 'caption',
                name: 'Caption',
                placeholder: 'Describe what the image is about',
              },
            ]}
            showLinkToFileUploadResult={false} 
            waitForThumbnailsBeforeUpload={true} 
            showSelectedFiles={true}
            replaceTargetContent={true}
            showProgressDetails={false} 
            note="Images only, 1–4 files, up to 5 MB"
            height="350px" // 
            width="auto" // 
            theme={themeMode || 'auto'} 
          />
    />
  )
}

export default UppyDashboard

.

// createUppy.tsx

import Compressor from '@uppy/compressor'
import Uppy from '@uppy/core'
import Url from '@uppy/url'
import GoogleDrive from '@uppy/google-drive'
import Facebook from '@uppy/facebook'
import OneDrive from '@uppy/onedrive'
import Dropbox from '@uppy/dropbox'
import Box from '@uppy/box'
import ImageEditor from '@uppy/image-editor'
// @ts-ignore
import Hebrew from '@uppy/locales/lib/he_IL'
import Transloadit, { COMPANION_URL } from '@uppy/transloadit'
import expires from './dateString'
import createSignature from './transloaditSignature'

type CreateUppy = {
  ids: {
    houseId: string
    roomId: string
  }
  authKey: string
  authSecret: string
  templateId: string
}

const createUppy = (props: CreateUppy) => {
  const { ids, authKey, authSecret, templateId } = props
  const { houseId, roomId } = ids

  if (!authKey || !authSecret) {
    throw new Error('Missing auth key or secret')
  }

  const signature = createSignature({
    authKey,
    authSecret,
    expires,
    templateId,
  })

  // Adding to global `meta` will add it to every file.
  // Every Uppy instance needs a unique ID.
  return new Uppy({
    id: roomId,
    meta: { houseId, roomId },

    locale: Hebrew,
    autoProceed: false,
    restrictions: {
      allowedFileTypes: ['image/*'],
      maxNumberOfFiles: 4,
      minNumberOfFiles: 1,
      minFileSize: 1000,
      maxFileSize: 5 * 1024 * 1024, // 5 MB
    },
  })
    .use(Transloadit, {
      // Import files from Companion using the /import-files Robot
      // importFromUploadURLs: true,
      assemblyOptions(file: any) {
        return {
          params: {
            auth: { key: authKey, expires },
            template_id: templateId,
          },
          signature,
          // You can use these inside your template
          // https://transloadit.com/docs/topics/assembly-instructions/#form-fields-in-instructions
          fields: { roomId: file.meta.roomId, houseId: file.meta.houseId },
          // waitForEncoding: true,
        }
      },
    })
    .use(Compressor)
    .use(Url, { companionUrl: COMPANION_URL })
    .use(GoogleDrive, { companionUrl: COMPANION_URL })
    .use(Facebook, { companionUrl: COMPANION_URL })
    .use(OneDrive, { companionUrl: COMPANION_URL })
    .use(Dropbox, { companionUrl: COMPANION_URL })
    .use(Box, { companionUrl: COMPANION_URL })
}

export default createUppy

Answer 1

You can use

uppy.on('transloadit:complete', (assembly) => {
    ...
});

which will fire when the assembly, that was executed, has finished executing.