Add support for file uploads

Currenly only supports one file per input, and needs some testing.

Author: k1sul1

assets/scripts/wplf-form.js

@@ -7,25 +7,58 @@
 $(document).ready(function() {
 
   // ajax form submissions
-  $('.libre-form').submit(function(e) { 
+  $('.libre-form').submit(function(e) {
 
     var $form = $(this);
 
-    // add class to enable css changes to indicate ajax loading 
+    // add class to enable css changes to indicate ajax loading
     $form.addClass('sending');
 
     // reset errors
     $form.find('.wplf-error').remove();
 
+    var data = new FormData($form[0]); // includes files too, but for some reason we don't see them at the server
+
+
+    window.data = data;
+
+
+    fetch(ajax_object.ajax_url  + '?action=wplf_submit', {
+      method: "POST",
+      body: data
+    }).then(function(response){
+      //console.log(response);
+      return response.text();
+    }).then(function(response){
+      console.log(response);
+      response = JSON.parse(response);
+      if( 'success' in response ) {
+        // show success message if one exists
+        $form.after(response.success);
+      }
+      if( 'ok' in response && response.ok ) {
+        // submit succesful!
+        $form.remove();
+      }
+      if( 'error' in response ) {
+        // show error message in form
+        $form.append('<p class="wplf-error error">' + response.error + '</p>');
+      }
+      $form.removeClass('sending');
+    }).catch(function(error){
+      console.log("Fetch error: ", error);
+      $form.removeClass('sending');
+    });
+
     // submit form to ajax handler in admin-ajax.php
-    $.post( ajax_object.ajax_url + '?action=wplf_submit', 
-      $(this).serialize(), 
+    /*$.post( ajax_object.ajax_url + '?action=wplf_submit',
+      $(this).serialize(),
       function(response) {
         console.log(response);
         if( 'success' in response ) {
           // show success message if one exists
           $form.after(response.success);
-        } 
+        }
         if( 'ok' in response && response.ok ) {
           // submit succesful!
           $form.remove();
@@ -38,7 +71,7 @@ $(document).ready(function() {
     ).always(function() {
       // finished XHR request
       $form.removeClass('sending');
-    });;
+    });*/
 
     // don't actually submit the form, causing a page reload
     e.preventDefault();
@@ -48,4 +81,3 @@ $(document).ready(function() {
 });
 
 })(jQuery);
-

inc/wplf-ajax.php

@@ -18,6 +18,8 @@ function wplf_ajax_submit_handler() {
 
   if( $return->ok ) {
     // form existence has already been validated via filters
+
+
     $form = get_post( intval( $_POST['_form_id'] ) );
 
     // the title is the value of whatever the first field was in the form
@@ -52,6 +54,16 @@ function wplf_ajax_submit_handler() {
       }
     }
 
+    // handle files
+    foreach( $_FILES as $key => $file) {
+      // Is this enough security wise?
+      // Currenly only supports 1 file per input
+      $attach_id = media_handle_upload( $key, 0, array(), array( "test_form" => false ) );
+      add_post_meta($post_id, $key, $attach_id);
+    }
+
+
+
     $return->submission_id = $post_id;
     $return->submission_title = $post_title;
 
@@ -68,4 +80,3 @@ function wplf_ajax_submit_handler() {
   wp_send_json( $return );
   wp_die();
 }
-