DEV Community

Cover image for SupaWP Storage Filter Hooks - Seamless Supabase Storage Integration for WordPress
Dale Nguyen
Dale Nguyen

Posted on • Originally published at dalenguyen.me

SupaWP Storage Filter Hooks - Seamless Supabase Storage Integration for WordPress

#supabase #wordpress #webdev #php

Building modern WordPress applications often requires robust file storage solutions that scale beyond traditional media library limitations. Today, we're excited to introduce SupaWP Storage Filter Hooks – a powerful new feature that brings seamless Supabase Storage integration directly to your WordPress plugins and themes.

What Are SupaWP Storage Filter Hooks?

SupaWP Storage Filter Hooks are a set of WordPress filter hooks that provide a standardized, developer-friendly way to integrate Supabase Storage into any WordPress application. Instead of writing custom storage code for each project, you can now leverage these hooks to upload, delete, and manage files in Supabase Storage with just a few lines of code.

Prerequisites

Before diving into the implementation, ensure you have:

  • WordPress site with SupaWP plugin v1.3.4 or higher installed and configured
  • Supabase project with Storage enabled
  • Basic knowledge of WordPress filters and PHP
  • Supabase Storage bucket configured

The Three Essential Hooks

1. supawp_upload_image_to_supabase

Upload images directly to Supabase Storage with automatic validation and security:

// Upload a user profile image
$image_url = apply_filters('supawp_upload_image_to_supabase', $file, $fileName, 'user-images');

if (!empty($image_url)) {
    // Success! Save the URL to your database
    update_user_meta($user_id, 'profile_image_url', $image_url);
    return array('success' => true, 'url' => $image_url);
}
Enter fullscreen mode Exit fullscreen mode

2. supawp_delete_image_from_supabase

Remove files from Supabase Storage with proper cleanup:

// Delete a user's profile image
$success = apply_filters('supawp_delete_image_from_supabase', $image_url, 'user-images');

if ($success) {
    // File deleted successfully
    delete_user_meta($user_id, 'profile_image_url');
}
Enter fullscreen mode Exit fullscreen mode

3. supawp_get_storage_config

Access Supabase Storage configuration and verify setup:

// Check if storage is properly configured
$config = apply_filters('supawp_get_storage_config');

if (!empty($config)) {
    echo "Storage URL: " . $config['url'];
    echo "Authentication: Configured ✓";
}
Enter fullscreen mode Exit fullscreen mode

Simple File Upload Implementation

Here's a basic implementation using the SupaWP Storage Filter Hooks:

<?php
/**
 * Simple File Upload with SupaWP Storage
 */
class Simple_SupaWP_Upload {

    public static function init() {
        add_shortcode('simple_file_upload', array('Simple_SupaWP_Upload', 'upload_shortcode'));
        add_action('wp_ajax_upload_to_supabase', array('Simple_SupaWP_Upload', 'handle_upload'));
    }

    public static function upload_shortcode() {
        $current_user = wp_get_current_user();
        if (!$current_user->ID) {
            return '<p>Please log in to upload files.</p>';
        }

        ob_start();
        ?>
        <form id="upload-form" enctype="multipart/form-data">
            <input type="file" name="user_file" accept=".jpg,.jpeg,.png,.webp" required>
            <button type="submit">Upload File</button>
        </form>

        <div id="upload-result"></div>

        <script>
            document.getElementById('upload-form').addEventListener('submit', function(e) {
                e.preventDefault();

                const formData = new FormData(this);
                formData.append('action', 'upload_to_supabase');
                formData.append('nonce', '<?php echo wp_create_nonce('upload_nonce'); ?>');

                fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    document.getElementById('upload-result').innerHTML =
                        data.success ? 'Upload successful!' : 'Upload failed: ' + data.data;
                });
            });
        </script>
        <?php
        return ob_get_clean();
    }

    public static function handle_upload() {
        check_ajax_referer('upload_nonce', 'nonce');

        if (!isset($_FILES['user_file'])) {
            wp_send_json_error('No file provided');
        }

        $file = $_FILES['user_file'];
        $user_id = get_current_user_id();

        // Generate file path
        $extension = pathinfo($file['name'], PATHINFO_EXTENSION);
        $fileName = "users/{$user_id}/" . time() . ".{$extension}";

        // Upload using SupaWP hook
        $url = apply_filters('supawp_upload_image_to_supabase', $file, $fileName, 'user-content');

        if ($url) {
            wp_send_json_success(array('url' => $url));
        } else {
            wp_send_json_error('Upload failed');
        }
    }
}

add_action('supawp_init', array('Simple_SupaWP_Upload', 'init'));
Enter fullscreen mode Exit fullscreen mode

Advanced Implementation Examples

E-commerce Product Gallery 

function upload_product_images($product_id, $files) {
    $uploaded_urls = array();

    foreach ($files as $file) {
        $fileName = "products/{$product_id}/" . time() . ".jpg";
        $url = apply_filters('supawp_upload_image_to_supabase', $file, $fileName, 'products');

        if ($url) {
            $uploaded_urls[] = $url;
        }
    }

    update_post_meta($product_id, '_gallery_urls', $uploaded_urls);
    return $uploaded_urls;
}
Enter fullscreen mode Exit fullscreen mode

User Document Management 

function upload_user_document($user_id, $file) {
    if (!current_user_can('upload_files')) {
        return false;
    }

    $fileName = "documents/{$user_id}/" . time() . ".pdf";
    $url = apply_filters('supawp_upload_image_to_supabase', $file, $fileName, 'documents');

    if ($url) {
        update_user_meta($user_id, 'document_url', $url);
        return $url;
    }

    return false;
}
Enter fullscreen mode Exit fullscreen mode

Integration with Popular Plugins

Contact Form 7 Integration 

function handle_contact_form_upload($contact_form) {
    $submission = WPCF7_Submission::get_instance();
    $files = $submission->uploaded_files();

    if (isset($files['resume'])) {
        $fileName = "resumes/" . time() . "_resume.pdf";
        $url = apply_filters('supawp_upload_image_to_supabase', $files['resume'], $fileName, 'resumes');

        if ($url) {
            update_option('latest_resume', $url);
        }
    }
}
add_action('wpcf7_mail_sent', 'handle_contact_form_upload');
Enter fullscreen mode Exit fullscreen mode

WooCommerce Integration 

function sync_product_to_supabase($product_id) {
    $product = wc_get_product($product_id);
    $image_id = $product->get_image_id();

    if ($image_id) {
        $image_path = get_attached_file($image_id);
        $file = array(
            'tmp_name' => $image_path,
            'name' => basename($image_path),
            'size' => filesize($image_path)
        );

        $fileName = "products/{$product_id}.jpg";
        $url = apply_filters('supawp_upload_image_to_supabase', $file, $fileName, 'products');

        if ($url) {
            update_post_meta($product_id, '_supabase_image', $url);
        }
    }
}
add_action('woocommerce_process_product_meta', 'sync_product_to_supabase');
Enter fullscreen mode Exit fullscreen mode

Security Best Practices

Row Level Security (RLS) Policies

Set up proper RLS policies in your Supabase dashboard:

-- Users can only upload to their own folders
CREATE POLICY "Users upload own files" ON storage.objects
FOR INSERT WITH CHECK (
    bucket_id = 'user-content' AND
    (storage.foldername(name))[1] = auth.uid()::text
);

-- Users can only view their own files
CREATE POLICY "Users view own files" ON storage.objects
FOR SELECT USING (
    bucket_id = 'user-content' AND
    (storage.foldername(name))[1] = auth.uid()::text
);

-- Users can only delete their own files
CREATE POLICY "Users delete own files" ON storage.objects
FOR DELETE USING (
    bucket_id = 'user-content' AND
    (storage.foldername(name))[1] = auth.uid()::text
);
Enter fullscreen mode Exit fullscreen mode

Simple File Validation 

function validate_file($file) {
    // Check file size (5MB limit)
    if ($file['size'] > 5242880) {
        return false;
    }

    // Check file type
    $allowed_types = array('jpg', 'png', 'pdf');
    $extension = pathinfo($file['name'], PATHINFO_EXTENSION);

    return in_array($extension, $allowed_types);
}
Enter fullscreen mode Exit fullscreen mode

Performance Optimization

Batch Upload 

function batch_upload($files, $user_id) {
    $results = array();

    foreach ($files as $file) {
        $fileName = "users/{$user_id}/" . time() . ".jpg";
        $url = apply_filters('supawp_upload_image_to_supabase', $file, $fileName, 'user-content');

        $results[] = array(
            'name' => $file['name'],
            'url' => $url,
            'success' => !empty($url)
        );
    }

    return $results;
}
Enter fullscreen mode Exit fullscreen mode

Using Your File Upload System

Once your code is in place:

  1. Add the shortcode to any page or post: [simple_file_upload]
  2. Ensure users are logged in for security
  3. Configure your Supabase Storage with appropriate buckets

Example usage:

[simple_file_upload]
Enter fullscreen mode Exit fullscreen mode

Common Supabase Storage Query Filters

When working with uploaded files, you can query them using various filters:

// Get user's files from database
$user_files = apply_filters('supawp_get_data_from_supabase', 'files', array(
    'user_id' => 'eq.' . $user_id,
    'order' => 'created_at.desc'
));

// Filter by file size
$large_files = apply_filters('supawp_get_data_from_supabase', 'files', array(
    'file_size' => 'gt.1000000'
));
Enter fullscreen mode Exit fullscreen mode

Troubleshooting Common Issues

Troubleshooting 

// Check if storage is configured
$config = apply_filters('supawp_get_storage_config');
if (empty($config)) {
    echo "Storage not configured";
}
Enter fullscreen mode Exit fullscreen mode

Common Issues

  1. Storage not configured - Check SupaWP settings
  2. Upload fails - Verify file size and type limits
  3. Permission denied - Check Supabase RLS policies
  4. Files not showing - Ensure bucket is public

Conclusion

SupaWP Storage Filter Hooks revolutionize file management in WordPress by providing seamless integration with Supabase's powerful storage infrastructure. With enterprise-grade security, global CDN distribution, and a developer-friendly API, you can build sophisticated file management systems with minimal code.

Key benefits of this integration:

  • Zero Configuration Complexity - SupaWP handles authentication and API communication
  • Enterprise Security - Automatic RLS integration and secure file handling
  • Global Performance - Leverage Supabase's worldwide CDN network
  • WordPress Native - Uses familiar WordPress filter patterns
  • Scalable Architecture - No server storage limitations

Whether you're building a simple profile system, complex document management, or e-commerce product galleries, SupaWP Storage Filter Hooks provide the foundation for modern, scalable WordPress applications.

Resources

Ready to transform your WordPress file management? Download SupaWP v1.3.4+ and start building with Supabase Storage today!

Top comments (0)