We support a template component nameRequires: phpFox version >= 4.6.0
core.upload-form
to drag & drop file when upload, this article will show you how to use it.
We will use the To Do List app as the example for this tutorial.
First, below script will help to render the form component (views/controller/add.html.php):
{if !empty($aForms.current_image) && !empty($aForms.task_id)} {module name='core.upload-form' type='todo' current_photo=$aForms.current_image id=$aForms.task_id} {else} {module name='core.upload-form' type='todo'} {/if}
Parameters:
- type: your app id, it will be use to call callback function getUploadParams, we will explain this function later.
- current_photo: full path of current photo of editing item.
- id: editing item id
Next, Add a function name getUploadParams
in Callback service:
<?php public function getUploadParams() { return array( 'max_size' => null, 'type_list' => ['jpg', 'jpeg', 'gif', 'png'], 'upload_dir' => Phpfox::getParam('core.dir_pic') . 'todo' . PHPFOX_DS, 'upload_path' => Phpfox::getParam('core.url_pic') . 'todo/' , 'thumbnail_sizes' => array(50, 240, 500), 'label' => _p('display_photo'), ); } ?>
These are all properties you can set in this function:
Param Name |
Type |
Description |
Default Value |
Callback Required |
---|---|---|---|---|
max_size |
Number |
Max upload file size in kb, set |
NULL |
No |
max_file |
Number |
Max files you can upload each time using upload form |
1 |
Yes |
type_list |
Array |
List file extensions are allowed to upload |
N/A |
No |
type_list_string |
String |
String contain list file type is allowed to upload |
image/jpeg,image/png,image/gif |
No |
upload_dir |
String |
Directory storage uploaded files on your site |
N/A |
Yes |
upload_path |
String |
Full path to storage location |
N/A |
Yes |
thumbnail_sizes |
Array |
Use when upload image, list thumbnail size you want to crop from original image |
array() |
No |
label |
String |
Upload field's label in your form |
_p('photo') |
No |
upload_now |
String |
Set |
"true" |
Yes |
submit_button |
String |
Element Id of submit upload button, it is required when you set |
N/A |
No |
upload_icon |
String |
Font icon class name of select file button |
ico ico-upload-cloud |
No |
param_name |
String |
Name of your input file field |
file |
Yes |
field_name |
String |
Field name will be add after upload temporary file |
temp_file |
Yes |
remove_field_name |
String |
Name of remove input, use to check when remove uploaded file |
remove_photo |
No |
upload_url |
String |
Full path to component process your upload file, default will use upload temp file component of Core |
Phpfox::getLib('url')->makeUrl( 'core.upload-temp', array('type' => $sType,'id' => $iId )) |
No |
max_size_description |
String |
Description for max upload file size |
N/A |
No |
style |
String |
Style of upload form, set empty to use |
N/A |
Yes |
component_only |
Boolean |
Set |
false |
No |
is_required |
Boolean |
Set |
false |
No |
on_remove |
String |
Ajax function name will be call when click remove icon after select files |
core.removeTempFile |
No |
js_event |
Array |
Associate array with: key is |
N/A |
No |
extra_data |
Array |
Associate array contain extra data |
N/A |
No |
first_description |
String |
First description about your upload section |
N/A |
No |
type_description |
String |
Description about your allow upload file type |
N/A |
No |
max_size_description |
String |
Description about your max upload file size |
N/A |
No |
extra_description |
Array |
Array for other description |
N/A |
No |
use_browse_button |
Boolean |
Show |
N/A |
No |
keep_form |
Boolean |
Doesn't change form after drop file or not |
N/A |
No |
preview_template |
String |
|
N/A |
No |
Look at style
parameter, do you wonder what's difference between *mini form style with full size form style? Ok, let's see:*
We are usingMini style: allow to show/delete current file when you edit a item, change file and only support upload 1 file
Full size style: support upload multiple files, cannot view uploaded files after refresh form
mini
upload form for the To Do List app. If you want to learn more about full size
upload form, please check source code in our Photo App
Now, let's back to our example. After add above function, back to browser, look at add todo
form will look like:
Drag and drop or click Browse button to upload photo, your photo will be automatic upload by using upload temp file component of core
For more detail about this component, let see at: /PF.Base/module/core/include/component/controller/upload-temp.class.php
Your uploaded photo is saved in tableClick on remove file with remove uploaded file and call ajax function core.removeTempFile
phpfox_temp_file
, so you need to do some action to save it to your item when submit formCreate a new service for Todo app name Process, don't forget to register this service in start.php of this app and paste this function:
Add function$aVals['remove_photo'] with
remove_photo
is value of paramremove_field_name
$aVals['temp_file'] with
temp_file
is value of paramfield_name
deleteImage
in Process service to delete photo of todo task:
Last step is update your AddController.php and using function Add to add/update Todo Task:Use function Phpfox::getService('user.file')->remove(...) to remove your photo
Finally, let back to browser and try to upload photo to your Todo task:
Do you see the difference between two todo tasks below?