Home > Mobile >  Upload images to Cloudinary using Laravel
Upload images to Cloudinary using Laravel

Time:12-18

I have a table that shows a list of students, I want to be able to attach the images to each child in the table and then upload them at once to cloudinary.

The challenge i have is that

    <form action="/student/image/upload" method="POST" enctype="multipart/form-data">
                <table  id="customers">

   
                  <thead >
                    <tr>
                      <th>No.</th>
                      <th>Student Surname</th>
                      <th>Student Names</th>
                      <th>Manage</th>
                    </tr>
                    </thead>
                    <tbody>
                     

                            @foreach ($students as $item)
                            <tr>
                            <td>
                              {{$loop->iteration}}
                          
                            </td>
                            <td>{{$item->lastname}}  </td>
                            <td>{{$item->name}} {{$item->middlename}}</td>
                        <td>

                            {{-- <x-cld-upload-button>
                                Upload Files
                            </x-cld-upload-button> --}}
                     
                                @csrf
                            <input id="upload" name="student_image"  placeholder="Choose files" type="file"/> 
                            <input type="hidden" name="student_id" value="{{$item->id}}">
                            <button type="submit"  id="submit">Submit</button>
                       
                        </td>
                    

                            </tr>
                           
                          
                            @endforeach

                    
                    </tbody>
               <tr>
                 <td><button type="submit"  id="submit">Submit</button></td>
               </tr>
                </table>
            </form>

Above is the code. for the PHP

My Laravel controller code is as follows below


    $student_id=$request->student_id;

 
    
   
    if($request->hasFile('student_image')){
            
                
        $image = $request->file('student_image')->storeOnCloudinaryAs('xxxxx', $student_id);
        $student_image=$image->getSecurePath();

        dd($student_image);


        // dd($student_image);

        User::where('id', $student_id)->update([

            'profile_photo_path'=>$student_image,
        ]);

    }else{
      
    }

I want to upload the multiple pictures to cloudinary after clicking submit. But before the uplaod if the image is very large, I want to compress it's size. And also I want to rename the image name to that of the hidden student id.

How can I do that using Cloudinary API

Th

CodePudding user response:

You can use the library for this. Follow their installation guide.

Are required:PHP 7.2 and Composer. You can use it with Laravel9(v2) or Laravel8(v1). Add your Cloudinary API credentials to your .env file.

Note: You need to get these credentials from your Cloudinary Dashboard.

CodePudding user response:

If you want to compress your media assets before upload, use incoming transformations. This feature will allow you to save the original file compressed. If you log into your Cloudinary account and go to your Settings -> Upload tab and scroll down to the Upload Presets section, do you have any default upload preset selected? if so, does that upload preset have any incoming transformations?

Unless you are applying an incoming transformation as part of a default upload preset, then this transformation wouldn't be applied on the Cloudinary level.

If you're not applying a default upload preset, then I would check the input images and perhaps store the images locally before uploading them to Cloudinary and seeing the size of those.

As for naming your assets - the name of the file is called public id in Cloudinary and you can set it to any value you like, read more about it here.

  • Related