We're creating a form that allows users to upload large files. On mobile devices and slow connections, it might take a while to upload, so it seems important for this to be handled by an AJAX call that shows the users a progress bar (or something to let them know it's still working).
Here's the problem: The endpoint for the upload is a 3rd party API which expects our secret API key as one of the parameters. Here's a link directly to the section in their documentation. This API key cannot be exposed to the users on the client side.
My first instinct is to submit the form to an intermediate PHP script on our site, which has the API key, and then uploads the file to the API. But I'm pretty sure this will mean uploading the file twice: once to our server. Then again from our server to the API endpoint. Even if the form is submitted with AJAX, it's not a great result for the user to wait twice as long for it to complete.
So: What's the smoothest way to let users upload files while keeping our API key safe?
Some details that may or may not be important:
Our site is a PHP web app built on the CakePHP framework (v2.x). The files being uploaded are video files of all different formats between 1 and 5 minutes long. The API is a company called Wistia (see link to docs above). The file sizes seem to range from 3-30MB. We have no ability to change the way the 3rd party API works.