Upload profile image in php

Handle user profile image using Froala And PHP - Tutorial

In this tutorial, we will learn how to use Froala image uploader tool to upload and remove the images from a PHP server.

• Step 1: Complete The Form HTML Code
• Froala Initialization Code Explanation
• Step 2: Download The Froala PHP SDK
• Step 3: Upload And Store Images From Your Device To The Server
• Display The Uploaded Image Instead Of The Placeholder Image When A Page Is Refreshed
• Step 4: Upload Images From URL To The Server
• Step 5: Setup Image Manager
• Step 6: Delete Images
  • 6.1: Delete Images From Image Popup Menu
  • 6.2: Delete Image from The ImageManager
• Step 7: Image Validation
  • 7.1: Image Validation On The Client-side
  • 7.2: Image Validation On The Server-side
• Download The Full Code
• Step 8: Handling Errors While Uploading Images
• Step 9: Resize Images
  • 9.1: Resize Images On The Client-side
  • 9.2: Resize Images On The Server-side
• Step 10: Upload Images To S3
• Step 11: Add A Reach Text Editor To Your Form

Get Started

Following the get started guide, you should now have created an index.php file with the following code:

   
      
      
      
      
      Froala used as image input
      
      
      
      
      
   
   
   
   
      Upload Photo
      
         
         Click on the above image to edit or replace
      
   
   
   
    
   
   
      const editor = new FroalaEditor[ '#logo',{
      pluginsEnabled: ['image', 'imageManager'],
      //image popup buttons
      imageEditButtons: ['imageReplace', 'imageRemove'],         
       //Buttons for the popup menu which appears on imageReplace button click
      imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
        }
        }];
       
   
   

Step 1: Complete The Form HTML Code

In the code above we have added the image element only. To turn this into a profile form example, let's add a first name, last name, and gender input fields. And let's add the Bootstrap stylesheet to style the form elements.

The folders structure

And the index.php code is

   
      
      
      
      Froala used as image input
      
      
      
      
      
   
   
      Update Your Profile
      
      
      
         
            Upload Photo
            
               
                  
                  Click on the above image to edit or replace
               
         
         
         First Name
         
         
         
            Last Name
            
         
         
            
               Gender