I'm trying to access the full image when I upload to a form. I know how to access the thumbnail image of course but have no clue how to access the original unmodified one. console.log(data) only shows two parameters Thumbnail and ID.
Please let me know if you need additional file information, thank you.
javascript file:
//add pin from computer
$('#pin_upload_file').change(function() {
$('.error-msg').hide();
$('#pin_upload_form').submit();
});
if ($('#pin_upload_form').length) {
var options = {
beforeSubmit: showRequest,
uploadProgress: function(event, position, total, percentComplete) {
if (window.FormData !== undefined) {
$('#pin-upload-progress').show();
$('#pin-upload-progress .progress-bar-text').text(percentComplete + '%');
$('#pin-upload-progress .progress-bar').css('width', percentComplete + '%');
}
},
success: showResponse,
url: obj_ipin.ajaxurl
};
$('#pin_upload_form').ajaxForm(options);
}
function showRequest(formData, jqForm, options) {
$('#pin-upload-from-web-wrapper, #browser-addon, #bookmarklet, #pinitbutton').slideUp();
if (window.FormData === undefined) {
$('#pin-upload-from-computer-wrapper .ajax-loader-add-pin').show();
}
var ext = $('#pin_upload_file').val().split('.').pop().toLowerCase();
if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
$('#pin-upload-from-computer-wrapper .ajax-loader-add-pin, #pin-upload-progress').hide();
$('.error-msg').html('<div class="alert alert-warning"><strong>' + obj_ipin.__invalidimagefile + '</strong></div>').fadeIn();
return false;
}
}
function showResponse(responseText, statusText, xhr, $form) {
if (responseText == 'error') {
$('.ajax-loader-add-pin, #pin-upload-progress').hide();
$('.error-msg').html('<div class="alert alert-warning"><strong>' + obj_ipin.__invalidimagefile + '</strong></div>').fadeIn();
} else if (responseText == 'errorsize') {
$('.ajax-loader-add-pin, #pin-upload-progress').hide();
$('.error-msg').html('<div class="alert alert-warning"><strong>' + obj_ipin.__imagetoosmall + '</strong></div>').fadeIn();
} else {
var data = $.parseJSON(responseText);
$('#thumbnail').attr('src', data.thumbnail);
$('#attachment-id').val(data.id);
$('.ajax-loader-add-pin, .error-msg, #pin-upload-progress').hide();
$('#pin-upload-from-computer-wrapper').slideUp(function() {
$('#pin-upload-postdata-wrapper').slideDown();
$('#pin-postdata-form #pin-title').focus();
});
}
}
php file:
<div id="pin-upload-from-computer-wrapper" class="jumbotron">
<h4><?php _e('From Device', 'ipin'); ?></h4>
<form id="pin_upload_form" method="post" action="#" enctype="multipart/form-data">
<div class="upload-wrapper btn btn-success btn-block">
<span><?php _e('Browse & Upload', 'ipin'); ?></span>
<input id="pin_upload_file" class="upload" type="file" name="pin_upload_file" accept="image/*" />
</div>
<input type="hidden" name="ajax-nonce" id="ajax-nonce" value="<?php echo wp_create_nonce('upload_pin'); ?>" />
<input type="hidden" name="mode" id="mode" value="computer" />
<input type="hidden" name="action" id="action" value="ipin-upload-pin" />
<div class="ajax-loader-add-pin ajax-loader hide"></div>
<div id="pin-upload-progress" class="progress progress-striped active hide">
<div class="progress-bar-text"></div>
<div class="progress-bar progress-bar-info"></div>
</div>
</form>
</div>