{"id":22133,"date":"2020-08-05T17:43:09","date_gmt":"2020-08-05T17:43:09","guid":{"rendered":"http:\/\/laravel_file_upload_to_a_local_server_or_to_the_cloud"},"modified":"2024-06-04T15:56:57","modified_gmt":"2024-06-04T22:56:57","slug":"laravel_file_upload_to_a_local_server_or_to_the_cloud","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/laravel_file_upload_to_a_local_server_or_to_the_cloud","title":{"rendered":"Laravel File Upload to a Local Server Or to the Cloud"},"content":{"rendered":"

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.<\/p>\n

\n

Introducing Cloudinary\u2019s Laravel SDK<\/a>. Learn the benefits and capabilities of the Laravel PHP framework and the way to upload to and transform files.<\/p>\n

\n

The sections below walk you through the process of setting up Laravel file uploads<\/a>.<\/p>\n

Set Up a Laravel Project<\/h2>\n
    \n
  1. \n

    Install Composer<\/a> and PHP<\/a> on your development or production machine and then run this command:<\/p>\n

    composer create-project --prefer-dist laravel\/laravel upload\n<\/code><\/span><\/pre>\n<\/li>\n
  2. \n
    Go to the upload<\/code> directory and rename the env.example<\/code> file to .env<\/code>.<\/p>\n<\/li>\n
  3. \n
    Run the project with the command php artisan serve<\/code>.<\/p>\n<\/li>\n<\/ol>\n
    Your Laravel project is now up and running.<\/p>\n
    Set Up the Mechanics for File Uploads<\/h2>\n
      \n
    1. \n
      Create a file-upload controller (FileUpload Controller<\/code>) in your project:<\/p>\n
      php<\/span> artisan<\/span> make<\/span>:controller<\/span> FileUploadController<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n<\/li>\n
    2. \n
      Open the FileUploadController.php file and add a method for displaying the upload form:<\/p>\n
      <?php<\/span>\nnamespace<\/span> App<\/span>\\Http<\/span>\\Controllers<\/span>;\nuse<\/span> Illuminate<\/span>\\Http<\/span>\\Request<\/span>;\n\nclass<\/span> FileUploadController<\/span> extends<\/span> Controller<\/span>\n<\/span>{\n    public<\/span> function<\/span> showUploadForm<\/span>()<\/span>\n    <\/span>{\n        return<\/span> view('upload'<\/span>);\n    }\n}\n<\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n<\/li>\n
    3. \n
      Create an upload.blade.php<\/code> file in the resources\/views<\/code> directory and populate the file with the code below:<\/p>\n
      <!DOCTYPE html<\/span>><\/span>\n<html<\/span>><\/span>\n    <head<\/span>><\/span>\n        <meta<\/span> charset<\/span>=\"utf-8\"<\/span>><\/span>\n        <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1\"<\/span>><\/span>\n\n        <title<\/span>><\/span>Laravel File Upload<\/title<\/span>><\/span>\n\n        <!-- Fonts --><\/span>\n        <link<\/span> href<\/span>=\"https:\/\/fonts.googleapis.com\/css?family=Nunito:200,600\"<\/span> rel<\/span>=\"stylesheet\"<\/span>><\/span>\n\n        <!-- Styles --><\/span>\n        <style<\/span>><\/span>\n            html<\/span>, body<\/span> {\n                background-color<\/span>: #fff<\/span>;\n                color<\/span>: #636b6f<\/span>;\n                font-family<\/span>: 'Nunito'<\/span>, sans-serif;\n                font-weight<\/span>: 200<\/span>;\n                height<\/span>: 100vh<\/span>;\n                margin<\/span>: 0<\/span>;\n            }\n\n            .full-height<\/span> {\n                height<\/span>: 100vh<\/span>;\n            }\n\n            .flex-center<\/span> {\n                align-items<\/span>: center;\n                display<\/span>: flex;\n                justify-content<\/span>: center;\n            }\n\n            .position-ref<\/span> {\n                position<\/span>: relative;\n            }\n\n            .top-right<\/span> {\n                position<\/span>: absolute;\n                right<\/span>: 10px<\/span>;\n                top<\/span>: 18px<\/span>;\n            }\n\n            .content<\/span> {\n                text-align<\/span>: center;\n            }\n\n            .title<\/span> {\n                font-size<\/span>: 84px<\/span>;\n            }\n\n            .links<\/span> > a<\/span> {\n                color<\/span>: #636b6f<\/span>;\n                padding<\/span>: 0<\/span> 25px<\/span>;\n                font-size<\/span>: 13px<\/span>;\n                font-weight<\/span>: 600<\/span>;\n                letter-spacing<\/span>: .1rem<\/span>;\n                text-decoration<\/span>: none;\n                text-transform<\/span>: uppercase;\n            }\n\n            .m-b-md<\/span> {\n                margin-bottom<\/span>: 30px<\/span>;\n            }\n        <\/span><\/style<\/span>><\/span>\n    <\/head<\/span>><\/span>\n    <body<\/span>><\/span>\n        <div<\/span> class<\/span>=\"flex-center position-ref full-height\"<\/span>><\/span>\n            <div<\/span> class<\/span>=\"content\"<\/span>><\/span>\n                <div<\/span> class<\/span>=\"title m-b-md\"<\/span>><\/span>\n                    Laravel File Upload\n                <\/div<\/span>><\/span>\n\n                @if ($message = Session::get('success'))\n                    <div<\/span> class<\/span>=\"alert alert-success alert-block\"<\/span>><\/span>\n                        <button<\/span> type<\/span>=\"button\"<\/span> class<\/span>=\"close\"<\/span> data-dismiss<\/span>=\"alert\"<\/span>><\/span>\u00d7<\/button<\/span>><\/span>\n                            <strong<\/span>><\/span>{{ $message }}<\/strong<\/span>><\/span>\n                    <\/div<\/span>><\/span>\n                @endif\n\n                <div<\/span> class<\/span>=\"links\"<\/span>><\/span>\n                    <form<\/span> action<\/span>=\"\/upload\"<\/span> method<\/span>=\"POST\"<\/span> enctype<\/span>=\"multipart\/form-data\"<\/span>><\/span>\n                        @csrf\n                        <div<\/span> class<\/span>=\"row\"<\/span>><\/span>\n\n                            <div<\/span> class<\/span>=\"col-md-6\"<\/span>><\/span>\n                                <input<\/span> type<\/span>=\"file\"<\/span> name<\/span>=\"file\"<\/span> class<\/span>=\"form-control\"<\/span>><\/span>\n                            <\/div<\/span>><\/span>\n\n                            <div<\/span> class<\/span>=\"col-md-6\"<\/span>><\/span>\n                                <button<\/span> type<\/span>=\"submit\"<\/span> class<\/span>=\"btn btn-success\"<\/span>><\/span>Upload a File<\/button<\/span>><\/span>\n                            <\/div<\/span>><\/span>\n\n                        <\/div<\/span>><\/span>\n                    <\/form<\/span>><\/span>\n                <\/div<\/span>><\/span>\n            <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n    <\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
      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<\/code> route in the routes\/web.php<\/code> file. Note:<\/strong> The related code will be shown later in this post.<\/p>\n<\/li>\n
    4. \n
      Go to the routes\/web.php<\/code> directory and add two routes: one to display the form and the other to process the file upload:<\/p>\n
      Route::get('\/upload'<\/span>, 'FileUploadController@showUploadForm'<\/span>);\nRoute::post('\/upload'<\/span>, 'FileUploadController@storeUploads'<\/span>);\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n<\/li>\n<\/ol>\n
      Now reload the app and go to the \/upload<\/code> route. This page is displayed:<\/p>\n
      \"laravel<\/p>\n
      Process the Uploads<\/h2>\n
      Next, ensure that uploaded files are stored though the form by adding a storeUploads<\/code> method to the FileUploadController.php<\/code> file, as follows:<\/p>\n
      \u2026.\npublic<\/span> function<\/span> storeUploads<\/span>(Request $request)<\/span>\n    <\/span>{\n        $request->file('file'<\/span>)->store('images'<\/span>);\n\n        return<\/span> back()\n            ->with('success'<\/span>, 'File uploaded successfully'<\/span>);\n    }\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
      The code above grabs the file uploaded through the POST request, creates on your local service an images<\/code> directory, and stores the file there.<\/p>\n
      Test it: upload a file for your app and see if the file is in the storage\/app\/images<\/code> directory.<\/p>\n
      Note:<\/strong> For more details on a recently uploaded file, call these methods:<\/p>\n
       $fileName = $request->file('file'<\/span>)->getClientOriginalName();\n $extension = $request->file('file'<\/span>)->extension();\n $mime = $request->file('file'<\/span>)->getMimeType();\n $clientSize = $request->file('file'<\/span>)->getSize();\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
      Set Up File Uploads to Cloudinary<\/h2>\n
      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.<\/p>\n
      To enable file uploads to Cloudinary:<\/p>\n
        \n
      1. \n
        Sign up<\/a> for a free Cloudinary account, log in, and note your cloud name and API keys from the dashboard.<\/p>\n
        \"media<\/p>\n<\/li>\n
      2. \n
        Install Cloudinary\u2019s Laravel SDK<\/a>:<\/p>\n
        composer require cloudinary-labs\/cloudinary-laravel\n<\/code><\/pre>\n
        Note:<\/strong> Please follow the instructions in the #Installation section. Ensure you publish the config file and add your credentials to the .env<\/code> file of your app.<\/p>\n<\/li>\n
      3. \n
        Rewrite the file-upload controller (FileUploadController.php<\/code>) for straight uploads to the cloud:<\/p>\n
        <?php<\/span>\nnamespace<\/span> App<\/span>\\Http<\/span>\\Controllers<\/span>;\nuse<\/span> Illuminate<\/span>\\Http<\/span>\\Request<\/span>;\n\nclass<\/span> FileUploadController<\/span> extends<\/span> Controller<\/span>\n<\/span>{\n    public<\/span> function<\/span> showUploadForm<\/span>()<\/span>\n    <\/span>{\n        return<\/span> view('upload'<\/span>);\n    }\n\n    public<\/span> function<\/span> storeUploads<\/span>(Request $request)<\/span>\n    <\/span>{\n        $response = cloudinary()->upload($request->file('file'<\/span>)->getRealPath())->getSecurePath();\n\n        dd($response);\n\n        return<\/span> back()\n            ->with('success'<\/span>, 'File uploaded successfully'<\/span>);\n    }\n}\n<\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n<\/li>\n<\/ol>\n
        The code above uploads the file straight to your Cloudinary account and returns the image URL by utilizing the cloudinary()<\/code> helper function. We didn\u2019t have to use the Cloudinary<\/code> Facade.<\/p>\n
        Note:<\/strong> Be sure to replace <your-cloud-name><\/code>, <your-api-keys><\/code>, and <your-api-secret><\/code> 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)<\/code> then dumps the response returned from Cloudinary for the uploaded file. Here\u2019s an example of a response:<\/p>\n
        You can now store the returned URL in the database, and display the image to users anywhere in your app.<\/p>\n
        Leverage More Cloudinary Capabilities<\/h2>\n
        Uploading files barely scratches the surface of media management. Cloudinary helps you administer the entire spectrum of your media\u2019s lifecycle, end to end, from upload and transformation to optimization and delivery. Do check it out<\/a>.<\/p>\n
        Want to Learn More About File Uploads?<\/h2>\n