Utilisation

Choose a file and send it

Ce type est utilisé par fileSystem.upload

tsx
import { Button, Text, VStack, fileSystem, mediaPicker, signal, task } from 'kuito';

export default function PhotoUpload() {
  const progress = signal(0);
  const selected = signal<string | null>(null);
  const upload = task(
    async () => {
      if (!selected.value) {
        const result = await mediaPicker.pick({
          mediaTypes: ['images'],
          maxWidth: 2048,
          quality: 0.8,
        });
        if (result.canceled || !result.assets[0]) return;
        selected.value = result.assets[0].uri;
      }
      progress.value = 0;
      const result = await fileSystem.upload('https://example.com/photos', selected.value, {
        onProgress: ({ bytes, total }) => {
          progress.value = total ? bytes / total : 0;
        },
      });
      if (result.status < 200 || result.status >= 300)
        throw new Error(`Upload failed: ${result.status}`);
      selected.value = null;
    },
    { policy: 'drop' },
  );

  return (
    <VStack padding={24} gap={12}>
      <Button disabled={upload.running.value} onPress={() => void upload.run().catch(() => {})}>
        {selected.value ? 'Retry upload' : 'Choose photo'}
      </Button>
      <Text>
        {upload.running.value
          ? `${Math.round(progress.value * 100)}%`
          : upload.error.value
            ? String(upload.error.value)
            : ''}
      </Text>
    </VStack>
  );
}

Déclaration du type

ts
export type UploadOptions = {
  /** Defaults to `'POST'`. */
  method?: 'POST' | 'PUT' | 'PATCH';
  headers?: Record<string, string>;
  /** The file as the whole body, or as one field of a multipart form. Defaults to `'binary'`. */
  uploadType?: 'binary' | 'multipart';
  /** The form field holding the file. Defaults to `'file'`. */
  fieldName?: string;
  mimeType?: string;
  /** More form fields, sent before the file. */
  parameters?: Record<string, string>;
  onProgress?: (progress: TransferProgress) => void;
};

Membres 7

NomTypeRequisDescription
method"POST" | "PUT" | "PATCH"NonDefaults to 'POST'.
headersRecord<string, string>Non—
uploadType"binary" | "multipart"NonThe file as the whole body, or as one field of a multipart form. Defaults to 'binary'.
fieldNamestringNonThe form field holding the file. Defaults to 'file'.
mimeTypestringNon—
parametersRecord<string, string>NonMore form fields, sent before the file.
onProgress(progress: TransferProgress) => voidNon—
onProgress — signatures de méthode

Signatures

ts
(progress: TransferProgress): void

Paramètres

NomTypeRequisDescription
progressTransferProgressOui—

Retourne

void

Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.