1

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

3
  • What does the structure of data.result.files look like (seems like it might be undefined)? Is the AJAX call getting the expected data structure in return? Commented Jul 11, 2013 at 0:05
  • data.result.files is obviously not an array. Commented Jul 11, 2013 at 0:08
  • @Jack, you can see that is used in the example from the developer here: github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin Commented Jul 11, 2013 at 0:09

1 Answer 1

2

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().

Sign up to request clarification or add additional context in comments.

3 Comments

I edited my question to include the entire script. What is weird is that each(data.files works earlier in the code, for example on 'fileuploadadd'.
But that's data.files, not data.result.files. Maybe you wanted to use data.files at the place where your problem occurred?
I did that, and it solved that problem. However, I'm still not getting the S3 URL. I need to look more at the new S3 code...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.