ConstBasic usage:
import { VanaAppUploadWidget } from '@opendatalabs/vana-react';
function App() {
return (
<VanaAppUploadWidget
appId="my-app-123"
onResult={(data) => console.log('Upload successful:', data)}
onError={(error) => console.error('Upload failed:', error)}
onAuth={(wallet) => console.log('Authenticated:', wallet)}
/>
);
}
With custom theme and schema:
<VanaAppUploadWidget
appId="my-app-123"
schemaId={456}
prompt="Upload your social media data"
theme={{
primaryColor: "#6366f1",
backgroundColor: "#f9fafb"
}}
onResult={handleSuccess}
onError={handleError}
onAuth={handleAuth}
/>
With ref for artifact downloads:
const widgetRef = useRef<VanaAppUploadWidgetHandle>(null);
<VanaAppUploadWidget
ref={widgetRef}
appId="my-app-123"
operation="prompt_gemini_agent"
onResult={async (result) => {
const artifact = result.artifacts?.[0];
if (artifact && widgetRef.current) {
const blob = await widgetRef.current.downloadArtifact({
operationId: result.operationId,
artifactPath: artifact.path
});
}
}}
onError={handleError}
onAuth={handleAuth}
/>
VanaAppUploadWidget - Embeddable React component for Vana App data upload operations.
This component renders an iframe that facilitates secure data upload and processing through the Vana Network. It handles cross-origin communication, wallet authentication, and dynamic resizing.