Upload and send Data

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 a JCI-Template:
    {{_context | json_encode }}
    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
  • Create a 2nd JCI-Template
    {% 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='[jsoncontentimporterpro nameoftemplate=uploadaddpic method=curlpost urlgettimeout=60 curloptions=\'CURLOPT_HTTPHEADER=....:....;CURLOPT_SAFE_UPLOAD=false;CURLOPT_UPLOAD_POSTFIELDS={\"text2api\": \"'~ (urlparam.text1 | url_encode) ~ '\", \"jciuploadfiles\":  #BRO# { \"name\": \"FileUpload\", \"filename\":\"'~picdata.tmp_name~'\", \"store_upload_in_library\":\"yes\", \"uploadsamefilename\":\"no\", \"library_file_name\":\"new-'~(picdata.name | upper) ~'\" } #BRC# }\' showapiresponse=1 displayapireturn=1 orderofshortcodeeval=10]' %}
    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 nicht eingetragen, Bilddatei ist zu groß: <br>
    maxsize:  {{(maxsizekb/1024)| round(2)}} kB<br>
    Bildgröße: {{(picdata.size/1024)| round(2)}} kB<br>
    {% endif %}
    {% endif %}
    <form action=URL_PAGE_THIS_FORM_IS_PLACED enctype="multipart/form-data" method=POST>
    <input type=text name=text1 placeholder="Your example text">
    <input type="file" name="yourmediafile">
    <input type=submit>
    URL: URL to an API which gives all data you sent via this form. If not needed use “dummyrequest”.
    templatename: something like “uploadmediafile”
    method: CURL-POST
    Then [jsoncontentimporterpro nameoftemplate="uploadmediafile" orderofshortcodeeval=10] use on the Page URL_PAGE_THIS_FORM_IS_PLACED