jingrow-ui/docs/components/fileuploader.md

FileUploader

The FileUploader component is a renderless component used to upload files. It only works with a Jingrow Framework backend.

Usage

Use the default slot to render any HTML you like. A lot of slot props are available to render a UI that shows file progress. Make sure to call openFileSelector using a user action like a button click.

When the file upload is complete, the success event is emitted with the File document as JSON object.

::: info Note The following example can't upload the file because it is not connected to a Jingrow backend. :::

{{ uploading ? `Uploading ${progress}%` : 'Upload Image' }}

<template>
  <FileUploader @success="(file) => handleFile(file)">
    <template
      v-slot="{
        file,
        uploading,
        progress,
        uploaded,
        message,
        error,
        total,
        success,
        openFileSelector,
      }"
    >
      <div class="w-full text-center">
        <Button @click="openFileSelector" :loading="uploading">
          {{ uploading ? `Uploading ${progress}%` : 'Upload Image' }}
        </Button>
        <ErrorMessage class="mt-2" :message="error" />
      </div>
    </template>
  </FileUploader>
</template>

<script setup>
import { FileUploader, Button } from 'jingrow-ui'
</script>

Props

Name	Default	Value	Description
fileTypes	null	String	String passed to accept attribute of file input. Use it to restrict file types to be uploaded.
uploadArgs	null	Object	See uploadArgs
validateFile	null	Function	Validator function to validate the selected file. File object is passed as first parameter. Return an error message or throw an Error to prevent file upload.

uploadArgs

Options passed to /api/action/upload_file as arguments. Object structure looks like this:

{
  private, folder, file_url, pagetype, docname, fieldname, method, type
}