ViteBridge Integration SDK
JavaScript SDK for uploading files directly to cloud storage (S3, Google Drive, Dropbox) through the ViteBridge Integration API.
Installation
npm install @lockbridge/integration-sdk
Quick Start
HTML/CSS/JavaScript
<!DOCTYPE html>
<html>
<head>
<title>File Upload</title>
</head>
<body>
<input type="file" id="fileInput" multiple>
<button id="uploadBtn">Upload</button>
<div id="progress"></div>
<script type="module">
import { ViteBridgeClient } from '@lockbridge/integration-sdk';
const client = new ViteBridgeClient({
apiUrl: 'https://your-api.com/api/integration',
token: 'your-integration-token'
});
const fileInput = document.getElementById('fileInput');
const uploadBtn = document.getElementById('uploadBtn');
const progress = document.getElementById('progress');
uploadBtn.addEventListener('click', async () => {
const files = Array.from(fileInput.files);
for (const file of files) {
try {
const result = await client.uploadFile(file, {
onProgress: (prog) => {
progress.textContent = `${file.name}: ${prog.percentage}%`;
}
});
console.log('Success:', result);
} catch (error) {
console.error('Error:', error);
}
}
});
</script>
</body>
</html>
React with Hooks
import React, { useState } from 'react';
import { ViteBridgeProvider, useViteBridge } from '@lockbridge/integration-sdk/react';
function UploadComponent() {
const { uploadFile, isUploading, progress } = useViteBridge();
const [selectedFile, setSelectedFile] = useState(null);
const handleFileSelect = (e) => {
setSelectedFile(e.target.files[0]);
};
const handleUpload = async () => {
if (!selectedFile) return;
try {
const result = await uploadFile(selectedFile, {
onProgress: (prog) => console.log(`Progress: ${prog.percentage}%`)
});
console.log('Upload successful:', result);
} catch (error) {
console.error('Upload failed:', error);
}
};
return (
<div>
<input type="file" onChange={handleFileSelect} />
<button onClick={handleUpload} disabled={!selectedFile || isUploading}>
{isUploading ? 'Uploading...' : 'Upload'}
</button>
{Object.entries(progress).map(([id, prog]) => (
<div key={id}>{prog.percentage}%</div>
))}
</div>
);
}
function App() {
return (
<ViteBridgeProvider config={{
apiUrl: 'https://your-api.com/api/integration',
token: 'your-integration-token'
}}>
<UploadComponent />
</ViteBridgeProvider>
);
}
export default App;
React with Components
import React from 'react';
import { ViteBridgeProvider, FileUploader } from '@lockbridge/integration-sdk/react';
function App() {
return (
<ViteBridgeProvider config={{
apiUrl: 'https://your-api.com/api/integration',
token: 'your-integration-token'
}}>
<FileUploader
multiple={true}
onUploadComplete={(results) => console.log('Done:', results)}
onUploadError={(errors) => console.error('Error:', errors)}
/>
</ViteBridgeProvider>
);
}
export default App;
API Reference
ViteBridgeClient
const client = new ViteBridgeClient({
apiUrl: 'string',
token: 'string',
debug: boolean,
timeout: number
});
await client.uploadFile(file, options);
await client.uploadFiles(files, options);
await client.resumeUpload({ uploadId, file });
React Hook
const {
uploadFile,
uploadFiles,
isUploading,
progress,
errors,
clearErrors
} = useViteBridge();
Upload Options
{
onProgress: (progress) => void,
onComplete: (result) => void,
onError: (error) => void
}
Configuration
Set your API credentials:
const config = {
apiUrl: process.env.VITE_BRIDGE_API_URL,
token: process.env.VITE_BRIDGE_TOKEN
};
Error Handling
try {
await client.uploadFile(file);
} catch (error) {
console.log(error.code);
console.log(error.message);
console.log(error.retryable);
}
License
MIT