Laravel 5 Cloudinary Upload File And Images With Example

Laravel 5 cloudinary upload file and images with example

In this post we will give you information about Laravel 5 cloudinary upload file and images with example. Hear we will give you detail about Laravel 5 cloudinary upload file and images with exampleAnd how to use it also give you demo for it if it is necessary.

Laravel 5 cloudinary upload file and images with example

In this tutorial, I will let you know how to upload files and images on cloudinary server.

Cloudinary provide best service for image and video manipulation on the fly. There is open source PHP library provided by Cloudinary.

There are lots of benefits to store your media files, images and videos on the Cloudinary that is cloud based service.

Main Features

Cloudinary deliver the responsive images.

Easily optimize the images.

Media files will be delivered through a fast CDN.

Easily integrate with the web and mobile application.

There is cool feature of cropping images on the fly.

In this example, we will upload the images on cloudinary using jrm2k6/cloudder package.

Install jrm2k6/cloudder

First, I will install jrm2k6/cloudder package using composer.

composer require jrm2k6/cloudder:0.4.*

Now add the following line with cloudinary information in your .env file.

CLOUDINARY_API_KEY='your key'
CLOUDINARY_API_SECRET='your secret'
CLOUDINARY_CLOUD_NAME='your cloud name'

You will get the cloudinary information from Cloudinary.

Now open config/app.php file and add following service provider and aliases in respective array :

'providers' => array(
  'JDCloudderCloudderServiceProvider'
);

'aliases' => array(
  'Cloudder' => 'JDCloudderFacadesCloudder'
);

Run following command to publish :

php artisan vendor:publish --provider="JDCloudderCloudderServiceProvider"

After running above command, you will get cloudder configuration file in following path config/cloudder.php

There you can change the following settings :

CLOUDINARY_BASE_URL
CLOUDINARY_SECURE_URL
CLOUDINARY_API_BASE_URL

Add Routes

In this step, add following routes in your routes/web.php file.

Route::get('get-file', 'CloudderController@getFile');
Route::post('upload-file', ['as'=>'upload-file','uses'=>'CloudderController@uploadFile']);

Create CloudderController

Now create “CloudderController” in following path app/Http/Controllers to handle the request.

<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
class CloudderController extends Controller
{
    public functiongetFile(){        
        returnview('cloudder');
    }
    public functionuploadFile(Request $request){
          if($request->hasFile('image_file')){
Cloudder::upload($request->file('image_file'));
$c=Cloudder::getResult();
if($c){
returnback()
                    ->with('success','You have successfully upload images.')
                    ->with('image',$c['url']);
}
}
    }
}

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

class CloudderController extends Controller
{
	public function getFile(){		
		return view('cloudder');
	}

	public function uploadFile(Request $request){
	  	if($request->hasFile('image_file')){  
            Cloudder::upload($request->file('image_file'));
            $c=Cloudder::getResult();             
            if($c){
               return back()
		            ->with('success','You have successfully upload images.')
		            ->with('image',$c['url']);
            }

            
        }
	}

}

Create Blade File

Finally create a “cloudder.blade.php” file to render HTML form to upload files.

<!DOCTYPEhtml>
<html>
<head>
    <title>Laravel 5 cloudinary upload file and images with example</title>
<linkrel="stylesheet"type="text/css"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
 @if ($message = Session::get('success'))
<divclass="alert alert-success alert-block">
<buttontype="button"class="close"data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
<imgsrc="{{ Session::get('image') }}">
@endif
{!! Form::open(array('route' => 'upload-file','files'=>true)) !!}
<divclass="row">
<divclass="col-md-6">
                    {!! Form::file('image_file', array('class' => 'form-control')) !!}
</div>
<divclass="col-md-6">
<buttontype="submit"class="btn btn-success">Upload</button>
</div>
</div>
{!! Form::close() !!}
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Laravel 5 cloudinary upload file and images with example</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
</head>
<body>
 @if ($message = Session::get('success'))
    <div >
        <button type="button"  data-dismiss="alert">×</button>
            <strong>{{ $message }}</strong>
    </div>
    <img src="{{ Session::get('image') }}">
@endif
{!! Form::open(array('route' => 'upload-file','files'=>true)) !!}
            <div >
                <div >
                    {!! Form::file('image_file', array('class' => 'form-control')) !!}
                </div>
                <div >
                    <button type="submit" >Upload</button>
                </div>
            </div>
{!! Form::close() !!}

</body>
</html>

$c=Cloudder::getResult(); will return following output :

array:15 [▼
  "public_id" => "sample"
  "version" => 1499596361
  "width" => 864
  "height" => 576
  "format" => "jpg"
  "resource_type" => "image"
  "created_at" => "2017-07-09T10:32:41Z"
  "tags" => []
  "bytes" => 120253
  "type" => "upload"
  "etag" => "14500e08ec2701bfd36a8e9a5585261e"
  "url" => "http://res.cloudinary.com/demo/image/upload/v1499589454/sample.jpg"
  "secure_url" => "http://res.cloudinary.com/demo/image/upload/v1499589454/sample.jpg"
  "original_filename" => "sample"
]

You can save required details into your database. You can use public id to destroy images in following way :

Cloudder::destroyImage($publicId, array $options)
Cloudder::delete($publicId, array $options)

Laravel 5.3 Upload Image with Validation example

Label :

PHP

Laravel PHP Framework

File

How To

API

MVC

Web Development

Cloudinary

Hope this code and post will helped you for implement Laravel 5 cloudinary upload file and images with example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

See also Node.js 10 Tutorial and Examples (Node.js 10)

Laravel 5 cloudinary upload file and images with example

Laravel 5 cloudinary upload file and images with example

Label :

Leave a Comment Cancel Reply