Basic usage

Validating files

Basic validation

Both server and client side for file size and mime type validation are supported.

Client side

The FileUpload.Root component can be configured with accept, maxFileSize and minFileSizeto validate file size and mime type.

<FileUpload.Root profile="avatar" accept="image/*" maxFiles={1} />

Server side

The slingshot server profile can be configured with maxSizeBytes and allowedFileTypes to validate file size and mime type.

export const slingshot = createSlingshotServer({
  profile: 'avatar',
  maxSizeBytes: 1024 * 1024 * 5, // 5MB
  allowedFileTypes: 'image/*',
})

Custom validation

In case you require more complex validation, you can use custom validation handlers to validate files before they are uploaded.

Client side

The FileUpload.Root component can be configured with a validate function to validate files before they are uploaded.

You can also pass metadata that will be available to the server side.

<FileUpload.Root
  profile="avatar"
  validate={(file, details) => {
    if (file.size > 1024 * 1024 * 5) {
      return ['File size is too large'],
    }
  }}
  meta={{
    userId: '123',
  }}
/>

Server side

Meta data passed from the client is available in the authorize function.

export const slingshot = createSlingshotServer({
  profile: 'avatar',
  authorize: ({ req, key, file, meta }) => {
    checkAccess(req, meta.userId)
 
    if (file.size > 1024 * 1024 * 5) {
      throw new Error('File size is too large')
    }
  },
})

Authenticate requests

Use the authorize function to authenticate requests. You can use the req object to check the request headers or cookies for a valid session.

export const slingshot = createSlingshotServer({
  profile: 'avatar',
  authorize: ({ req, key, file, meta }) => {
    const headers = req.headers
 
    // Check `Authorization` header or cookies for valid session.
  },
})

Basic usage

On this page