Serverless File Uploads in PHP

20 Minutes to Integrate

PHP is one of the most popular programming languages in the world. The larger part of the internet is written in it, so we did our best to build the Uploadcare PHP integration and make it as powerful as rocket and as easy as pie 🍰

This guide covers integrating our File Uploader; it enables your PHP app to receive files and caches uploads on our CDN. It should take you about 20 minutes to build the working integration.

By the second step of this guide, you’ll have the file uploading file uploader installed, and by the end, you’ll have a working PHP app.

Note, we won’t be using any PHP framework in this guide. Most of the modern frameworks implement Composer, and the installation process should not be too different. If you are experiencing problems with your framework, shoot us a note in the community area.

Before We Begin
- PHP Configuration
- Uploadcare Account
Step 1. Install Uploadcare PHP Libraries
Step 2. Get Started with File Uploader
Step 3. Deal with File Uploader’s Data
Conclusion

Let’s begin with checking whether all PHP modules are in place and installing libraries.

Before We Begin

PHP Configuration

Our libraries require PHP 5.3+. Most likely, you have it. You can check the PHP version via CLI:

php -v

Also, you will need to have the php-curl and php-json modules installed. Usually, those are enabled by default. You can check which modules are enabled like this:

php -m

You should then see something like that:

workstation:home user$ php -m
[PHP Modules]
bcmath
...
curl
...
json
...

[Zend Modules]

If you haven’t found json or curl in the list, just google something like “install php-curl Your OS”. The installation may vary depending on your OS.

Uploadcare Account

In case you don’t have an Uploadcare account, Sign Up for one. Once you get it, navigate to your dashboard to create a new project or discover Public and Secret API keys for an existing one.

If you’re planning to upload non-image content, add billing info to your account settings.

Step 1. Install Uploadcare PHP Libraries

We will use the PHP package manager, Composer. If you don’t have it (the composer command isn’t available), you can install Composer for the current project. Just copy and execute the commands from the Composer page via your CLI.

If you already have the Composer config file named composer.json, insert the line starting with "uploadcare into your "require" section. If you haven’t got any, create a new composer.json with the following contents:

{
  "require": {
    "uploadcare/uploadcare-php": ">=v2.0,<3.0"
  }
}

Now we’re ready to download and install libraries via Composer ✨

php composer.phar install --no-dev

Then, include the libraries in your project. We’ll cover the simple case where your project consists of a single index.php file. In real projects with complicated file structure, do the next steps in a place where you want the uploader.

So, let’s open index.php and insert the following lines:

require_once 'vendor/autoload.php';
use \Uploadcare;

define('UC_PUBLIC_KEY', 'YOUR_PUBLIC_KEY');
define('UC_SECRET_KEY', 'YOUR_SECRET_KEY');

require_once 'vendor/autoload.php'; is requiring all Composer libraries that should load automatically, including the Uploadcare ones.

use \Uploadcare; allows current PHP script to use the \Uploadcare namespace. It isn’t necessary, but it can make your life easier.

The last two lines in the above snippet define Uploadcare API Keys as constants. Don’t forget to replace YOUR_PUBLIC_KEY and YOUR_SECRET_KEY with your actual Public API Key and Secret API Key. you discovered at the beginning of this article.

And finally, let’s initialize the object we will use for all the Uploadcare routines:

$api = new Uploadcare\Api(UC_PUBLIC_KEY, UC_SECRET_KEY);

That’s how index.php should look like after your changes:

Step 2. Get Started with File Uploader

Let’s add the File Uploader. First, you’ll need to include some JavaScript to make it work.

You can go with getting a full File Uploader’s <script> element. Thus you will include full JavaScript contents of the file uploader script in a prepared tag. Here’s an example:

<head>
  <script>
    UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';
  </script>
  <?php echo $api->widget->getScriptTag(); ?>
</head>

As you may have noticed in the snippet above, the JavaScript part of your app needs to know your Public API Key too. So consider adding the <script> element with it in your <head>, replacing YOUR_PUBLIC_KEY with your actual Public API Key.

Now let’s add the file uploader itself. Create an HTML form and get the input tag using our $api object:

<form method="POST" action="index.php">
  <?php echo $api->widget->getInputTag('qs-file'); ?>
  <input type="submit" value="Save!" />
</form>

Save the file and open the page in your browser. The file uploader should already be there:

Great, the File Uploader works 💪

By the way, you can use any of the available file uploader options via the second param of getInputTag. For example, this is how you allow users to upload images only:

<?php echo $api->widget->getInputTag('qs-file', ['data-images-only' => 'true']); ?>

The file uploader is in its place and works. However, we still do nothing with the uploaded file. Our form points to index.php, so let’s insert some code into it to accept form data and show the uploaded image:

if (isset($_POST['qs-file'])) {
  $file_id = $_POST['qs-file'];

  $file = $api->getFile($file_id);
  $file->store();

  echo $file->getImgTag('image.jpg', array('alt' => 'Image'));
}

The file uploader creates a hidden input <input type=hidden> named qs-file. Its value will be then set to file’s identifier - file_id and transferred in a POST request. To ensure that the uploaded file won’t disappear after 24 hours, we are using the $file->store(); method.

In the end of the above snippet you can see the getImgTag() method, which returns a prepared <img> tag. You can also go with just file’s URL, like that:

<img src="<?php echo $file->getUrl(); ?>" />
<img src="<?php echo $file; ?>" /> <!-- This will work too -->

Yoo-hoo we’re done with the simple file uploading app!

And that’s the full code of the final index.php:

<?php
require_once 'vendor/autoload.php';
use \Uploadcare;

define('UC_PUBLIC_KEY', 'YOUR_PUBLIC_KEY');
define('UC_SECRET_KEY', 'YOUR_SECRET_KEY');

$api = new Uploadcare\Api(UC_PUBLIC_KEY, UC_SECRET_KEY);
?>
<title>Uploadcare & PHP</title>

<script type="text/javascript" src="<?php echo $api->widget->getScriptSrc()?>"></script>

<script>
  UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';
</script>

<p>Hello world!</p>

<form method="POST" action="index.php">
  <?php echo $api->widget->getInputTag('qs-file'); ?>
  <input type="submit" value="Save!" />
</form>

<?php
if (isset($_POST['qs-file'])) {
  $file_id = $_POST['qs-file'];

  $file = $api->getFile($file_id);
  $file->store();

  echo $file->getImgTag('image.jpg', array('alt' => 'Image'));
}
?>

Conclusion

You’ve just built a simple file uploading app with PHP and Uploadcare and are ready to further explore Uploadcare ⛵

For instance, you can learn more about working with our API, implementing image transformations, and saving the planet from a zombie apocalypse. Check out the following references:

In case you have any questions, feel free to post those around our community area.