Upload - Drag & Drop Zone - option type S

In order for to use the Drag & Drop field the option type (S) is required.

The Drop Zone has 3 parameters, '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 parameters 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',
  'needToConfirm'=> 'true',
  'id' => 'dropId' //optional, the default is the column name
  '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',
  'roundCorner' => 20, //px size of the border radius (optional), default null
  'value' => '/path/filename.jpg'  //value IS ONLY used when replacing a file without making changes or queries to the database (like favicons), load must === 'false'
);

To know the original file name of the most recent uploaded File, you can check a hidden input 'lastDroppedFile', and to detect when a File has been dropped, simply check the jquery 'change' trigger of the hidden input with the db col name

 

$('input[name="img_url​"]').change(function(){
     fileName = $('#lastDroppedFile').val();
});

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';
$thumbCol = 'thumb_url';
$imgthumbCol = 'thumb_url';
$imgPath = '/images/folder/'.$idvalue;
$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' => $imgPath,
  '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';
$needToConfirm' = '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';