Integrate FileCamp with Strapi

Integrate Filecamp with Strapi to streamline content and asset management, combining Filecamp’s powerful digital asset library with Strapi’s customizable content publishing

These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

What Is Filecamp?

Filecamp is a digital asset management (DAM) system that centralizes all your media files in one hub. It serves as your team's digital library, making finding, organizing, and sharing files easier.

This cloud-based platform offers practical tools for managing digital assets, such as:

Metadata tagging for improved searchability
Version tracking to eliminate filename confusion
Secure sharing options for both internal teams and external partners

With its cloud-based design, Filecamp enables easy access to your assets from any location, making it ideal for distributed teams. You can create custom folder structures, add relevant tags, and use the powerful search functionality to locate specific assets quickly.

The main advantage of Filecamp is its ability to centralize all media in one location. This ensures brand consistency and proper file usage and eliminates time wasted searching for previously used assets.

While Filecamp excels at asset organization and collaboration, pairing it with a headless CMS like Strapi can further streamline how those assets are published and managed across digital platforms.

Why Integrate Filecamp with Strapi

Integrating Strapi with Filecamp creates a unified content management solution that connects your content system directly to your asset library. This integration helps both technical teams and project managers streamline workflows and tackle asset management challenges.

Benefits for Developers

Integrating Filecamp with Strapi offers several technical advantages that enhance flexibility, performance, and security across your digital projects:

Customizability and Extensibility: Strapi's flexible architecture allows you to tailor the integration to meet specific project needs. Just as you might integrate Cloudinary, you can create a custom upload provider for Filecamp, giving you full control over asset operations.
API-Driven Development: With robust APIs from both Strapi and Filecamp, you can automate asset management tasks and programmatically retrieve or publish content. This API-first approach supports rapid frontend, mobile app, and partner portal development using a unified content and asset API.
Performance Optimization: By offloading asset storage and bandwidth to Filecamp, you preserve system resources in Strapi, improving performance when managing media assets. This results in better scalability and stability as your project grows. However, image optimization may require separate tools beyond Filecamp’s core functionalities.
Secure Authentication: Leverage Strapi's authentication protocols and store API credentials securely in environment variables to implement encrypted file interactions, ensuring enterprise-grade security.

Together, these capabilities empower development teams to build more efficient, scalable, and secure content workflows without sacrificing customization.

Benefits for Project Managers

When you integrate Filecamp with Strapi, assets updated in Filecamp automatically sync with Strapi, eliminating manual updates. Granular access controls ensure proper asset handling, reducing version confusion and the need to download and re-upload files between systems.

From a project management perspective, the integration simplifies content operations, improves collaboration, and accelerates delivery timelines:

Workflow Optimization: The integration streamlines content production, enabling real-time access to updated assets for editors and creatives. Project managers gain visibility and can manage workflows from a single interface, reducing bottlenecks and improving coordination.
Consistency and Brand Integrity: Centralizing asset management ensures the use of approved, versioned assets across all content, minimizing the risk of outdated or off-brand material reaching publications or campaigns.
Faster Time-to-Publish: Direct access to assets within the CMS speeds up review cycles and accelerates go-live timelines, providing your organization with a competitive edge in content delivery.
Enhanced Reporting and Audit Trails: Advanced logging and permissions simplify asset tracking and content change monitoring, making compliance and governance tasks more efficient.

For non-technical teams, this integration creates a more streamlined, controlled, and predictable content lifecycle—while reducing the overhead of asset coordination.

To explore the full capabilities of this integration, check out Strapi’s integration options or join the Strapi community to learn from other developers.

How to Integrate Filecamp with Strapi

Integrating Filecamp with Strapi creates a unified solution for managing both your content and digital assets. Let’s walk through the process of connecting Filecamp to Strapi.

Prerequisites

Before starting, make sure you have:

A Filecamp account with API credentials
Strapi installed on your local machine or server
Node.js and npm (or yarn) installed
Basic knowledge of JavaScript and API integration

Setting Up a Custom Upload Provider

To connect Strapi with Filecamp, set up a custom upload provider. This provider will manage the communication between Strapi and Filecamp.

Create a New File: In your Strapi project, create a new file, e.g., ./extensions/upload/config/filecamp-provider.js.
Implement Provider Methods: Implement the necessary methods for the upload provider, including upload, delete, and getSignedUrl. Here's a basic structure:

module.exports = {
  init(config) {
    // Initialize Filecamp API client here
    return {
      upload(file) {
        // Implement file upload to Filecamp
      },
      delete(file) {
        // Implement file deletion from Filecamp
      },
      getSignedUrl(file) {
        // Generate signed URL for Filecamp asset
      },
    };
  },
};

Configuration and API Credentials

Proper configuration and secure handling of API credentials are necessary for a successful integration. Follow these steps:

1. Add API Credentials: Add your Filecamp API credentials to your .env file:

FILECAMP_API_KEY=your_api_key
FILECAMP_API_URL=https://your-filecamp-domain/api

2. Update Strapi Configuration: Update your Strapi configuration to use the Filecamp upload provider:

// config/plugins.js
module.exports = {
  upload: {
    provider: 'filecamp',
    providerOptions: {
      apiKey: process.env.FILECAMP_API_KEY,
      apiUrl: process.env.FILECAMP_API_URL,
    },
  },
};

Security Tip: Always use environment variables for sensitive information rather than hardcoding API credentials.

Implementing File Uploads

Once the upload provider is set up, file uploads will be handled in Strapi. For example, on the frontend, use this code snippet:

const handleSubmit = async (event) => {
  event.preventDefault();
  const formData = new FormData();
  formData.append('files', file);
  try {
    const response = await axios.post(
      'http://localhost:1337/api/upload',
      formData
    );
    console.log('File uploaded successfully:', response.data);
  } catch (error) {
    console.error('Error uploading file:', error);
  }
};

This code snippet demonstrates a basic file upload to Strapi, which will then use your custom upload provider to store the file in Filecamp.

Managing Filecamp Assets in Strapi

Once your integration is set up, you can manage Filecamp assets directly within Strapi's admin panel. This includes:

Attaching media assets to content types and entries
Retrieving asset URLs and metadata using Strapi's REST or GraphQL APIs
Configuring user permissions to control access to files

To maintain optimal performance:

Cache Frequently Accessed Assets: Improve load times by caching assets that are often used.
Use Role-Based Access Control: Manage who can access certain files with Strapi's permissions.
Monitor API Usage and Security: Regularly check your API usage and security settings.

Following these steps can help you effectively integrate Filecamp with Strapi, combining the strengths of both platforms. Your team will benefit from a unified workflow that simplifies digital content management.

For additional information and advanced Strapi integration practices, refer to the Strapi documentation. The Strapi community is also available to assist if you encounter challenges during implementation.

Project Example: Enhace Workflows Using Filecamp and Strapi

Let's examine a practical example of how the Filecamp-Strapi integration enhances workflows for a media company managing numerous digital assets.

Scenario Overview

A media company creates content for multiple websites, social channels, and print publications. They store thousands of photos, videos, and audio files in Filecamp and use Strapi as their headless CMS to publish across different platforms.

Implementation Approach

1. Custom Upload Provider Configuration: The development team implemented a custom connector between Strapi and Filecamp's API, establishing direct communication between systems.

// extensions/upload/config/filecamp-provider.js
const axios = require('axios');
const FormData = require('form-data');

module.exports = {
  init(config) {
    const filecampClient = axios.create({
      baseURL: config.apiUrl,
      headers: {
        'Authorization': `Bearer ${config.apiKey}`,
        'Content-Type': 'application/json'
      }
    });

    return {
      async upload(file) {
        try {
          // Create form data for file upload
          const formData = new FormData();
          formData.append('file', file.buffer, {
            filename: file.name,
            contentType: file.mime,
          });
          formData.append('folderId', config.defaultFolderId);
          
          // Upload to Filecamp
          const uploadResponse = await axios.post(
            `${config.apiUrl}/assets/upload`,
            formData,
            {
              headers: {
                ...formData.getHeaders(),
                'Authorization': `Bearer ${config.apiKey}`
              }
            }
          );
          
          // Return file details with Filecamp ID and URL
          return {
            id: uploadResponse.data.id,
            url: uploadResponse.data.url,
            filecampId: uploadResponse.data.assetId
          };
        } catch (error) {
          console.error('Filecamp upload error:', error);
          throw error;
        }
      },
      
      async delete(file) {
        try {
          // Delete file from Filecamp using the stored filecampId
          await filecampClient.delete(`/assets/${file.filecampId}`);
          return;
        } catch (error) {
          console.error('Filecamp deletion error:', error);
          throw error;
        }
      },
      
      async getSignedUrl(file) {
        try {
          // Get a signed URL with expiration
          const response = await filecampClient.post('/assets/signed-url', {
            assetId: file.filecampId,
            expiresIn: 3600 // 1 hour
          });
          
          return response.data.signedUrl;
        } catch (error) {
          console.error('Failed to generate signed URL:', error);
          throw error;
        }
      }
    };
  }
};

2. Media Selector Component: They integrated a custom asset browser within the Strapi interface, allowing content creators to work within a single environment.

// src/plugins/filecamp-browser/admin/src/components/MediaSelector/index.js
import React, { useState, useEffect } from 'react';
import { Button, Flex, Box, Typography, TextInput } from '@strapi/design-system';
import { Search } from '@strapi/icons';
import axios from 'axios';
import styled from 'styled-components';

const ImageGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 16px;
`;

const ImageCard = styled.div`
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s;
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
  ${props => props.selected && `
    border: 2px solid #4945ff;
    box-shadow: 0 0 0 4px rgba(73, 69, 255, 0.2);
  `}
`;

const MediaSelector = ({ onChange, value }) => {
  const [assets, setAssets] = useState([]);
  const [loading, setLoading] = useState(false);
  const [search, setSearch] = useState('');
  const [selectedAsset, setSelectedAsset] = useState(null);

  // Fetch assets from Filecamp on component mount
  useEffect(() => {
    fetchAssets();
  }, []);

  // Set initial selection if value is provided
  useEffect(() => {
    if (value && assets.length) {
      const asset = assets.find(a => a.id === value);
      if (asset) setSelectedAsset(asset);
    }
  }, [value, assets]);

  const fetchAssets = async (searchTerm = '') => {
    setLoading(true);
    try {
      const response = await axios.get('/filecamp-browser/assets', {
        params: { search: searchTerm }
      });
      setAssets(response.data);
    } catch (error) {
      console.error('Error fetching assets:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = () => {
    fetchAssets(search);
  };

  const handleSelect = (asset) => {
    setSelectedAsset(asset);
    onChange({ target: { name: 'filecamp-asset', value: asset.id } });
  };

  return (
    <Box padding={4}>
      <Typography variant="beta">Filecamp Asset Browser</Typography>
      
      <Flex gap={2} marginTop={4}>
        <TextInput 
          placeholder="Search assets..." 
          value={search}
          onChange={e => setSearch(e.target.value)}
          startIcon={<Search />}
        />
        <Button onClick={handleSearch} loading={loading}>
          Search
        </Button>
      </Flex>
      
      {loading ? (
        <Typography marginTop={4}>Loading assets...</Typography>
      ) : (
        <ImageGrid>
          {assets.map(asset => (
            <ImageCard 
              key={asset.id}
              selected={selectedAsset?.id === asset.id}
              onClick={() => handleSelect(asset)}
            >
              <img 
                src={asset.thumbnail} 
                alt={asset.filename}
                style={{ width: '100%', height: 'auto' }}
              />
              <Typography variant="pi" ellipsis>{asset.filename}</Typography>
            </ImageCard>
          ))}
        </ImageGrid>
      )}
    </Box>
  );
};

export default MediaSelector;

Metadata Synchronization: Essential file information from Filecamp—including tags, descriptions, and usage rights—automatically transfers to Strapi, providing editors with complete context.

// src/api/filecamp-sync/services/filecamp-sync.js
'use strict';

module.exports = ({ strapi }) => ({
  async syncMetadata(filecampId, strapiMediaId) {
    try {
      // Fetch the full metadata from Filecamp
      const filecampClient = strapi.config.get('filecamp.client');
      const metadataResponse = await filecampClient.get(`/assets/${filecampId}/metadata`);
      const metadata = metadataResponse.data;
      
      // Find the corresponding media entry in Strapi
      const mediaFile = await strapi.db.query('plugin::upload.file').findOne({
        where: { id: strapiMediaId }
      });
      
      if (!mediaFile) {
        throw new Error(`Media file with ID ${strapiMediaId} not found`);
      }
      
      // Update the Strapi media entity with Filecamp metadata
      await strapi.db.query('plugin::upload.file').update({
        where: { id: strapiMediaId },
        data: {
          alternativeText: metadata.description || mediaFile.alternativeText,
          caption: metadata.caption || mediaFile.caption,
          // Store additional metadata in a structured format
          metadata: {
            filecampMetadata: {
              tags: metadata.tags || [],
              usageRights: metadata.usageRights || {},
              copyright: metadata.copyright || '',
              expirationDate: metadata.expirationDate || null,
              categories: metadata.categories || [],
              // Other relevant Filecamp metadata
            }
          }
        }
      });
      
      return { success: true };
    } catch (error) {
      console.error('Metadata sync error:', error);
      return { success: false, error: error.message };
    }
  },
  
  // Set up a webhook listener for Filecamp metadata changes
  async setupWebhook() {
    const webhookUrl = `${strapi.config.get('server.url')}/api/filecamp-sync/webhook`;
    
    // Register webhook with Filecamp to receive metadata update events
    try {
      const filecampClient = strapi.config.get('filecamp.client');
      await filecampClient.post('/webhooks', {
        url: webhookUrl,
        events: ['asset.metadata.updated', 'asset.updated'],
        active: true
      });
      
      return { success: true, webhookUrl };
    } catch (error) {
      console.error('Webhook setup error:', error);
      return { success: false, error: error.message };
    }
  }
});

Caching Layer: To optimize performance, they implemented strategic caching for frequently used assets, reducing API call frequency.

// src/services/filecamp-cache.js
const Redis = require('ioredis');
const { promisify } = require('util');

class FilecampCache {
  constructor(config) {
    this.redis = new Redis(config.redis);
    this.cacheTTL = config.cacheTTL || 3600; // Default 1 hour
    this.namespace = 'filecamp:assets:';
  }
  
  generateKey(assetId) {
    return `${this.namespace}${assetId}`;
  }
  
  async getAsset(assetId) {
    try {
      const cachedAsset = await this.redis.get(this.generateKey(assetId));
      if (cachedAsset) {
        return JSON.parse(cachedAsset);
      }
      return null;
    } catch (error) {
      console.error('Cache retrieval error:', error);
      return null; // Fall back to API call if cache fails
    }
  }
  
  async setAsset(assetId, assetData) {
    try {
      await this.redis.set(
        this.generateKey(assetId),
        JSON.stringify(assetData),
        'EX', 
        this.cacheTTL
      );
      return true;
    } catch (error) {
      console.error('Cache storage error:', error);
      return false;
    }
  }
  
  async invalidateAsset(assetId) {
    try {
      await this.redis.del(this.generateKey(assetId));
      return true;
    } catch (error) {
      console.error('Cache invalidation error:', error);
      return false;
    }
  }
  
  // For frequently accessed assets, extend TTL
  async touchAsset(assetId) {
    try {
      await this.redis.expire(this.generateKey(assetId), this.cacheTTL);
      return true;
    } catch (error) {
      console.error('Cache TTL extension error:', error);
      return false;
    }
  }
  
  // Get multiple assets at once (for gallery views)
  async getMultipleAssets(assetIds) {
    try {
      const keys = assetIds.map(id => this.generateKey(id));
      const cachedResults = await this.redis.mget(keys);
      
      // Parse results and map back to original IDs
      return assetIds.map((id, index) => {
        const cachedData = cachedResults[index];
        return cachedData ? JSON.parse(cachedData) : null;
      });
    } catch (error) {
      console.error('Multi-cache retrieval error:', error);
      return assetIds.map(() => null);
    }
  }
}

module.exports = FilecampCache;

Workflow Improvements

Content Creation: Editors can now write articles and incorporate Filecamp images without switching between applications.
Asset Reuse: The centralized media library facilitates asset reuse across projects, improving consistency and efficiency.
Version Control: When images are updated in Filecamp, the changes automatically propagate to all instances within Strapi content.
Rights Management: The system enforces usage restrictions defined in Filecamp, preventing unauthorized use of limited-license assets.

You can go through more Strapi projects here.

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours, Monday through Friday, from 12:30 pm to 1:30 pm CST: Strapi Discord Open Office Hours.

For more details, visit the Strapi documentation and the Filecamp documentation.