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
Form fields - Drag and Drop Zone
Form fields - Drag and Drop Zone

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' => '20480', //KB (20Mb, it will be resized to a maximum of 2500px before sending to the server)
  '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

 

$imgCol = 'img_url';
$imgthumbCol = 'thumb_url';
$imgPath = '/images/folder/';
$fileName = toURL(fileName($db_items->result(0,'title_'.mainLANG)));
$defaultFileName = 'pageImg';

if($db_items->result(0,$imgCol) == '' || $db_items->result(0,$imgCol) == null){
   $overwrite = 'false';
   $load = 'false';
   if($fileName == ''){
      $fileName = $defaultFileName ;
   }
}else{
   $overwrite = 'true';
   $load = 'true';
   $fileName = fileName($db_items->result(0,$imgCol));
}

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

 

 

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

Basic Variables

//Drag and Drop
//option type "S" variables (single upload)
$upload_target = '/images/imagesFolder'; //From root
$nameFromCol = 'title_'.mainLANG;  // This will be used as the file name if there is no existing file 
$newFileName = 'image_section_name'; //use this if there is no $nameFromCol assigned or the value is empty
$add_thumbs = 'true'; //Boolean

//option type "S" and "I" variables (single upload and Image Preview)
$image_field = 'img_url';
$thumb_field = 'thumb_url'; // or empty if $add_thumbs = 'false'

 

 

Full Variables (Defaults)

//Drag and Drop
//option type "S" variables (single upload)
$upload_action = "image";
$upload_target = '/images'; //From root
$newFileName = 'image'; //use this if there is no $nameFromCol assigned 
$nameFromCol = 'title_'.mainLANG;  // This will be used as the file name if there is no existing file 
$overwrite = 'true';
$extensions = 'jpg,png,gif,svg';
$max_file_size = '20480'; //KB (20Mb, it will be resized to a maximum of 2500px before sending to the server)
$max_width = 0; //PX
$max_height = 0; //PX
$fix_width = 1920;//PX
$fix_height = 0; //PX
$add_thumbs = 'false'; //Boolean
$thumbs_folder = $upload_target."/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

Get a Quote

Get a Quote