This step introduces the work-the-flow-file-upload plugin.<\/p>","content_area":"
In this demo you will upload some files, reorder them, view them, and then submit them. An automated email will then be sent containing a thumbnail image display of your submitted files in the selected order.<\/p>\r\n
You can read additional relevant documentation on each step by expanding the accordion links along the way.<\/p>\r\n
The plugin has two separate but complimentary functions<\/p>\r\n\r\n
Workflows allow stepwise presentation to users, showing a single step at a time.<\/p>\r\n
The You can add and edit each stage of the workflow from the admin interface to the plugin. PRO users can also attach email templates to workflow stages to easily automate sending progress notification emails, when users reach milestone stages.<\/p>\r\n PRO users can also edit the workflow template to modify the display you are seeing now to suit.<\/p>\r\n There are two other shortcodes available :<\/p>\r\n These can be embedded directly in pages \/ posts or embedded in workflow stage content in the admin interface.<\/p>\r\n We will demonstrate these by embedding these shortcodes in the following workflow stages.<\/p>\r\n [wtf_fu_upload wtf_upload_dir=\"demofiles\" wtf_upload_subdir='%%WORKFLOW_STAGE_TITLE%%']<\/p>","footer":" Press start to proceed to step 1 and upload some files.<\/p>","next_active":"1","next_label":"Start the tour","next_js":"","back_active":"1","back_label":"","back_js":"","pre_hook":"","post_hook":""}},"wtf-fu_workflow_8_stage_10_options":{"key_id":"10","options":{"stage_title":"","header":"In this stage we will ....","content_area":"Enter the workflow stage main body of content here.","footer":"Press next to proceed.","next_active":"1","next_label":"","next_js":"\" onClick=\"return confirm('Are you sure you want to proceed ?');\"","back_active":"1","back_label":"","back_js":"","pre_hook":"","post_hook":""}},"wtf-fu_workflow_8_stage_1_options":{"key_id":"1","options":{"stage_title":"%%WORKFLOW_STAGE_NUMBER%%. Uploading files.","header":" In this workflow stage we will demonstrate how to embed a file upload in pages, posts or workflow stages.<\/p>","content_area":" The Files are upload to specified locations under the users wp-content\/upload\/userid\/ directory.<\/p>\r\n Shortcode attributes can be use to specify destination subdirectories, number of allowed file, max file sizes and other details.<\/p>\r\n Default attributes for the shortcode can be modified in the admin interface, or overridden by supplying them in the embedded shortcode.<\/p>\r\n For example a shortcode specifying all the default attributes would look like :<\/p>\r\n You only need to supply the attributes that you wish to override.<\/p>","footer":" Press next to try out an upload.<\/p>","next_active":"1","next_label":"","next_js":"","back_active":"1","back_label":"","back_js":"","pre_hook":"","post_hook":"","send_email":"0"}},"wtf-fu_workflow_8_stage_2_options":{"key_id":"2","options":{"stage_title":"%%WORKFLOW_STAGE_NUMBER%%. Upload some files.","header":" In this stage we will upload some files to the server.<\/p>","content_area":" As this is a public demo some restriction have been put in place.<\/strong><\/span><\/p>\r\n The embedded shortcode used below is :<\/p>\r\n [wtf_fu_upload wtf_upload_dir=\"demofiles\" accept_file_types=\"jpg|jpeg|png|gif\" max_file_size=\"5\" max_number_of_files=\"30\" auto_orient=\"1\" thumbnail_crop=\"1\"]<\/p>\r\n Drag and drop some files onto this page. You will see a preview display of thumbnails appear. Press next when your uploads have completed.<\/p>","next_active":"1","next_label":"","next_js":"","back_active":"1","back_label":"","back_js":"","pre_hook":"","post_hook":"","send_email":"0"}},"wtf-fu_workflow_8_stage_3_options":{"key_id":"3","options":{"stage_title":"%%WORKFLOW_STAGE_NUMBER%%. The [wtf_fu_showfiles<\/strong>] shortcode","header":" In this stage we will introduce the [wtf_fu_showfiles<\/strong>] shortcode.<\/p>","content_area":" The Attributes can be supplied to files location under the users upload directory, and to customise the display. Some of these are illustrated below : The attribute [wtf_fu_show_files wtf_upload_dir=\"demofiles\" show_numbers=\"0\"]<\/p>\r\n<\/div>\r\n To turn default numbering off use [wtf_fu_show_files wtf_upload_dir=\"demofiles\" show_numbers=0]<\/p>\r\n<\/div>\r\nwork-the-flow-file-upload<\/code> plugin allows you to embed short codes into your pages and posts.
This demo is a workflow that was embedded into this page using the shortcode [wtf_fu id='3'<\/strong>]<\/code>.<\/p>\r\n
You can also control whether a user can move forward or backwards and also add your own custom functions to
execute before or after each stage is entered.<\/p>\r\n\r\n
[wtf_fu_upload<\/strong>]<\/code><\/li>\r\n[wtf_fu_show_files<\/strong>]<\/code><\/li>\r\n<\/ol>\r\n[wtf_fu_upload<\/strong>]<\/code> shortcode embeds an interface allowing you to drag and drop files for upload.<\/p>\r\n\r\n[wtf_eval]\r\necho wtf_fu_get_shortcode_with_default_attributes('wtf_fu_upload');\r\n[\/wtf_eval]\r\n<\/code>\r\nFull Shortcode Documentation<\/a><\/h4>\r\n
\r\n
[wtf_fu_upload<\/strong> wtf_upload_dir=\"demofiles\" accept_file_types=\"jpg|jpeg|png|gif\" max_file_size=\"1\" max_number_of_files=\"18\" auto_orient=\"1\" thumbnail_crop=\"1\"]<\/code><\/p>\r\n
Press the Start Upload<\/code> button when ready to upload them.<\/p>","footer":"[wtf_fu_showfiles<\/strong>]<\/code> shortcode is used to display a users uploaded files.<\/p>\r\n
A shortcode specifying a full set of attributes would look like :<\/p>\r\n[wtf_eval] echo wtf_fu_get_shortcode_with_default_attributes('wtf_fu_upload'); [\/wtf_eval]
<\/code><\/p>\r\n
Note that the gallery<\/code> attribute will display a gallery display of the full sized images when clicked.<\/p>\r\nDefault Display<\/a><\/h3>\r\n
wtf_upload_dir<\/code> is required. All the rest are optional.\r\n[wtf_fu_show_files<\/strong> wtf_upload_dir=\"demofiles\"]<\/code><\/p>\r\nNumbering off<\/a><\/h3>\r\n
show_numbers=0<\/code><\/p>\r\n[wtf_fu_show_files<\/strong> wtf_upload_dir=\"demofiles\" show_numbers=0]<\/code><\/p>\r\nGallery off<\/a><\/h3>\r\n