Your Challenge: Offer a HTML-Form to your user for inserting some text and uploading a mediafile. The mediafile should be stored locally and displayed together with the text input. Also the text and mediafile should be sent to an API.
This is the way to achieve this:
Create two JCI-Templates. JCI-Template 1:
templatename: uploadaddpic
URL: This must be a real API where you want to send the data (“dummyrequest” is not ok here)
method: CURL-POST
urlparam4twig: text1
twig-Template:
{{_context | json_encode }}
JCI-Template 2:
templatename: uploadmediafile
URL: URL to an API which gives all data you sent via this form. If not needed use “dummyrequest”.
method: CURL-POST
twig-template: get_data_of_uploaded_file: This JCI-twig-function returns $_FILES, a ‘superglobal’ PHP-variable where the HTTP File Upload variables are stored.
{% if urlparam.text1 %}
input text: {{urlparam.text1}}<br>
{% set picdata = get_data_of_uploaded_file('yourmediafile') %}
data of uploaded file: {{picdata | json_encode}}<hr>
{% set maxsizekb= 2*1024*1024 %}
{% if picdata.error==0 and picdata.size<maxsizekb %}
upload file is ok for saving in wp-medialib<br>
{% set jciaddkond='{"answer":"hello","urlparam":{"text1":""},"apiresponseinfo":[]}' %}
shortcode for saving file: {{jciaddkond}}<hr>
{% set execsh = jciaddkond | doshortcode %}
shortcode-execution result: {{execsh | dump }}<br>
{% set execshArr = execsh | json_decode %}
{% set uploadedImgInWPLib = execshArr.apiresponseinfo.upload.attachment_url %}
<hr>{{urlparam.text1}}<br><img src="{{uploadedImgInWPLib }}">
{% else %}
mediafile not stored:<br>
picdata.error: {{picdata.error}}<br>
maxsize: {{(maxsizekb/1024)| round(2)}} kB<br>
Bildgröße: {{(kondpicdata.size/1024)| round(2)}} kB<br>
{% endif %}
{% endif %}
<form action=/upload/ enctype="multipart/form-data" method=POST>
<input type=text name=text1 placeholder="Your example text">
<input type="file" name="yourmediafile">
<input type=submit>
</form>
urlparam4twig:
text1##yourmediafile
Use the JCI-Templates:
Place the following sortcode on the Page /upload/ (see <from action=…>” at twig-template JCI-Template 2, change this if needed)
This is done in this way: 1. Create a 1st JCI-Template: Name of Template: senddata2form URL: dummyrequest (we don’t need a API when just displaying the Form) urlparam4twig: inp twig-template:
2. In the above twig-template we call a JCI-Template named senddata. Let’S create this: Name of Template: senddata URL: empty (we send the URL in the Shortcode) urlparam4twig: inp twig-template:
ATTENTION: In this Twig-code are three Script-Tags, loading code from remote servers. You can do that for testing. For a productive website you should host the JS-libs on your own servers!
“jquery.min.js” you can add via the JCI-options, Tab “Extra”
“lightslider.css” / “lightslider.js” you find at http://sachinchoolur.github.io/lightslider/ at “Download”. In the zip you find a folder “dist”. Copy the files from that (js and css) to your server and insert the URL to the two libs in the JCI-template.