By: Multimedia XP
2020-03-24


KAS Documentation / KAS Form Views /

Form fields - Drag and Drop Zone

By: Multimedia XP
2020-03-24

Form fields - Drag and Drop Zone
This version overwrites any older version, if you need to fix an older version simply replace for this one

The Drop Zone has 3 paramters, 'DropZone', the Label to show in the form and an array with parameters.

 

addField('DropZone','Label',$upload_params);

 

By default, KAS is pre-configured to upload images, therefore the minimum required parameters are the following, for add sections (ex. Add Article), you must have the parameter load = 'false' (string) or Drop Zone will try to fetch the value from the database.

 

$upload_params = array(
  'folder' => '/images',
  'col' => 'img_url',
  'file_name'=> 'aboutImage',
  'thumb_col' => 'thumb_url'
);

 

 

The previous example will overwrite the image saved, create a thumbnail, show a preview, give the delete option, and set a max_file_size of 20MB, a default with of 1920px and a thumb with of 400px

Drop Zone is very customizable and all the paramteres available are the following,

*load adds the value of the database to the value of the fields,

*all booleans need to be written as strings:

$upload_params = array(
  'load' => 'true', //or false if first time upload (add)
  'overwrite' => 'true',
  'preview' => 'true',
  'delete_op' => 'true',
  'action' => 'image', //or file (PDF, CSV, etc)
  'extensions'=> 'jpg,png,gif',
  'mimes' => 'image/jpeg,image/png,image/gif',
  'folder' => '/images',
  'col' => 'img_url',
  'thumb' => 'true',
  'thumb_col' => 'thumb_url',
  'file_name'=> 'aboutImage',
  'max_size' => '20',
  'img_width' => '1920',
  'thumb_width'=> '400'
);

 

 

When we are adding an image for the first time, it is good practice to add the title of the section/page/content where the image belongs, there fore is recommended not adding images on ADD but on EDIT, for such task, if it is the first time we are adding the image we take the title and say overwrite false, as well as load false, if the image was already added then we set the previous values to true and load the image path from the database

 

if($db_items->result(0,'img_url') == '' || $db_items->result(0,'img_url') == null){
   $overwrite = 'false';
   $load = 'false';
   $fileName = toURL(fileName($db_items->result(0,'title_'.$sitelangs->result(0,'lang'))));
   if($db_items->result(0,'title_'.$sitelangs->result(0,'lang')) == ''){
      $fileName = 'sectionImg';
   }
}else{
   $overwrite = 'true';
   $load = 'true';
   $fileName = fileName($db_items->result(0,'img_url'));
}

$upload_params = array(
  'folder' => '/images/foldername/'.$idvalue,
  'col' => 'img_url',
  'file_name'=> $fileName,
  'thumb_col' => 'thumb_url',
  'load' => $load,
  'overwrite' => $overwrite
);

 

 

For View sections you need to assign the option type S and add the following variables:

 

//Drag and Drop
//option type "S" variables (single upload)
$upload_action = "image";
$upload_target = '/images/services'; //From root
$newFileName = 'service_image'; //use this if there is no $nameFromCol assigned 
$nameFromCol = 'title_en';  /* This will be used as the file name if there is no existing file */
$overwrite = 'true';
$extensions = 'jpg,png,gif,svg';
$max_file_size = '10240'; //KB
$max_width = 0; //PX
$max_height = 0; //PX
$fix_width = 1920;//PX
$fix_height = 0; //PX
$add_thumbs = 'true'; //Boolean
$thumbs_folder = '/images/services/thumbs'; //from root
$thumb_scale = 0; //percentage
$thumb_width = 400; //PX
$thumb_height = 0; //PX
$allowed_files = "image/jpeg,image/png,image/gif,image/svg+xml"; //mime types
//option type "S" and "I" variables (single upload and Image Preview)
$image_field = 'img_url';
$thumb_field = 'thumb_url';

Comments