Cloudy Upload - Upload and fetch images and videos from the cloudinary platform
Tags: cloudinary, php, cloud
Published: 2018-12-30 16:22:21

---
title: Cloudy Upload - Upload and fetch images and videos from the cloudinary platform
published: true
description: Cloudy upload is a simple app to demonstrate how to upload and fetch images and videos from the cloudinary platform
tags: cloudinary, php, cloud
---


With Cloudinary, you can upload images and videos to the cloud and then load them in your app through content delivery networks (CDN). This tutorial explains how to build a simple app that uploads  images or videos to the Cloudinary platform and then load them back in the app. As a prerequisite, you must be familiar with the programming languages PHP, HTML, and CSS. We also recommend that you install a local server, such as XAMPP or WampServer,  before stepping through this tutorial.

#Building the Interface
First, create the front end for the app:

1. Create a folder in the `htdocs` folder if your local server is XAMPP or in the `www` folder if your local server is WampServer. Name the new folder `cloudy-upload`.
2. Open `cloudy-upload` and then right-click to choose New > Select Text document from the context menu.
3. Name the text document `index.html`.
4. Open your IDE and add the following code to the `index.html` file:

```
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Cloudy Upload</title>
   <style>
      .container{
         display: flex;
         flex-direction: column;
         align-items: center;
       }
.form-group {
 	margin-bottom: 15px;
}
.form-control {
 display: block;
 width: 100%;
 height: 34px;
 padding: 6px 12px;
 font-size: 14px;
 line-height: 1.42857143;
 color: #555;
 background-color: #fff;
 background-image: none;
 border: 1px solid #ccc;
 border-radius: 4px;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
         box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
      -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
         transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
      </style>
</head>
<body>
<div class="container">
   <img src="https://res.cloudinary.com/cloudinary/image/upload/c_scale,w_200/v1/logo/for_white_bg/cloudinary_vertical_logo_for_white_bg.png">
   <h1>CloudyUpload</h1>
   <p>Upload your image or video to Cloudinary</p>
   
<form enctype="multipart/form-data" action=”upload.php”>
<div class=”form-group”>
<input type="file" class="form-control" id="attachment" name="attachment" placeholder="Select Attachment">
</div>
<br>
<button type="submit" id="submitData" name=”submitData”> Submit </button>
</form>
       </div>
</body>
</html>
```

Afterwards, go to the file in your browser. The following page is displayed:

![cloudy upload form](https://pesewawebsoft.com/images/cloudinary.JPG)

At this point, clicking **Submit** results in no response.

#Creating a Database for the Public IDs and File Types
Next, create a database to store the public IDs and file types of your videos and images:
Go to `localhost/phpmyadmin` on your browser, click the **SQL** tab at the top, and type the following code in the top text field:
```
CREATE DATABASE *cloudy_upload*;
```
![database creation](https://pesewawebsoft.com/images/databse.JPG)

Click `cloudy_upload` on the left navigation and then the **SQL** tab at the top. Type this code in the top text field:
```
CREATE TABLE resources(
	ID int NOT NULL PRIMARY KEY,
	FileType varchar(255),
	PublicID varchar(255),
);
```
![table creation](https://pesewawebsoft.com/images/database2.JPG)


#Building a Back End and Connecting to the Cloudinary API
Now create a file in the same folder as that for `index.html`, name the new file `upload.php`, and add the following code to it:

```
<?php
$host = "localhost";
$user = "YOUR-DATABASE-USERNAME"; 
$password = "YOUR-DATABASE-PASSWORD";

   $con = mysqli_connect($host,$user,$password);
   mysqli_select_db($con,"cloudy_upload") OR DIE('could not connect to database');


\Cloudinary::config(array(
   "cloud_name" => "YOUR-CLOUD-NAME",
   "api_key" => "YOUR-CLOUDINARY-API-KEY",
   "api_secret" => "YOUR-CLOUDINARY-API-SECRET"
));

if(isset($_FILES['file'])){
   $fileName = $_FILES['file']['name'];
   $ext = pathinfo($fileName, PATHINFO_EXTENSION);
   $tmpName = $_FILES['file']['tmp_name'];
   $fileType = $_FILES['file']['type'];
   $fileName = addslashes($fileName);

   $public_id = "myT".time().".".$ext;

   if($_FILES['file']['error'] > 0){
       echo 'There is an error in your file';
   }
   else{
       $insert = mysqli_query($con, "INSERT INTO resources(FileType, PublicID) VALUES ('$fileType', '$public_id')");
       if($insert){
           \Cloudinary\Uploader::upload_large($tmpName,
               array("resource_type" => "auto",
                   "public_id" => $public_id));
           echo 'success! File uploaded';
       }
       else{
           echo 'error! File upload failed';
       }
   }
}
else{
   echo 'Kindly select a file';
}
```

**Note:** Be sure to replace the variables `YOUR-DATABASE-USERNAME` and `YOUR-DATABASE-PASSWORD` with their actual values, that is, the user name for your database and its password, respectively. Do the same for `YOUR-CLOUD-NAME`, `YOUR-CLOUDINARY-API-KEY`, and `YOUR-CLOUDINARY-API-SECRET`. 

Next, connect to your database by calling the PHP  `mysqli_connect()` function and then connect to the Cloudinary API by logging in to your Cloudinary account with your credentials. 

**Note:** To obtain your account credentials, [sign up](https://cloudinary.com/signup) for a free Cloudinary account:

![cloudinary console](https://pesewawebsoft.com/images/console.png)

![cloudinary console](https://pesewawebsoft.com/images/dashboard.png)


Once you’ve made those two connections, when you select a file for upload, Cloudinary gets hold of its name, type, and size, and then creates a public ID for the file. That ID, which is the file’s unique identification on the Cloudinary platform, is saved in the Cloudinary database along with the related file type. 

**Note:** In case of a problematic file, Cloudinary displays an error message.

To upload videos or images to Cloudinary, call Cloudinary’s `upload_large` method since the files might be largeones. Also, set `resource_type` to `auto` to pave the way for uploading both videos and images.


#Accessing Uploads
To  access an uploaded file through a Cloudinary CDN, 
first create a file called `show-file.php` and add to it the following code:

```
<?php
$host = "localhost";
$user = "YOUR-DATABASE-USERNAME"; 
$password = "YOUR-DATABASE-PASSWORD";

   $con = mysqli_connect($host,$user,$password);
   mysqli_select_db($con,"cloudy_upload") OR DIE('could not connect to database');

$select = mysqli_query($con,"SELECT * FROM resources");
$res = mysqli_fetch_array($select);
$public_id = $res['PublicID']
$filetype = $res['FileType']
list($type,$ext)= split('[/]',$filetype);
if($type = 'video'){
?>
<div class="text-center">
               <video width="80%" class="center-block" controls>
                   <source src="https://res.cloudinary.com/YOUR-CLOUD-NAME/video/upload/FOLDER-NAME/<?php echo $public_id ?>" type="<?php $filetype ?>">
                   Your browser does not support the video tag.
               </video>
       </div>
<?php
}else if($type = 'image'){
?>
<div class="text-center">
<img src="https://res.cloudinary.com/YOUR-CLOUD-NAME/image/upload/FOLDER-NAME/<?php echo $public_id ?>"/>
</div>
<?php
}
```

Next, select the video's public ID and file type from the database and click the link icon from the Media Library on your Cloudinary console:

![cloudinary video](https://pesewawebsoft.com/images/tempsnip.png)

The video is then loaded in your browser, as in this example:

![uploaded video](https://pesewawebsoft.com/images/video.JPG)

#Wrapping Up
You’ve now learned how to upload video and image files to the Cloudinary platform and how to retrieve them for your app. It’s now time for you to fire up your creativity and do amazing things. Have fun!