Cloudinary Blog

Laravel File Upload to a Local Server Or to the Cloud

By
Laravel File Upload to a Local Server Or to the Cloud

Currently, Laravel is the most renowned PHP framework, boasting of a large developer community; several open-source packages, such as Cashier, Sanctum, Scout, and Telescope; and a host of paid platforms, e.g., Laravel Forge, Envoyer, and Vapor. Laravel Forge & Envoyer ably supports deployment and use of Laravel production-based apps.

Introducing Cloudinary’s Laravel SDK. Learn the benefits and capabilities of the Laravel PHP framework and the way to upload to and transform files.

The sections below walk you through the process of setting up Laravel file uploads.

Set Up a Laravel Project

  1. Install Composer and PHP on your development or production machine and then run this command:

    Copy to clipboard
    composer create-project --prefer-dist laravel/laravel upload

  2. Go to the upload directory and rename the env.example file to .env.

  3. Run the project with the command php artisan serve.

Your Laravel project is now up and running.

Set Up the Mechanics for File Uploads

  1. Create a file-upload controller (FileUpload Controller) in your project:

    Copy to clipboard
    php artisan make:controller FileUploadController

  2. Open the FileUploadController.php file and add a method for displaying the upload form:

    Copy to clipboard
    <?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class FileUploadController extends Controller
{
    public function showUploadForm()
    {
        return view('upload');
    }
}

  3. Create an upload.blade.php file in the resources/views directory and populate the file with the code below:

    Copy to clipboard
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel File Upload</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

    <!-- Styles -->
    <style>
        html, body {
            background-color: #fff;
            color: #636b6f;
            font-family: 'Nunito', sans-serif;
            font-weight: 200;
            height: 100vh;
            margin: 0;
        }

        .full-height {
            height: 100vh;
        }

        .flex-center {
            align-items: center;
            display: flex;
            justify-content: center;
        }

        .position-ref {
            position: relative;
        }

        .top-right {
            position: absolute;
            right: 10px;
            top: 18px;
        }

        .content {
            text-align: center;
        }

        .title {
            font-size: 84px;
        }

        .links > a {
            color: #636b6f;
            padding: 0 25px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .1rem;
            text-decoration: none;
            text-transform: uppercase;
        }

        .m-b-md {
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <div class="flex-center position-ref full-height">
        <div class="content">
            <div class="title m-b-md">
                Laravel File Upload
            </div>

            @if ($message = Session::get('success'))
                <div class="alert alert-success alert-block">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>{{ $message }}</strong>
                </div>
            @endif

            <div class="links">
                 <form action="/upload" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">

                        <div class="col-md-6">
                            <input type="file" name="file" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <button type="submit" class="btn btn-success">Upload a File</button>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

    The code above displays the form along with a confirmation message if the upload succeeded. Concurrently, the file-upload controller posts the form data to a /upload route in the routes/web.php file. Note: The related code will be shown later in this post.

  4. Go to the routes/web.php directory and add two routes: one to display the form and the other to process the file upload:

    Copy to clipboard
    Route::get('/upload', 'FileUploadController@showUploadForm');
Route::post('/upload', 'FileUploadController@storeUploads');

Now reload the app and go to the /upload route. This page is displayed:

laravel file upload

Process the Uploads

Next, ensure that uploaded files are stored though the form by adding a storeUploads method to the FileUploadController.php file, as follows:

Copy to clipboard
….
public function storeUploads(Request $request)
    {
        $request->file('file')->store('images');

        return back()
            ->with('success', 'File uploaded successfully');
    }

The code above grabs the file uploaded through the POST request, creates on your local service an images directory, and stores the file there.

Test it: upload a file for your app and see if the file is in the storage/app/images directory.

Note: For more details on a recently uploaded file, call these methods:

Copy to clipboard
 $fileName = $request->file('file')->getClientOriginalName();
 $extension = $request->file('file')->extension();
 $mime = $request->file('file')->getMimeType();
 $clientSize = $request->file('file')->getSize();

Set Up File Uploads to Cloudinary

Uploading files to the local disk and serving them yourself is rife with limitations, a major one being the lack of scalability. Best to outsource to an external service like Cloudinary, which, besides upload and storage capabilities, offers features for manipulating and managing media, including images, videos, audio, and other emerging types.

To enable file uploads to Cloudinary:

  1. Sign up for a free Cloudinary account, log in, and note your cloud name and API keys from the dashboard.

    media library

  2. Install Cloudinary’s Laravel SDK:

    Copy to clipboard
    composer require cloudinary-labs/cloudinary-laravel

    Note: Please follow the instructions in the #Installation section. Ensure you publish the config file and add your credentials to the .env file of your app.

  3. Rewrite the file-upload controller (FileUploadController.php) for straight uploads to the cloud:

    Copy to clipboard
    <?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class FileUploadController extends Controller
{
    public function showUploadForm()
    {
        return view('upload');
    }

    public function storeUploads(Request $request)
    {
        $response = cloudinary()->upload($request->file('file')->getRealPath())->getSecurePath();

        dd($response);

        return back()
            ->with('success', 'File uploaded successfully');
    }
}

    The code above uploads the file straight to your Cloudinary account and returns the image URL by utilizing the cloudinary() helper function. We didn’t have to use the Cloudinary Facade.

Note: Be sure to replace <your-cloud-name>, <your-api-keys>, and <your-api-secret> with their values from your dashboard. Furthermore, for security while in production environments, always load those credentials from the environment variables. That is, invoke the config method to load the credentials before uploading the file to Cloudinary. dd($response) then dumps the response returned from Cloudinary for the uploaded file. Here’s an example of a response:

You can now store the returned URL in the database, and display the image to users anywhere in your app.

Leverage More Cloudinary Capabilities

Uploading files barely scratches the surface of media management. Cloudinary helps you administer the entire spectrum of your media’s lifecycle, end to end, from upload and transformation to optimization and delivery. Do check it out.

Want to Learn More About File Uploads?

Recent Blog Posts

Our $2B Valuation

By
Blackstone Growth Invests in Cloudinary

When we started our journey in 2012, we were looking to improve our lives as developers by making it easier for us to handle the arduous tasks of handling images and videos in our code. That initial line of developer code has evolved into a full suite of media experience solutions driven by a mission that gradually revealed itself over the course of the past 10 years: help companies unleash the full potential of their media to create the most engaging visual experiences.

Read more

Compelling Visual Experiences Are Imperative for DTC E-Commerce

By Pradip Lal
Direct-to-Consumer E-Commerce Requires Compelling Visual Experiences

When brands like you adopt a direct–to-consumer (DTC) e-commerce approach with no involvement of retailers or marketplaces, you gain direct and timely insight into evolving shopping behaviors. Accordingly, you can accommodate shoppers’ preferences by continually adjusting your product offering and interspersing the shopping journey with moments of excitement and intrigue. Opportunities abound for you to cultivate engaging customer relationships.

Read more

Automatically Translating Videos for International Outreach

By
Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more

Minted Delivers High-quality Art at Scale with Cloudinary

By
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

Shoppers return time and again to Minted’s global online community of independent artists and designers because they know they can count on unique, statement-making products of the highest quality there. Concurrently, the visual imagery on Minted.com must do justice to the designs into which the creators have poured their hearts and souls. For Minted’s VP of Engineering David Lien, “Because we are a premium brand, we need to ensure that every single one of our product images matches the selected configuration exactly. For example, if you pick an 18x24 art print on blue canvas, we will show that exact combination on the hero images in the PDF.”

Read more

ImageCon 2021 by the Numbers: Fun Facts and Event Highlights

By
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more