Interface VanaAppUploadWidgetHandle

Example

Complete example using ref to download artifacts:

import { useRef, useState } from 'react';
import { VanaAppUploadWidget, VanaAppUploadWidgetHandle, AgentOperationResult } from '@opendatalabs/vana-react';

function App() {
  const widgetRef = useRef<VanaAppUploadWidgetHandle>(null);
  const [downloadedFiles, setDownloadedFiles] = useState<string[]>([]);

  const handleResult = async (result: AgentOperationResult) => {
    console.log('Operation completed:', result.output);

    // Download artifacts if available
    if (result.artifacts && result.artifacts.length > 0) {
      for (const artifact of result.artifacts) {
        try {
          // Download artifact using the ref handle
          const blob = await widgetRef.current?.downloadArtifact({
            operationId: result.operationId,
            artifactPath: artifact.path
          });

          // Process the downloaded artifact
          if (blob) {
            // Option 1: Trigger browser download
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = artifact.name;
            a.click();
            URL.revokeObjectURL(url);

            // Option 2: Read content for processing
            const text = await blob.text();
            console.log('Artifact content:', text);

            setDownloadedFiles(prev => [...prev, artifact.name]);
          }
        } catch (error) {
          console.error('Failed to download artifact:', error);
        }
      }
    }
  };

  return (
    <div>
      <VanaAppUploadWidget
        ref={widgetRef}
        appId="my-app-123"
        operation="prompt_gemini_agent"
        operationParams={{ goal: "Generate a comprehensive report" }}
        onResult={handleResult}
        onError={(error) => console.error('Error:', error)}
        onAuth={(wallet) => console.log('Authenticated:', wallet)}
      />
      {downloadedFiles.length > 0 && (
        <div>
          <h3>Downloaded artifacts:</h3>
          <ul>
            {downloadedFiles.map(file => <li key={file}>{file}</li>)}
          </ul>
        </div>
      )}
    </div>
  );
}
Copy