Cloudinary Blog

Automating File Upload and Sharing

By Prosper Otemuyiwa Aug 25, 2020

As computer users, we constantly upload files, transferring them from one system to another over a network. You can perform uploads on a terminal, such as through the SSH File Transfer Protocol (SFTP) or Secure Copy Protocol (SCP), File Transfer Protocol (FTP) clients, or web browsers. Generally, you upload files to move data to a server, but you can also send files between distributed clients.

This article explains the basics of FTP, peer-to-peer (P2P), and web-browser uploads, as well as Cloudinary’s automated upload capabilities that save time and improve workflows.

What Is a File Upload?

File uploads are cross-system data transfers. You can upload files in one of three ways:

Client-to-server upload, which transfers files according to the client-server mode, such as when you upload an image or video through a form on a website.
Remote upload, which transfers data from one remote system to another under the control of a local system, e.g., from cloud storage to a website, when the connection between the remote systems is faster than that between the local and remote systems. Additionally, you can transfer files between only the remote systems with this technique.
Peer-to-peer (P2P) sharing, which shares files between users through a decentralized network of devices. Here, each device can serve as client and server, enabling both uploads and downloads.

In this article, you will learn:

Traditional File Upload Techniques
Automating File Upload in Popular Programming Languages With Cloudinary
Learn More About Media Management

Traditional File Upload Techniques

This section describes how to upload files in the traditional way.

FTP

FTP, the language for TCP/IP networks, i.e. the Internet, is a secure way of transferring files between devices or servers and between clients and servers.

Typically, you download files from a web server with FTP. For uploads to a server, you need an FTP client, a utility through which to log in to FTP servers so that you can query the server, define transfer modes, and then upload.

Peer to Peer

P2P transfers start with a search for available connected users through a client. After a connection is made, you can download files from those users while they upload to you, or vice versa. In a P2P network, transfers occur across peers (nodes or end-user computers) with no need for distribution servers.

Napster and BitTorrent are well-known examples of P2P networks. Although they do not store file data on a central server, those networks can maintain trackers or index servers to help you locate the file you want. Also, multiple users can simultaneously upload or download the same file, speeding up the rate of transfer and easing the burden on a single user.

Web Browsers

Uploading from a web browser is the most common way for transferring files to a remote server, typically through an HTML form with the upload capabilities defined in JavaScript (JS) in either of these ways:

A jQuery plugin or JS uploader, which offers the upload capability and interface through JS or jQuery libraries. Two plugin examples are Uppy and FilePond.
A file-upload service, which offers a widget you can embed in your page for uploads, which are typically connected to a content delivery network (CDN) for delivery to users later. Cloudinary is an example of an excellent upload service.

Automating File Upload in Popular Programming Languages With Cloudinary

A common request for websites is automated file upload for audiences. Afterwards, the audience can have the uploaded files delivered securely to online storage, displayed, and, if desired, shared with others.

Cloudinary is a cloud-based service through which you can modify, manage, and distribute media; as well as automate file upload in your web apps. It only takes a few lines of code in the popular programming languages, as described below.

PHP

By leveraging the API in the Cloudinary PHP software development kit (SDK), you can upload images, manage and create sprites, embed images, and generate URLs for manipulation or transformation. This SDK supports PHP 5.3 or later.

For details, see the post Uploading PHP Files and Rich Media the Easy Way.

AJAX

To directly upload files with AJAX, create an HTML form, download Cloudinary’s JS library, and then build a JS file that defines your upload configurations.

In the same way, you can upload directly to a back-end server with AJAX along with a PHP script that handles server communications.

For details, see the post AJAX File Upload: Quick Tutorial and Time-Saving Tips.

Android

Preserving quality as files pass between the sender and receiver is a difficult task. However, apps like WhatsApp transfer media files at huge scale with hardly any quality loss. You can do that in your app, too.

For details, see the post Clone WhatsApp Technology to Build a File Upload Android App.

jQuery

With jQuery, you can upload files to the Cloudinary cloud without an intermediary server, delivering faster and bypassing web-host limitations on uploads. Also, Cloudinary’s jQuery plugin’s convenient drag-and-drop interface enables audiences to perform uploads on your site.

For details, see the post Direct Image Uploads From the Browser to the Cloud With jQuery.

Angular

You can upload files through Angular on Cloudinary by building an Angular component or form control with which to pass files to your app’s back-end. No need to expend the time and effort to develop a back-end API.

For details, see the post File Upload With Angular to Cloudinary.

Vue

By integrating with the Cloudinary widget, you can upload files in any Vue project. Just add the openUploadModal function and an Upload button and then integrate the widget in your index.html file. No back-end setup is required.

For details, see the post Uploading Vue Files and Rich Media in Two Easy Steps.

Node.js

You can upload Node.js files to the Cloudinary cloud or to a local server. To do that, download Cloudinary’s Node.js SDK and the streamifier library. Afterwards, set up a Node project and build an upload process that relies on the multer package, which enables multipart uploads..

For details, see the post Node.js File Upload.

Laravel

To upload files to local servers or the cloud through Laravel, use a file-upload controller and upload-form pair and the storeUploads method. To store uploads in the cloud, use Cloudinary’s Laravel SDK and the cloudinary() helper function.

For details, see the post Laravel File Upload to a Local Server Or to the Cloud.

Javascript

Cloudinary offers a JS upload widget whose API you can integrate with your HTML forms for uploads to the cloud. The widget supports uploads from various sources, including remote URLs and Facebook, Dropbox, Google Drive, and Shutterstock accounts.

For details, see the post JavaScript File Upload to Cloudinary.

Do give Cloudinary a try and build file-upload capabilities with the popular programming languages described above. To start, create a free Cloudinary account.

Learn More About Media Management

Cloudinary has authored in-depth guides on several media-management topics, which you might find useful while exploring the world of file upload.

Digital Asset Management (DAM)

Learn about the latest DAM trends and best practices, all of which can help you efficiently and effectively manage media assets.

Image Editing

Explore the various ways and tools for editing images, enhance your media, and automate the related processes.

Image Optimization

Learn the techniques for optimizing and adding cool effects to images while ensuring quality.

Image Formats

Adopt the optimum format for your images because the format can make or break delivery.

Responsive Images

Deliver a positive user experience with responsive images on all devices.

Video Optimization

Optimize your video so that you can efficiently edit their content, add subtitles for multilingual audiences, and create previews.

Lazy Loading

Lazy-load your webpages for optimal performance and fast video streaming.

HTML5 Video Player

Distribute video content with HTML5 players and streamers.

Recent Blog Posts

Legacy and Transition: Creating a New Universal Image Codec

By Jon Sneyers Jan 20, 2021

Transitioning JPEG-Based to JPEG XL-Based Images for Web Platforms

When the JPEG codec was being developed in the late 1980s, no standardized, lossy image-compression formats existed. JPEG became ready at exactly the right time in 1992, when the World Wide Web and digital cameras were about to become a thing. The introduction of HTML’s <img> tag in 1995 ensured the recognition of JPEG as the web format—at least for photographs. During the 1990s, digital cameras replaced analog ones and, given the limited memory capacities of that era, JPEG became the standard format for photography, especially for consumer-grade cameras.

Implement Dynamism in Static Sites With Serverless Functions

By Obinna Ekwuno Jan 18, 2021

Serverless Functions Deliver Dynamism to Static Sites

In this age of most sites being static, a frequently asked question is how much dynamic functionality you can derive from Jamstack. The answer is a lot because you can incorporate reusable APIs in that architecture and leverage serverless, back-end-oriented functions with no back ends in place.

By Jon Sneyers Jan 13, 2021

Progressive Image Decoding Delivers an Enhanced Web Experience

Progressive image decoding is an excellent way in which to accelerate page loads and hence improve the web-browsing experience. This post explains why and elaborates on the recent developments for that approach.

Amplify Your Jamstack With Video

By Alex Patterson Jan 12, 2021

Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

By Juli Greenwood Jan 11, 2021

Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

By Prosper Otemuyiwa Jan 06, 2021

Part 1 of this post defines the capabilities of an enhanced Gravatar service, which I named Clavatar, and describes the following initial steps for building it:

This post, part 2 of the series, explains how to make Clavatar work like Gravatar and to develop Clavatar’s capabilities of enabling requests for various versions of the images related to user accounts.