How do I send all values created by jquery uploader of php form variables by email

I am trying to implement uploadcare widget in my custom php form which will get all images uploaded by user and add additional information like image URL, and file name to the images and send these additional data to client by email. I have successfully implemented the form and the email template. The problem is that when I send the form the resulting email include information about only one image.

If I sound bit vague please have a look into the code where all images uploaded by the uploadcare widget are inserted inside a list as list items.

 $ = uploadcare.jQuery;
     function installWidgetPreviewMultiple(widget, list) {
       widget.onChange(function(fileGroup) {
         list.empty();
         if (fileGroup) {
           $.when.apply(null, fileGroup.files()).done(function() {

             $.each(arguments, function(i, fileInfo) {
               // display file preview
               var $filename = fileInfo.name;
               var $fileurl = fileInfo.cdnUrl;
               var $src = fileInfo.cdnUrl + '-/resize/100x100/filename.jpg';
               var $sendurl = $("<input>").attr("type","hidden").attr("name","fileurl").val($fileurl);
               var $itemnu = 0;
               list.append(
            $('<li class="thumb_list_item"><input type="hidden" name="items" id="items" value="' + $fileurl +'"><img src="' + $src+ '" alt="Image Preview">' + '<h4 class="filename">' + $filename + '</h4>' + '<div class="get-layer-wraper"><ul class="get-layer"><li class="layer-name"><label for="white-layer" class="layer-title">White Layer : </label></li><li><input id="white-layer" name="white-layer" class="layer" type="number" value="0"/></li><li>PX</li></ul><div class="clear"><ul class="get-layer"><li class="layer-name"><label for="adhesive-layer" class="layer-title">Adhesive Layer : </label></li><li><input id="adhesive-layer" name="adhesive-layer" class="layer" type="number" value="0"/></li><li>PX</li></ul><div class="clear"><ul class="get-layer"><li class="layer-name"><label for="block-layer" class="layer-title">Blocking Layer : </label></li><li><input id="block-layer" name="block-layer" class="layer" type="number" value="0"/></li><li>PX</li></ul><div class="clear"><ul class="get-layer"><li class="layer-name"><label for="clear-layer" class="layer-title">Clear Layer : </label></li><li><input id="clear-layer" name="clear-layer" class="layer" type="number" value="0"/></li><li>PX</li></ul></div></li>').appendTo(".thumb_list")
            );

               list.append(
            $('<div>', {'class': 'layers'}).append($sendurl)                 
          );



             });
           });
         }
       });
     }

And here is my mailer.php used to send the email:

require 'vendor/autoload.php';
$sendgrid = new SendGrid('send_grid_api');
$mail = new SendGrid\Email();

 $name = "X";
 $email = "[email protected]";
 $fileurl = $_POST['fileurl'];
 $wlayer = $_POST['white-layer'];
 $alayer = $_POST['adhesive-layer'];
 $blayer = $_POST['block-layer'];
 $clayer = $_POST['clear-layer'];

 $msg = "White Layer: $wlayer, Adhesive Layer: $alayer, 
 Blocking Layer:      $blayer, Clear Layer: $clayer. 
 Download Link: $fileurl \n";

 $recipient ="[email protected]";
 $subject = "New Email";

$mail->
addTo( $recipient )->
setFromName($name)->
setFrom( $email )->
setSubject($subject)->
setText($msg);

//Send Mail.
if ($sendgrid->send($mail)) {
    header('Location: /thank-you/');
}
else{
    echo "failed";
}

I have intermediate level jquery knowledge but always a bit slow to start. So please anyone help me with this. All I need is to inlcude all image URLs and and other information in the email instead of just one.

Thanks in advance.

Solution

The mailer part - you can find here a piece of documentation on working with uploadcare groups in php. Once you go through it you will see that your proper mailer.php that attaches a list of URLs to the body of the message would look like this:

<html>
<head>
<?php
require_once 'vendor/autoload.php';
use \Uploadcare;

//make sure you replace your key values here
$sendgrid = new SendGrid('send_grid_api');
$api = new Uploadcare\Api('YOUR_PUBLIC_KEY', 'YOUR_SECRET_KEY');

$mail = new SendGrid\Email();
$name = "X";
$email = "[email protected]";


$group_id = $_POST['fileurl'];
$wlayer = $_POST['white-layer'];
$alayer = $_POST['adhesive-layer'];
$blayer = $_POST['block-layer'];
$clayer = $_POST['clear-layer'];
$group = $api->getGroup($group_id);
$group->store();
$files = $group->getFiles();
$msg = "White Layer: $wlayer, Adhesive Layer: $alayer, 
Blocking Layer:      $blayer, Clear Layer: $clayer \n";


for($i = 0; $i < count($files); $i++) {

    $msg.=$files[$i]->getUrl().' \n';

    }

 $recipient ="[email protected]";
 $subject = "New Email";

$mail->
addTo( $recipient )->
setFromName($name)->
setFrom( $email )->
setSubject($subject)->
setText($msg);

//Send Mail.
if ($sendgrid->send($mail)) {
    header('Location: /thank-you/');
}
else{
    echo "failed";
}

?>
</head>

<body>
</body>

</html>

For the first part - I answered similar question here - the only difference being widget initialization:

<?php echo $api->widget->getInputTag('fileurl',array('data-multiple' => true)); ?>`

instead of

 <?php echo $api->widget->getInputTag('fileurl'); ?>

And of course names of the fields you are sending in the form should match those you are getting in mailer.php in the POST statement.