The CWA is in heavy development

The CWA is still in alpha and not ready for production - some code and implementations are likely to change. If you would like to try out the CWA, please enjoy what we have provided and feel free to provide feedback, or get involved on GitHub.

DraftAdmin Manager

useCwaResourceUpload

Admin tab composable for file upload fields — handles selection, upload, and deletion via the API.

Use in admin tab components for uploadable components. Not for display components.

import { useCwaResourceManagerTab, useCwaResourceUpload } from '#imports'

const { exposeMeta, iri } = useCwaResourceManagerTab({ name: 'Upload' })
const {
  filenameInputModel,
  updating,
  fileExists,
  handleInputChangeFile,
  handleInputDeleteFile
} = useCwaResourceUpload(iri)

defineExpose(exposeMeta)

<template>
  <CwaUiFormFile
    v-model="filenameInputModel"
    label="Upload Image"
    :disabled="updating"
    :file-exists="fileExists"
    @change="handleInputChangeFile"
    @delete="handleInputDeleteFile"
  />
</template>

Signature

useCwaResourceUpload(
  iri: ComputedRef<string | undefined>,
  filename: string = 'file',
  fileDisplayType: string = 'Image'
)

iri — the reactive IRI ref from useCwaResourceManagerTab. Identifies which resource to PATCH.
filename — the PHP entity property name / media object key for the file field. Defaults to 'file'. Pass the actual property name if your entity uses a different name (e.g. 'image', 'document').
fileDisplayType — label used in confirmation dialogs (e.g. 'Image', 'Document'). Defaults to 'Image'.

Return values

Return	Type	Purpose
`filenameInputModel`	`Ref<string>`	Bind via `v-model` on `CwaUiFormFile` — shows current filename
`updating`	`Ref<boolean>`	`true` while an upload/delete is in progress
`fileExists`	`ComputedRef<boolean>`	`true` when a file is already uploaded for this resource
`handleInputChangeFile`	`(file: File \| undefined) => Promise<void>`	Pass to `@change` on the file input
`handleInputDeleteFile`	`() => Promise<void>`	Pass to `@delete` on the file input

How it works

handleInputChangeFile — sends the selected file to {iri}/upload as multipart/form-data (not base64). Sets updating.value = true during the upload. On success the resource store updates automatically.

handleInputDeleteFile — shows a confirmation dialog, then sends PATCH {iri} with { [filename]: null }. The API deletes the stored file.

filenameInputModel — bind with v-model on CwaUiFormFile. Shows the current filename when a file exists, empty otherwise.

`CwaUiFormFile` props

<CwaUiFormFile
  v-model="filenameInputModel"   <!-- current filename for display -->
  label="Image"
  :disabled="updating"           <!-- disable input while uploading -->
  :file-exists="fileExists"      <!-- shows delete button when true -->
  accept="image/*"               <!-- optional MIME restriction -->
  @change="handleInputChangeFile"
  @delete="handleInputDeleteFile"
/>

Complete admin upload tab example

<!-- app/cwa/components/HeroSection/admin/ImageTab.vue -->
<template>
  <CwaUiFormFile
    v-model="filenameInputModel"
    label="Upload Image"
    :disabled="updating"
    :file-exists="fileExists"
    @change="handleInputChangeFile"
    @delete="handleInputDeleteFile"
  />
</template>

<script setup lang="ts">
import { useCwaResourceManagerTab, useCwaResourceUpload } from '#imports'

const { exposeMeta, iri } = useCwaResourceManagerTab({ name: 'Upload' })
const { filenameInputModel, updating, fileExists, handleInputChangeFile, handleInputDeleteFile }
  = useCwaResourceUpload(iri)

defineExpose(exposeMeta)
</script>

Resource Model

Two-way reactive binding between an admin form input and a single API resource field — every change PATCHes the API automatically.

Resource Endpoint