jQuery Upload to S3 with PHP - Error -
i using jquery file upload plugin on wordpress site. modified of events, when file uploaded, value of hidden fields change, passed upon submission backend , creates custom post type in wordpress data.
i went implement php script instead uploads files s3 bucket. works fine, except error in frontend, , won't complete task of updating hidden values full file urls.
here 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 , pdfs if ($i == 1) { ?> acceptfiletypes: /(\.|\/)(gif|jpe?g|png|pdf)$/i, <?php // images } 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 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(' <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 image ... preview 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 line:
$.each(data.result.files, function (index, file) { uncaught typeerror: cannot read property 'length' of undefined
data.result.files undefined, should make corrections in initialization. if data.result.files array, able iterate each().
Comments
Post a Comment