Add Image Fields and Cloud Storage Integration to Memberstack Data Tables

• 

  Ramkumar T

  • March 08, 2026 05:19

  Looking at this from a practical angle - there isn't a native solution yet, but I've been working with a hybrid approach using Cloudflare R2 + Memberstack Data Tables that might help you in the meantime.

  The Setup:

  Since Memberstack only supports text/numeric fields in Data Tables, you're right that storing image URLs as text is currently the only option. But you can make this workflow feel pretty seamless with the right combination of tools.

  Here's what's working for me:

  1. Upload images to Cloudflare R2 (or S3) using a custom upload widget
  2. Save the returned URL to Data Tables using Memberscript #198
  3. Use Memberscript #200 on the upload button to instantly sync localStorage
  4. Display images from localStorage - gives you real-time updates without page refresh

  The key is Script #200 with data-ms-code="sync-button" on your save button. Without it, users upload an image but don't see it appear until they manually refresh - which feels broken. With #200, the Data Table syncs to localStorage immediately and your image gallery updates in real-time.

  Quick implementation example:

  html

  <!-- Upload Form -->
  <form data-ms-code="form1" 
        data-ms-code-table="member-images" 
        data-ms-code-table-type="group">
    
    <input type="file" id="image-upload" accept="image/*">
    
    <input type="hidden" 
           data-ms-code-table-name="imageUrl" 
           id="image-url-field">
    
    <input type="text" 
           data-ms-code-table-name="imageTitle" 
           placeholder="Image Title">
    
    <button type="submit" data-ms-code="sync-button">
      Save Image
    </button>
  </form>
  
  <script>
  // Handle R2 upload
  document.getElementById('image-upload').addEventListener('change', async (e) => {
    const file = e.target.files[0];
    const formData = new FormData();
    formData.append('file', file);
    
    const response = await fetch('YOUR_R2_UPLOAD_ENDPOINT', {
      method: 'POST',
      body: formData
    });
    
    const data = await response.json();
    document.getElementById('image-url-field').value = data.url;
  });
  
  // Display images from localStorage
  function displayImages() {
    const records = JSON.parse(localStorage.getItem('ms199-records') || '[]');
    const gallery = document.getElementById('gallery');
    
    gallery.innerHTML = records.map(record => `
      <img src="${record.data.imageUrl}" alt="${record.data.imageTitle}">
    `).join('');
  }
  
  displayImages();
  window.addEventListener('storage', displayImages);
  </script>

  Why this approach works:

  • Cloudflare R2 is incredibly cheap ($0.015/GB storage)
  • Scripts #198/#199/#200 handle the Data Table workflow smoothly
  • Real-time UI updates make it feel native
  • You maintain full control over image optimization/CDN

  Limitations to be aware of:

  • Still requires custom code for R2 upload handling
  • No built-in image validation or previews in Memberstack dashboard
  • You're managing the connection between systems manually

  Bottom line: This isn't as elegant as native image fields would be, but it's stable and performant. I've been running this setup for a few months now with member portfolios (50+ images per user) and it handles it well.

  Hope this helps bridge the gap until Memberstack ships native support! Would love to hear if anyone has improvements to this workflow.

  0

Please sign in to leave a comment.