jQuery Upload to S3 with PHP - Error

Question

I am using the jQuery File Upload plugin on a WordPress site. I modified some of the events, so that when a file is uploaded, the value of hidden fields change, which are passed upon submission to the backend and creates a custom post type in WordPress with that data.

I then went to implement a PHP script that instead uploads the files to an S3 bucket. That all works fine, except I now get an error in the frontend, and it won't complete the task of updating the hidden values to the full file URLs.

Here is the script:

$(function() {
    var url = '<?php echo plugins_url(); ?>/jQuery-File-Upload/server/php/',
    id = '#upload<?php echo $i; ?>';

    $(id + ' .fileupload').fileupload({
        url: url,
        dataType: 'json',
        <?php
        // images and pdfs
        if ($i == 1) {
        ?>
          acceptFileTypes: /(\.|\/)(gif|jpe?g|png|pdf)$/i,
        <?php
        // images only
        } else {
        ?>
          acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        <?php } ?>
        maxFileSize: 5000000,
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator && navigator.userAgent),
        imageMaxWidth: 800,
        imageMaxHeight: 800,
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        // previewCrop: true
    }).on('fileuploadadd', function (e, data) {
        data.context = $('<div/>').appendTo(id + ' .files');
        $.each(data.files, function (index, file) {
            var node = $('<p/>').append($('<span/>').text('Uploading...'));
            origname = (file.name);
            node.appendTo(data.context);
            $(id + ' .uploaderror').remove(); // Remove any error
            $(id + ' .fileupload').hide(); // Hide File Upload
            $(id + ' .progress').show(); // Show Progress
            // Cancel Button
            $(id + ' .files p span').append(' <a class="cancelupload">Cancel</a>');
            $(id + ' .cancelupload').click(function(e) {
              // Cancel Upload
              $(id + ' .progress').hide(); // Hide Progress
              $(id + ' .fileupload').show(); // Show File Upload
              $(id + ' div.files div').remove(); // Remove divs
              $(id + ' div.files').append('<span class="uploaderror">Upload canceled</span>'); // Canceled message
              data.abort(); // Abort upload
            });
        });
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
        if (file.error) {
            $(id + ' .progress').hide(); // Hide Progress
            $(id + ' div.files div').remove(); // Remove divs
            $(id + ' .cancelupload').remove(); // Remove cancel message
            $(id + ' .fileupload').show(); // Show File Upload
            $(id + ' div.files').append('<span class="uploaderror">' + file.error + '</span>'); // Error message
        }
    }).on('fileuploadprogressall', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $(id + ' .progress .bar').css(
            'width',
            progress + '%'
        );
        $(id + ' .progress .bar').text(progress + '%');
    }).on('fileuploaddone', function (e, data) {    
        $(id + ' .progress').hide(); // Hide Progress
        $(id + ' .cancelupload').remove(); // Remove cancel message

        $.each(data.result.files, function (index, file) {
            $(data.context.children()[index]).text(origname);
            $(data.context.children()[index]).append('&nbsp;&nbsp;<img src="<?php echo plugins_url(); ?>/images/check.png" alt="Successs" />');
            $(id + ' .uploadurl').val(file.url);
            $(data.context.children()[index]).append('<br><a class="remove">Remove</a>');

            // PDF or not?
            if (file.type == 'application/pdf') {
              $(id + ' .files p').prepend('<img class="uploadpreview" src="<?php echo plugins_url(); ?>/images/PDF.png" alt="PDF" />');
            } else {
              // Must be an image ... Preview the thumbnail
              $(id + ' .files p').prepend('<img class="uploadpreview" src="' + url + 'files/thumbnail/' + file.name + '" alt="PDF" />');
            }
        });
        $(id + ' a.remove').click(function(e) {
          // Remove image
          $(id + ' .uploadurl').val(''); // Remove value of hidden field
          $(id + ' div.files div').remove(); // Remove divs
          $(id + ' .fileupload').show(); // Show File Upload
        });
    }).on('fileuploadfail', function (e, data) {
        $.each(data.result.files, function (index, file) {
            var error = $('<span/>').text(file.error);
            $(data.context.children()[index])
                .append(error);
        });
    });
});

It breaks on this line:

$.each(data.result.files, function (index, file) {

Uncaught TypeError: Cannot read property 'length' of undefined

Answer 1

data.result.files is undefined , you should make corrections in your initialization. If data.result.files will be an array , you will be able to iterate it with each() .