Documentation # Flowdrive docs

    # Interactive Code Examples

## Basic Upload Example

Try this interactive example to upload files using FlowDrive:

index.html

`  Upload Files

`

upload.js

`// Replace with your API key const API_KEY = 'your_api_key'; async function uploadFiles() { const fileInput = document.getElementById('fileInput'); const status = document.getElementById('uploadStatus'); const progress = document.getElementById('uploadProgress'); const result = document.getElementById('uploadResult'); const files = fileInput.files; if (files.length === 0) { status.textContent = 'Please select files to upload'; return; } status.textContent = 'Uploading...'; const formData = new FormData(); // Add all selected files for (let file of files) { formData.append('file', file); } try { const response = await fetch('https://api.tryflowdrive.com/v1/files/upload', { method: 'POST', headers: { 'X-API-Key': API_KEY }, body: formData }); const data = await response.json(); if (!response.ok) { throw new Error(data.error || 'Upload failed'); } result.innerHTML = ` Upload Successful!

 ${JSON.stringify(data, null, 2)}

 `; status.textContent = 'Upload complete!'; } catch (error) { status.textContent = `Error: ${error.message}`; } }`

## Upload with Folder Organization

This example shows how to upload files to specific folders:

folder-upload.js

`const uploadToFolder = async (files, folderPath) => { const formData = new FormData(); // Add files and folder path for (let file of files) { formData.append('file', file); } formData.append('folder', folderPath); try { const response = await fetch('https://api.tryflowdrive.com/v1/files/upload', { method: 'POST', headers: { 'X-API-Key': API_KEY }, body: formData }); return await response.json(); } catch (error) { console.error('Upload failed:', error); throw error; } }; // Example usage document.getElementById('folderUploadBtn').onclick = async () => { const files = document.getElementById('folderFileInput').files; const folderPath = document.getElementById('folderPath').value; try { const result = await uploadToFolder(files, folderPath); document.getElementById('folderResult').textContent = JSON.stringify(result, null, 2); } catch (error) { document.getElementById('folderError').textContent = `Upload failed: ${error.message}`; } };`

folder-example.html

`   Upload to Folder

`

## Upload with Progress Tracking

This example demonstrates how to track upload progress:

progress-upload.js

`async function uploadWithProgress(files) { const formData = new FormData(); const totalSize = Array.from(files).reduce((acc, file) => acc + file.size, 0); let uploaded = 0; // Add files to form data for (let file of files) { formData.append('file', file); } try { const response = await fetch('https://api.tryflowdrive.com/v1/files/upload', { method: 'POST', headers: { 'X-API-Key': API_KEY }, body: formData, onUploadProgress: (progressEvent) => { const percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); document.getElementById('progressBar').value = percentCompleted; document.getElementById('progressText').textContent = `${percentCompleted}% uploaded`; } }); const result = await response.json(); document.getElementById('progressResult').textContent = JSON.stringify(result, null, 2); } catch (error) { document.getElementById('progressError').textContent = `Upload failed: ${error.message}`; } }`

progress-example.html

`   Upload with Progress

`

## React Component Example

Here's a reusable React component for file uploads:

FileUploader.jsx

`import React, { useState } from 'react'; const FileUploader = ({ apiKey, onUploadComplete }) => { const [files, setFiles] = useState([]); const [uploading, setUploading] = useState(false); const [progress, setProgress] = useState(0); const [error, setError] = useState(null); const handleUpload = async () => { if (files.length === 0) return; setUploading(true); setError(null); const formData = new FormData(); files.forEach(file => { formData.append('file', file); }); try { const response = await fetch('https://api.tryflowdrive.com/v1/files/upload', { method: 'POST', headers: { 'X-API-Key': apiKey }, body: formData, onUploadProgress: (progressEvent) => { const percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); setProgress(percentCompleted); } }); const data = await response.json(); if (!response.ok) { throw new Error(data.error || 'Upload failed'); } onUploadComplete?.(data); setFiles([]); setProgress(0); } catch (error) { setError(error.message); } finally { setUploading(false); } }; return (   setFiles(Array.from(e.target.files))} disabled={uploading} />  {uploading ? 'Uploading...' : 'Upload Files'}  {uploading && (   {progress}%

 )} {error && ( {error}

 )} {files.length > 0 && (  Selected Files:

  {files.map(file => ( - {file.name}
 ))}

 )}

 ); }; // Usage Example const App = () => { return (  { console.log('Upload complete:', data); }} /> ); };`

## URL Upload Example

Here's how to upload files from URLs:

url-upload.js

`const uploadFromUrl = async (url, options = {}) => { const { fileName, folderId, metadata } = options; try { const response = await fetch('https://api.tryflowdrive.com/v1/files/upload-url', { method: 'POST', headers: { 'X-API-Key': API_KEY, 'Content-Type': 'application/json' }, body: JSON.stringify({ url, fileName, folderId, metadata }) }); const result = await response.json(); if (!response.ok) { throw new Error(result.message || 'URL upload failed'); } return result; } catch (error) { console.error('URL upload failed:', error); throw error; } }; // Example usage document.getElementById('urlUploadBtn').onclick = async () => { const url = document.getElementById('urlInput').value; const fileName = document.getElementById('fileNameInput').value; const folderId = document.getElementById('folderIdInput').value; if (!url) { alert('Please enter a URL'); return; } try { const result = await uploadFromUrl(url, { fileName, folderId }); document.getElementById('urlResult').textContent = JSON.stringify(result, null, 2); } catch (error) { document.getElementById('urlError').textContent = `Upload failed: ${error.message}`; } };`

url-upload-example.html

`     Upload from URL

`

## Vue Component Example

And here's a Vue 3 component for file uploads:

FileUploader.vue

`    {{ uploading ? 'Uploading...' : 'Upload Files' }}    {{ progress }}%

  {{ error }}

  0" class="files"> Selected Files:

  - {{ file.name }}

   import { ref } from 'vue'; const props = defineProps({ apiKey: { type: String, required: true } }); const emit = defineEmits(['upload-complete']); const files = ref([]); const uploading = ref(false); const progress = ref(0); const error = ref(null); const handleFileSelect = (event) => { files.value = Array.from(event.target.files); }; const handleUpload = async () => { if (files.value.length === 0) return; uploading.value = true; error.value = null; const formData = new FormData(); files.value.forEach(file => { formData.append('file', file); }); try { const response = await fetch('https://api.tryflowdrive.com/v1/files/upload', { method: 'POST', headers: { 'X-API-Key': props.apiKey }, body: formData, onUploadProgress: (progressEvent) => { progress.value = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); } }); const data = await response.json(); if (!response.ok) { throw new Error(data.error || 'Upload failed'); } emit('upload-complete', data); files.value = []; progress.value = 0; } catch (err) { error.value = err.message; } finally { uploading.value = false; } };   .uploader { padding: 1rem; border: 1px solid #ddd; border-radius: 4px; } .progress { margin: 1rem 0; } .error { color: red; margin: 1rem 0; } .files { margin-top: 1rem; } `