Enabling server-side image upload

Modified on Mon, 19 Dec 2022 at 03:42 PM

Since V4 the plugin comes with a server-side image uploader written in PHP. You can enable the server-side image uploader easily via the customImageAjaxSettings option the plugin options. This option is an object containing all necessary settings data which is used in $.ajax(). 

  • url: The URL to the server-side script which creates the image on the server or just responses with data URL (image representation string)
  • data: An object containing following values 
    • saveOnServer: Set to 1 to create an image on your server. If set to 0, it just response with the data URL
    • uploadsDir: If saveOnServer is 1, define the path to uploads directory
    • uploadsDirURL: If saveOnServer is 1, define the URL uploads directory


var opts = {customImageAjaxSettings: {
	url: 'src/php/custom-image-handler.php',
	data: {
        saveOnServer: 1,
		uploadsDir: '/path/uploads',
		uploadsDirURL: 'http://yourdomain.com/uploads'

new FancyProductDesigner($('#fpd'), opts);


Using a different server-side language than PHP

If you want to use a different server-side language than PHP, you have to create custom-image-handler.php in your desired server-side language. Update the url in customImageAjaxSettings to this self-created script. Your script has to response with a JSON containing image_src value. I recommend to check out the custom-image-handler.php.