Cloudinary Blog

AJAX File Upload - Quick Tutorial & Time Saving Tips

AJAX File Upload - Quick Tutorial & Time Saving Tips

File upload through AJAX techniques can be daunting because of the large amount of code, let alone the painstaking tasks involved, such as the following:

  • Setting up an XMLHttpRequest instance
  • Setting up various handlers on the XMLHttpRequest object
  • Setting up a back end to accept data from the AJAX request
  • Validating the form
  • Setting up an efficient feedback loop for the audience

No sweat, however, thanks to Cloudinary, a cloud-based, end-to-end media-management solution that automates and streamlines the workflow for media assets, including images, videos, and audios. Specifically, Cloudinary selects, uploads, analyzes, manipulates, optimizes, and delivers those assets across devices in short order. Be sure to sign up for a FREE Cloudinary account and try this for yourself.

This article describes how to upload AJAX files with Cloudinary with only a few lines of code and no need for any of the above tasks.


Sign up for Cloudinary free today!


Preliminary Steps

As a first step, create a free Cloudinary account, which includes a dashboard, a unique cloud name for you, an API key, and an API secret, which you’ll need to work with Cloudinary.

Subsequently, create an upload preset, which defines the options that apply to all your uploads.

Direct Ajax File Uploads With Cloudinary

Follow these three simple steps:

Create an HTML form.

In your root directory, create an HTML form (an index.html file) with the following code, which contains the fields for file uploads:

index.html

Copy to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX File Uploads With Cloudinary</title>
</head>
<body>
    <form id="file-form" action="fileUpload.php" method="post" enctype="multipart/form-data">
        Upload a File:
        <input type="file" id="myfile" name="myfile">
        <input type="submit" id="submit" name="submit" value="Upload File Now" >
    </form>
    <p id="status"></p>
    <script type="text/javascript" src="fileUpload.js"></script>
</body>
</html>

You now have a form with the following elements:

  • An input field and a submit button.
  • An action attribute—within the form tag—that points to the script that handles the upload.
  • A method attribute that specifies the operation post undertaken by this form.
  • An enctype attribute, whose value specifies the content type of the upload. Here, because the task in question is to upload files, do not specify the enctype attribute.
  • An id attribute for both input fields, which handle the form elements with JavaScript.

Add the Cloudinary JavaScript library.

JavaScript plugins on Cloudinary facilitate image uploads to its server. Include them in your index.html file, like this:

Copy to clipboard
 <script src='https://cdn.jsdelivr.net/jquery.cloudinary/1.0.18/jquery.cloudinary.js' type='text/javascript'></script>
 <script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>

Specify Direct Uploads

Create a file called fileUpload.js with the following in the root directory:

Copy to clipboard
$(function() {
    // Configure Cloudinary
    // with the credentials on
    // your Cloudinary dashboard
    $.cloudinary.config({ cloud_name: 'YOUR_CLOUD_NAME', api_key: 'YOUR_API_KEY'});
    // Upload button
    var uploadButton = $('#submit');
    // Upload-button event
    uploadButton.on('click', function(e){
        // Initiate upload
        cloudinary.openUploadWidget({ cloud_name: 'YOUR_CLOUD_NAME', upload_preset: 'YOUR_UPLOAD_PRESET', tags: ['cgal']}, 
        function(error, result) { 
            if(error) console.log(error);
            // If NO error, log image data to console
            var id = result[0].public_id;
            console.log(processImage(id));
        });
    });
})
function processImage(id) {
    var options = {
        client_hints: true,
    };
    return '<img src="'+ $.cloudinary.url(id, options) +'" style="width: 100%; height: auto"/>';
}

Note
Be sure to replace the YOUR_CLOUD_NAME, YOUR_UPLOAD_PRESET, and YOUR_API_KEY variables with their values from your Cloudinary dashboard.

Ajax File Uploads to a Backend Server

To handle file uploads with AJAX and store the files on a backend server (e,g PHP Server), create an HTML form and two upload scripts: one written in JavaScript and the other in PHP.:

HTML form In your root directory, build an HTML form (an index.html file) with the following code, which contains the fields for file uploads:

Copy to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Uploads With AJAX</title>
</head>
<body>
    <form id="file-form" action="fileUpload.php" method="post" enctype="multipart/form-data">
        Upload a File:
        <input type="file" id="myfile" name="myfile">
        <input type="submit" id="submit" name="submit" value="Upload File Now" >
    </form>

    <p id="status"></p>
    <script type="text/javascript" src="fileUpload.js"></script>
</body>
</html>

Note the following:

  • The form contains an input field and a submit button.
    • The form tag has an action** attribute that points to the script that will take care of the actual upload process. It also has a method attribute that specifies the kind of operation this form will undertake, which is post.
    • An enctype attribute, whose value specifies the content type of the upload. Here, because the task in question is to upload files, do not specify the enctype attribute.
    • An id attribute for both input fields, which handles the form elements with JavaScript.

AJAX-enabled script in JavaScript

In your root directory, create a file called fileUpload.js with the following code:

Copy to clipboard
(function(){
    var form = document.getElementById('file-form');
    var fileSelect = document.getElementById('myfile');
    var uploadButton = document.getElementById('submit');
    var statusDiv = document.getElementById('status');

    form.onsubmit = function(event) {
        event.preventDefault();

        statusDiv.innerHTML = 'Uploading . . . ';

        // Get the files from the input
        var files = fileSelect.files;

        // Create a FormData object.
        var formData = new FormData();

        //Grab only one file since this script disallows multiple file uploads.
        var file = files[0]; 

        //Check the file type.
        if (!file.type.match('image.*')) {
            statusDiv.innerHTML = 'You cannot upload this file because it’s not an image.';
            return;
        }

        if (file.size >= 2000000 ) {
            statusDiv.innerHTML = 'You cannot upload this file because its size exceeds the maximum limit of 2 MB.';
            return;
        }

         // Add the file to the AJAX request.
        formData.append('myfile', file, file.name);

        // Set up the request.
        var xhr = new XMLHttpRequest();

        // Open the connection.
        xhr.open('POST', '/fileUpload.php', true);


        // Set up a handler for when the task for the request is complete.
        xhr.onload = function () {
          if (xhr.status === 200) {
            statusDiv.innerHTML = 'Your upload is successful..';
          } else {
            statusDiv.innerHTML = 'An error occurred during the upload. Try again.';
          }
        };

        // Send the data.
        xhr.send(formData);
    }
})();

Step by step, the process proceeds as follows:

Grab all the elements, i.e., the form, the file-input, and status div, as reflected in this code:

Copy to clipboard
    var form = document.getElementById('file-form');
    var fileSelect = document.getElementById('myfile');
    var statusDiv = document.getElementById('status');

Call the form’s onsubmit event. After the user has submitted the form, attach an event handler to the form:

Copy to clipboard
form.onsubmit = function(event) {
.

}

Get hold of the file specified by the user and, for a robust experience, keep that user informed of what’s transpiring behind the scenes, like this:

Copy to clipboard
.

 statusDiv.innerHTML = 'Uploading . . . ';

  // Picking up files from the input .  .  .
  var files = fileSelect.files;

 // Uploading only one file; multiple uploads are not allowed.
  var file = files[0]; 

...

Create a form object, validate the size and type of the file to be uploaded, and add the file to form, like this:

Copy to clipboard
        // Create a FormData object.
        var formData = new FormData();


        //Check the file type.
        if (!file.type.match('image.*')) {
            statusDiv.innerHTML = ''You cannot upload this file because its not an image.';
            return;
        }

        if (file.size >= 2000000 ) {
            statusDiv.innerHTML = 'You cannot upload this file because its size exceeds the maximum limit of 2 MB.';
            return;
        }

         // Add the file to the request.
        formData.append('myfile', file, file.name);

Set up an AJAX request, open a connection, and listen for the onload event of the xhr object.

Copy to clipboard

// Set up an AJAX request.
        var xhr = new XMLHttpRequest();

        // Open the connection.
        xhr.open('POST', '/fileUpload.php', true);


        // Set up a handler for when the task for the request is complete.
        xhr.onload = function () {
          if (xhr.status === 200) {
            statusDiv.innerHTML = Your upload is successful.';
          } else {
            statusDiv.innerHTML = 'An error occurred while uploading the file...Try again';
          }
        };

        // Send the Data.
        xhr.send(formData);

Here, you make a post request to fileUpload.php. And yes, you must still process the file on the back end, to which the AJAX request submits the file for processing.

Before leveraging the preceding code for production, you must make provisions for several edge cases, for example, perform checks to ensure that only safe files are posted to your back end.

PHP script

Below is the script written in PHP.

Copy to clipboard
<?php
    $currentDir = getcwd();
    $uploadDirectory = "/uploads/";

    $errors = []; // Store all foreseen and unforeseen errors here.

    $fileExtensions = ['jpeg','jpg','png']; // Get all the file extensions.

    $fileName = $_FILES['myfile']['name'];
    $fileSize = $_FILES['myfile']['size'];
    $fileTmpName  = $_FILES['myfile']['tmp_name'];
    $fileType = $_FILES['myfile']['type'];
    $fileExtension = strtolower(end(explode('.',$fileName)));

    $uploadPath = $currentDir . $uploadDirectory . basename($fileName); 

    echo $uploadPath;

    if (isset($fileName)) {

        if (! in_array($fileExtension,$fileExtensions)) {
            $errors[] = "This process does not support this file type. Upload a JPEG or PNG file only.";
        }

        if ($fileSize > 2000000) {
            $errors[] = "You cannot upload this file because its size exceeds the maximum limit of 2 MB.";
        }

        if (empty($errors)) {
            $didUpload = move_uploaded_file($fileTmpName, $uploadPath);

            if ($didUpload) {
                echo "The file " . basename($fileName) . " has been uploaded.";
            } else {
                echo "An error occurred. Try again or contact your system administrator.";
            }
        } else {
            foreach ($errors as $error) {
                echo $error . "These are the errors" . "\n";
            }
        }
    }


?>

Note
Ensure you are running a PHP server, such as this one:

PHP server

Now when you run that PHP app, it looks like this:

run application

In addition, note the following:

  • The PHP script works for image files only.
  • The file-size limit is a file 2 MB.

Upload images to a dedicated file server in addition to the server in which your web app resides. Check out this source code for a related tutorial.

Conclusion

Uploading AJAX files with Cloudinary is a cakewalk. Even though mastering AJAX technologies could be challenging, you can take advantage of them readily with the Cloudinary library for your app. Give it a try: signing up for Cloudinary is free.

About Cloudinary

Cloudinary provides easy-to-use, cloud-based media management solutions for the world’s top brands. With offices in the US, UK and Israel, Cloudinary has quickly become the de facto solution used by developers and marketers at major companies around the world to streamline rich media management and deliver optimal end-user experiences.

For more information, visit www.cloudinary.com or follow us on Twitter


Want to Learn More About File Uploads?

Recent Blog Posts

Create Lightweight Sites With Low-Code and No-Code Technology

Consumers expect modern websites to be mainly visual. But, the more compelling and complex the related media is, the more data is involved, compounding the site’s weight. In today’s content-craving world, delivering unoptimized media can cost you because it leads to sluggish page loads, resulting in visitors abandoning your site in search of a faster alternative. In fact, a page load that takes more than three seconds can cause as many as 40% of your visitors to bounce. Given this competitive, digital-first environment, you can’t afford to lose page views, for time is of the essence.

Read more
A Blueprint for AWS-Secured Webhook Listeners for Cloudinary

tl;dr: An AWS-secured and optimized Cloudinary webhook listener for extending the Cloudinary service

Code: Github

A webhook is a communication medium for sending notifications from one platform to another about events that occurred. In place are user-defined HTTP callbacks that are triggered by specific events. When a triggered event takes place on the source site, the webhook listens to the event, collects the data, and sends it to the URL you specified in the form of an HTTP request.

Read more
New Accessibility Features for Cloudinary’s Product Gallery Widget

Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.

Read more
Why Successful Businesses Engage With and Convert Audiences With Visual Media

Most business buyers prefer to research purchase options online, as do many shoppers. No wonder online retail sales in the U.S. rose by 32.4% in 2020—an impressive gain of $105 billion.

For B2B and B2C businesses, text-heavy websites are no longer adequate in attracting shoppers. Instead, engaging visual media—spin images, videos, 3D models, augmented reality—are becoming a must for conveying eye-catching details and differentiators about products or services.

Read more
Making User-Generated Content (UGC) Shoppable With Cloudinary

User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.

Read more