What's the best way to cache file uploads from a WordPress form before sending to Zapier?

Other Questions Zapier
1

I’m working on a WordPress site with a custom form. The form gets user input and file uploads like JPEGs. When someone submits the form, it should send everything to Zapier through a webhook.

The problem is that Zapier only gets the file names, not the actual files. I think I need to save the uploads somewhere on WordPress first.

How can I make WordPress keep the uploaded files for a bit before the webhook sends them to Zapier? I’m not sure how to set this up so Zapier gets the real files.

Here’s a basic version of what I’m trying to do:

// Form submit handler
async function handleSubmit(e) {
  e.preventDefault();
  
  let formData = new FormData(form);
  let files = [];
  
  // Save files temporarily
  for (let input of fileInputs) {
    for (let file of input.files) {
      let response = await wp.ajax.send({
        action: 'save_file',
        file: file
      });
      
      files.push({
        name: file.name,
        url: response.url  
      });
    }
  }
  
  formData.append('files', JSON.stringify(files));
  
  // Send to Zapier
  fetch('https://hooks.zapier.com/hooks/catch/123/456', {
    method: 'POST',
    body: formData  
  });
}

form.addEventListener('submit', handleSubmit);

Any tips on how to get this working? Thanks!

2

I’ve dealt with a similar issue before, and here’s what worked for me:

Instead of trying to send the files directly to Zapier, you can store them temporarily on your WordPress server and send the URLs to Zapier. Here’s the general approach:

  1. When the form is submitted, save the uploaded files to a temporary directory on your server.

  2. Generate unique URLs for these files.

  3. Send these URLs to Zapier in your webhook payload.

  4. In Zapier, use a step to download the files from these URLs.

  5. Set up a cron job on your WordPress site to clean up old temporary files periodically.

This method ensures Zapier receives the actual file content while keeping your WordPress site tidy. Remember to handle file permissions and security properly when implementing this solution.

3

hey, u could try using a plugin like WP Offload Media Lite. it’ll store ur uploads in the cloud (like Amazon S3) and give u URLs. then just send those URLs to Zapier in ur webhook. zapier can grab the files from there. way easier than messin with temp storage on ur server

4

I’ve tackled this issue in a recent project. What worked for me was implementing a custom caching mechanism using WordPress transients. Here’s the gist:

When files are uploaded, store them in a designated folder within wp-content/uploads/. Generate a unique key for each file and save its path in a transient with a reasonable expiration time (say, 1 hour).

In your form submission handler, retrieve the cached file paths from transients and include them in the payload sent to Zapier. This way, Zapier receives direct links to the files on your server.

Don’t forget to set up a cleanup routine to remove old files and expired transients. This approach balances performance with server resource management.

One caveat: ensure your server can handle the potential load if you’re expecting high traffic or large files. You might need to tweak PHP settings like upload_max_filesize and post_max_size accordingly.