Visualforce Image Uploader

In this post, I am going to explain how to implement visualforce page image uploader which looks similar to the Salesforce standard file upload features.

The final look of the Visualforce page looks as shown below. After uploading the image it will be added to the contact Attachments section. It is going to allow the only certain type of image types.

 

Understanding Controller.

The controller is having the two variables names imagesTypes, notAllowedTypes which are used to support the Images types that are allowed to upload, restrict as shown below.

 

The below logic is used to performs the upload logic

 

How to validate the image types?

below piece of logic is used to validate allowed image types that are uploaded.

 

Understanding Visauflorce Page logic.

Most important logic in the visualforce page is validating the image name length. the following javascript logic validates
the Image name length on upload Command Button Click.

 

The above logic is invoked from the Upload button to throw an error for length more than 70.

 

Complete URL for the GitHub source code

https://github.com/rajamohanvakati/FileUpload