attachMedia

A method that allows you to upload a file to the application: video, image, audio, and any other file.

import { attachMedia } from "@app/ui"
attachMedia({ submitUrl, title, mediaType })

Arguments

params*: { title, mediaType, submitUrl }

An object with upload parameters.

1. submitUrl*: string

   • The API endpoint where information about the uploaded file will be sent. File information will be available to the handler in  req.body.file , specifically:

   1. req.body.file.hash: string

      The identifier of the file in the application's storage.

   2. req.body.file.name: string

      The original name of the file before uploading to the application.

2. title: string

   The title of the file selection dialog. This can help guide the user on what type of file they are selecting.

3. mediaType: photo | video | undefined

   • Default: undefined

     Allows you to restrict the types of files permitted for upload.

     photo — restricts file types to images. On mobile devices, it prompts the user to select an image from the gallery.

     video — restricts file types to videos. On mobile devices, it prompts the user to select a video from the gallery.

     undefined — does not restrict the file type. On mobile devices with this option, images and videos located in the gallery may be unavailable.

Examples

When the button is pressed, it prompts to upload an image. After uploading, the image is displayed on the screen.

import { attachMedia } from '@app/ui'
import { getThumbnailUrl } from '@app/storage'

app.apiCall('onImageUpload', async (ctx, req) => {
  return ctx.router.navigate('imageUpload?hash=' + req.body.file.hash)
})

app.screen('imageUpload', async (ctx, req) => {
  const onButtonClick = attachMedia({
    title: "Choose an image",
    mediaType: "photo",
    submitUrl: ctx.router.url('onImageUpload')
  })

  return (
    <screen>
      <button title="Upload an image" onClick={onButtonClick} />
      {req.query?.hash && <img src={getThumbnailUrl(req.query.hash)} />}
    </screen>
  )
})