|
@@ -2,45 +2,34 @@
|
|
|
'use strict';
|
|
'use strict';
|
|
|
|
|
|
|
|
$(document).ready(function () {
|
|
$(document).ready(function () {
|
|
|
- var $container = $('.studiou-fpp-product');
|
|
|
|
|
- if (!$container.length) {
|
|
|
|
|
|
|
+
|
|
|
|
|
+ var $uploadWrap = $('.studiou-fpp-upload-wrap');
|
|
|
|
|
+ if (!$uploadWrap.length) {
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- var productId = $container.data('product-id');
|
|
|
|
|
- var maxFileSize = parseInt($container.data('max-file-size'), 10) || 50;
|
|
|
|
|
|
|
+ var productId = $uploadWrap.data('product-id');
|
|
|
|
|
+ var maxFileSize = parseInt($uploadWrap.data('max-file-size'), 10) || 50;
|
|
|
var chunkSize = parseInt(studiouWcfppFront.chunkSize, 10) || 1048576;
|
|
var chunkSize = parseInt(studiouWcfppFront.chunkSize, 10) || 1048576;
|
|
|
- var selectedVariation = null;
|
|
|
|
|
var uploadedAttachmentId = null;
|
|
var uploadedAttachmentId = null;
|
|
|
var uploadedFileRecordId = null;
|
|
var uploadedFileRecordId = null;
|
|
|
var isUploading = false;
|
|
var isUploading = false;
|
|
|
|
|
|
|
|
- // Elements
|
|
|
|
|
- var $dropzone = $('#studiou-fpp-dropzone');
|
|
|
|
|
- var $fileInput = $('#studiou-fpp-file-input');
|
|
|
|
|
- var $progress = $container.find('.studiou-fpp-progress');
|
|
|
|
|
- var $progressFill = $container.find('.studiou-fpp-progress-fill');
|
|
|
|
|
- var $progressText = $container.find('.studiou-fpp-progress-text');
|
|
|
|
|
- var $preview = $container.find('.studiou-fpp-preview');
|
|
|
|
|
|
|
+ // Upload area elements
|
|
|
|
|
+ var $dropzone = $uploadWrap.find('#studiou-fpp-dropzone');
|
|
|
|
|
+ var $fileInput = $uploadWrap.find('#studiou-fpp-file-input');
|
|
|
|
|
+ var $progress = $uploadWrap.find('.studiou-fpp-progress');
|
|
|
|
|
+ var $progressFill = $uploadWrap.find('.studiou-fpp-progress-fill');
|
|
|
|
|
+ var $progressText = $uploadWrap.find('.studiou-fpp-progress-text');
|
|
|
|
|
+ var $preview = $uploadWrap.find('.studiou-fpp-preview');
|
|
|
var $previewImg = $preview.find('img');
|
|
var $previewImg = $preview.find('img');
|
|
|
- var $previewName = $container.find('.studiou-fpp-preview-name');
|
|
|
|
|
- var $removeBtn = $container.find('.studiou-fpp-remove-file');
|
|
|
|
|
- var $addToCartBtn = $container.find('.studiou-fpp-add-to-cart-btn');
|
|
|
|
|
- var $messages = $container.find('.studiou-fpp-messages');
|
|
|
|
|
- var $attachmentInput = $('#studiou-fpp-attachment-id');
|
|
|
|
|
- var $fileRecordInput = $('#studiou-fpp-file-record-id');
|
|
|
|
|
-
|
|
|
|
|
- // Variant selection
|
|
|
|
|
- $container.on('change', 'input[name="studiou_fpp_variation"]', function () {
|
|
|
|
|
- selectedVariation = $(this).val();
|
|
|
|
|
- $(this).closest('tbody').find('tr').removeClass('studiou-fpp-variant-selected');
|
|
|
|
|
- $(this).closest('tr').addClass('studiou-fpp-variant-selected');
|
|
|
|
|
- updateAddToCartState();
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ var $previewName = $uploadWrap.find('.studiou-fpp-preview-name');
|
|
|
|
|
+ var $removeBtn = $uploadWrap.find('.studiou-fpp-remove-file');
|
|
|
|
|
+ var $messages = $uploadWrap.find('.studiou-fpp-messages');
|
|
|
|
|
|
|
|
- // Variant row click
|
|
|
|
|
- $container.on('click', '.studiou-fpp-variant-row td:not(.studiou-fpp-col-select)', function () {
|
|
|
|
|
- $(this).closest('tr').find('input[type="radio"]').prop('checked', true).trigger('change');
|
|
|
|
|
|
|
+ // Reset upload after successful WC add-to-cart
|
|
|
|
|
+ $(document.body).on('added_to_cart', function () {
|
|
|
|
|
+ resetUpload();
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
// Drag and drop
|
|
// Drag and drop
|
|
@@ -63,7 +52,7 @@
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- $dropzone.on('click', function (e) {
|
|
|
|
|
|
|
+ $dropzone.on('click', function () {
|
|
|
if (!isUploading) {
|
|
if (!isUploading) {
|
|
|
$fileInput.trigger('click');
|
|
$fileInput.trigger('click');
|
|
|
}
|
|
}
|
|
@@ -80,17 +69,11 @@
|
|
|
removeUploadedFile();
|
|
removeUploadedFile();
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- // Add to cart
|
|
|
|
|
- $addToCartBtn.on('click', function () {
|
|
|
|
|
- addToCart();
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
function handleFile(file) {
|
|
function handleFile(file) {
|
|
|
if (isUploading) {
|
|
if (isUploading) {
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- // Validate file size
|
|
|
|
|
var maxBytes = maxFileSize * 1024 * 1024;
|
|
var maxBytes = maxFileSize * 1024 * 1024;
|
|
|
if (file.size > maxBytes) {
|
|
if (file.size > maxBytes) {
|
|
|
showMessage(studiouWcfppFront.i18n.fileTooLarge.replace('%s', maxFileSize), 'error');
|
|
showMessage(studiouWcfppFront.i18n.fileTooLarge.replace('%s', maxFileSize), 'error');
|
|
@@ -109,7 +92,6 @@
|
|
|
|
|
|
|
|
$dropzone.hide();
|
|
$dropzone.hide();
|
|
|
$progress.show();
|
|
$progress.show();
|
|
|
- $addToCartBtn.prop('disabled', true);
|
|
|
|
|
|
|
|
|
|
function uploadNextChunk() {
|
|
function uploadNextChunk() {
|
|
|
var start = currentChunk * chunkSize;
|
|
var start = currentChunk * chunkSize;
|
|
@@ -127,32 +109,44 @@
|
|
|
formData.append('file_size', file.size);
|
|
formData.append('file_size', file.size);
|
|
|
formData.append('chunk', blob, 'chunk');
|
|
formData.append('chunk', blob, 'chunk');
|
|
|
|
|
|
|
|
|
|
+ // Last chunk triggers server-side assembly - needs longer timeout
|
|
|
|
|
+ var isLastChunk = (currentChunk === totalChunks - 1);
|
|
|
|
|
+ if (isLastChunk) {
|
|
|
|
|
+ $progressFill.css('width', '100%');
|
|
|
|
|
+ $progressText.text(studiouWcfppFront.i18n.processing || 'Processing...');
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
$.ajax({
|
|
$.ajax({
|
|
|
url: studiouWcfppFront.ajaxUrl,
|
|
url: studiouWcfppFront.ajaxUrl,
|
|
|
type: 'POST',
|
|
type: 'POST',
|
|
|
data: formData,
|
|
data: formData,
|
|
|
processData: false,
|
|
processData: false,
|
|
|
contentType: false,
|
|
contentType: false,
|
|
|
|
|
+ timeout: isLastChunk ? 120000 : 30000,
|
|
|
success: function (response) {
|
|
success: function (response) {
|
|
|
if (response.success) {
|
|
if (response.success) {
|
|
|
- currentChunk++;
|
|
|
|
|
- var percent = Math.round((currentChunk / totalChunks) * 100);
|
|
|
|
|
- $progressFill.css('width', percent + '%');
|
|
|
|
|
- $progressText.text(percent + '%');
|
|
|
|
|
|
|
+ if (!isLastChunk) {
|
|
|
|
|
+ currentChunk++;
|
|
|
|
|
+ var percent = Math.round((currentChunk / totalChunks) * 100);
|
|
|
|
|
+ $progressFill.css('width', percent + '%');
|
|
|
|
|
+ $progressText.text(percent + '%');
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
if (response.data.complete) {
|
|
if (response.data.complete) {
|
|
|
- // Upload complete
|
|
|
|
|
uploadedAttachmentId = response.data.attachment_id;
|
|
uploadedAttachmentId = response.data.attachment_id;
|
|
|
uploadedFileRecordId = response.data.file_record_id;
|
|
uploadedFileRecordId = response.data.file_record_id;
|
|
|
- $attachmentInput.val(uploadedAttachmentId);
|
|
|
|
|
- $fileRecordInput.val(uploadedFileRecordId);
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // Store in WC session so any add-to-cart button picks it up
|
|
|
|
|
+ storeInSession(
|
|
|
|
|
+ response.data.attachment_id,
|
|
|
|
|
+ response.data.file_record_id,
|
|
|
|
|
+ response.data.file_name
|
|
|
|
|
+ );
|
|
|
|
|
|
|
|
showPreview(response.data.thumbnail_url, response.data.file_name);
|
|
showPreview(response.data.thumbnail_url, response.data.file_name);
|
|
|
$progress.hide();
|
|
$progress.hide();
|
|
|
isUploading = false;
|
|
isUploading = false;
|
|
|
- updateAddToCartState();
|
|
|
|
|
} else {
|
|
} else {
|
|
|
- // Upload next chunk
|
|
|
|
|
uploadNextChunk();
|
|
uploadNextChunk();
|
|
|
}
|
|
}
|
|
|
} else {
|
|
} else {
|
|
@@ -168,6 +162,31 @@
|
|
|
uploadNextChunk();
|
|
uploadNextChunk();
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ function storeInSession(attachmentId, fileRecordId, fileName) {
|
|
|
|
|
+ $.ajax({
|
|
|
|
|
+ url: studiouWcfppFront.ajaxUrl,
|
|
|
|
|
+ type: 'POST',
|
|
|
|
|
+ data: {
|
|
|
|
|
+ action: 'studiou_wcfpp_set_upload_session',
|
|
|
|
|
+ nonce: studiouWcfppFront.nonce,
|
|
|
|
|
+ attachment_id: attachmentId,
|
|
|
|
|
+ file_record_id: fileRecordId,
|
|
|
|
|
+ file_name: fileName
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function clearSession() {
|
|
|
|
|
+ $.ajax({
|
|
|
|
|
+ url: studiouWcfppFront.ajaxUrl,
|
|
|
|
|
+ type: 'POST',
|
|
|
|
|
+ data: {
|
|
|
|
|
+ action: 'studiou_wcfpp_clear_upload_session',
|
|
|
|
|
+ nonce: studiouWcfppFront.nonce
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
function uploadFailed(message) {
|
|
function uploadFailed(message) {
|
|
|
isUploading = false;
|
|
isUploading = false;
|
|
|
$progress.hide();
|
|
$progress.hide();
|
|
@@ -200,73 +219,21 @@
|
|
|
file_record_id: uploadedFileRecordId
|
|
file_record_id: uploadedFileRecordId
|
|
|
},
|
|
},
|
|
|
success: function () {
|
|
success: function () {
|
|
|
- uploadedAttachmentId = null;
|
|
|
|
|
- uploadedFileRecordId = null;
|
|
|
|
|
- $attachmentInput.val('');
|
|
|
|
|
- $fileRecordInput.val('');
|
|
|
|
|
- $preview.hide();
|
|
|
|
|
- $previewImg.attr('src', '');
|
|
|
|
|
- $previewName.text('');
|
|
|
|
|
- $dropzone.show();
|
|
|
|
|
- $fileInput.val('');
|
|
|
|
|
- updateAddToCartState();
|
|
|
|
|
|
|
+ resetUpload();
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- function addToCart() {
|
|
|
|
|
- if (!selectedVariation) {
|
|
|
|
|
- showMessage(studiouWcfppFront.i18n.selectVariant, 'error');
|
|
|
|
|
- return;
|
|
|
|
|
- }
|
|
|
|
|
- if (!uploadedAttachmentId) {
|
|
|
|
|
- showMessage(studiouWcfppFront.i18n.uploadFile, 'error');
|
|
|
|
|
- return;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- $addToCartBtn.prop('disabled', true);
|
|
|
|
|
|
|
+ function resetUpload() {
|
|
|
|
|
+ uploadedAttachmentId = null;
|
|
|
|
|
+ uploadedFileRecordId = null;
|
|
|
|
|
+ clearSession();
|
|
|
|
|
+ $preview.hide();
|
|
|
|
|
+ $previewImg.attr('src', '');
|
|
|
|
|
+ $previewName.text('');
|
|
|
|
|
+ $dropzone.show();
|
|
|
|
|
+ $fileInput.val('');
|
|
|
clearMessages();
|
|
clearMessages();
|
|
|
-
|
|
|
|
|
- $.ajax({
|
|
|
|
|
- url: studiouWcfppFront.ajaxUrl,
|
|
|
|
|
- type: 'POST',
|
|
|
|
|
- data: {
|
|
|
|
|
- action: 'studiou_wcfpp_add_to_cart',
|
|
|
|
|
- nonce: studiouWcfppFront.nonce,
|
|
|
|
|
- product_id: productId,
|
|
|
|
|
- variation_id: selectedVariation,
|
|
|
|
|
- attachment_id: uploadedAttachmentId,
|
|
|
|
|
- file_record_id: uploadedFileRecordId
|
|
|
|
|
- },
|
|
|
|
|
- success: function (response) {
|
|
|
|
|
- if (response.success) {
|
|
|
|
|
- showMessage(studiouWcfppFront.i18n.addedToCart, 'success');
|
|
|
|
|
- // Reset upload state for next photo
|
|
|
|
|
- uploadedAttachmentId = null;
|
|
|
|
|
- uploadedFileRecordId = null;
|
|
|
|
|
- $attachmentInput.val('');
|
|
|
|
|
- $fileRecordInput.val('');
|
|
|
|
|
- $preview.hide();
|
|
|
|
|
- $dropzone.show();
|
|
|
|
|
- $fileInput.val('');
|
|
|
|
|
- updateAddToCartState();
|
|
|
|
|
-
|
|
|
|
|
- // Update WC cart fragments
|
|
|
|
|
- $(document.body).trigger('wc_fragment_refresh');
|
|
|
|
|
- } else {
|
|
|
|
|
- showMessage(response.data ? response.data.message : studiouWcfppFront.i18n.addToCartError, 'error');
|
|
|
|
|
- updateAddToCartState();
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- error: function () {
|
|
|
|
|
- showMessage(studiouWcfppFront.i18n.addToCartError, 'error');
|
|
|
|
|
- updateAddToCartState();
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function updateAddToCartState() {
|
|
|
|
|
- $addToCartBtn.prop('disabled', !(selectedVariation && uploadedAttachmentId));
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function showMessage(text, type) {
|
|
function showMessage(text, type) {
|