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:
- Create a folder in the
htdocsfolder if your local server is XAMPP or in thewwwfolder if your local server is WampServer. Name the new foldercloudy-upload. - Open
cloudy-uploadand then right-click to choose New > Select Text document from the context menu. - Name the text document
index.html. - Open your IDE and add the following code to the
index.htmlfile:
<!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:
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*;
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),
);
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 for a free Cloudinary account:
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:
The video is then loaded in your browser, as in this example:
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!
Top comments (0)