Flowdrive
Documentation

Flowdrive docs

Code Examples

Interactive code examples for FlowDrive integration

Last updated: March 15, 2024

Interactive Code Examples

Basic Upload Example

Try this interactive example to upload files using FlowDrive:

index.html
<div class="example-wrapper">
  <input type="file" id="fileInput" multiple />
  <button onclick="uploadFiles()">Upload Files</button>
  <div id="uploadStatus"></div>
  <div id="uploadProgress"></div>
  <div id="uploadResult"></div>
</div>
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 = `
            <h4>Upload Successful!</h4>
            <pre>${JSON.stringify(data, null, 2)}</pre>
        `;
        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
<div class="example-wrapper">
  <input type="file" id="folderFileInput" multiple />
  <input 
    type="text" 
    id="folderPath" 
    placeholder="Folder path (e.g., images/profile)"
  />
  <button id="folderUploadBtn">Upload to Folder</button>
  <pre id="folderResult"></pre>
  <div id="folderError"></div>
</div>

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
<div class="example-wrapper">
  <input type="file" id="progressFileInput" multiple />
  <button onclick="uploadWithProgress(document.getElementById('progressFileInput').files)">
    Upload with Progress
  </button>
  <progress id="progressBar" value="0" max="100"></progress>
  <div id="progressText"></div>
  <pre id="progressResult"></pre>
  <div id="progressError"></div>
</div>

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 (
        <div className="uploader">
            <input
                type="file"
                multiple
                onChange={(e) => setFiles(Array.from(e.target.files))}
                disabled={uploading}
            />
            <button 
                onClick={handleUpload}
                disabled={uploading || files.length === 0}
            >
                {uploading ? 'Uploading...' : 'Upload Files'}
            </button>
            {uploading && (
                <div className="progress">
                    <progress value={progress} max="100" />
                    <span>{progress}%</span>
                </div>
            )}
            {error && (
                <div className="error">{error}</div>
            )}
            {files.length > 0 && (
                <div className="files">
                    <h4>Selected Files:</h4>
                    <ul>
                        {files.map(file => (
                            <li key={file.name}>{file.name}</li>
                        ))}
                    </ul>
                </div>
            )}
        </div>
    );
};

// Usage Example
const App = () => {
    return (
        <FileUploader
            apiKey="your_api_key"
            onUploadComplete={(data) => {
                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
<div class="example-wrapper">
  <input 
    type="url" 
    id="urlInput" 
    placeholder="https://example.com/file.jpg"
    class="w-full mb-2"
  />
  <input 
    type="text" 
    id="fileNameInput" 
    placeholder="Custom filename (optional)"
    class="w-full mb-2"
  />
  <input 
    type="text" 
    id="folderIdInput" 
    placeholder="Folder ID (optional)"
    class="w-full mb-2"
  />
  <button id="urlUploadBtn" class="w-full">
    Upload from URL
  </button>
  <pre id="urlResult" class="mt-4"></pre>
  <div id="urlError" class="text-red-500 mt-2"></div>
</div>

Vue Component Example

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

FileUploader.vue
<template>
  <div class="uploader">
    <input
      type="file"
      multiple
      @change="handleFileSelect"
      :disabled="uploading"
    />
    <button 
      @click="handleUpload"
      :disabled="uploading || files.length === 0"
    >
      {{ uploading ? 'Uploading...' : 'Upload Files' }}
    </button>
    
    <div v-if="uploading" class="progress">
      <progress :value="progress" max="100" />
      <span>{{ progress }}%</span>
    </div>
    
    <div v-if="error" class="error">
      {{ error }}
    </div>
    
    <div v-if="files.length > 0" class="files">
      <h4>Selected Files:</h4>
      <ul>
        <li v-for="file in files" :key="file.name">
          {{ file.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
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;
  }
};
</script>

<style scoped>
.uploader {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.progress {
  margin: 1rem 0;
}

.error {
  color: red;
  margin: 1rem 0;
}

.files {
  margin-top: 1rem;
}
</style>

Take control of your file hosting on Webflow.

Start for free! Talk to the team
Ask about Flowdrive on
Product
File HostingVideo HostingUpload WidgetSecure AssetsCustom DomainsPricing
Resources
BlogDocsFree ToolsFlowdrive vs VidzflowGlossary
Company
ContactTestimonialsChangelogAffiliates
Legal
Privacy PolicyTerms of ServiceData Processing Agreement
© 2026 Flowdrive