I’m building simple a web app where you can upload a document, if uploaded, add a product to a cart, then you’re relocated to the checkout, pay with paypal and that’s it.
I’m trying to leave the uploaded file in the frontend until the payment via paypal went through and then submit to the server.
Now in technical terms…
I have a file input field and append the file(s) to a FormData object,.
I store that FormData object in the localStorage.
I retrieve it from the localStorage on the checkout page.
Other details, including payment details coming from paypal I put in the value of some hidden input fields on the page.
Inside the paypal OnApprove method, I make an AJAX call to the same page (./) in the php code, decipher the input-post variable and take it from there.
The other stuff, the values of the hidden input fields I submit via post, i.e. by refreshing the page.
But it doesn’t work. I get the stuff that I submit normally but not what I submit via AJAX. I guess they both kind of interfere?
What’s the alternative? It would be sufficient to simply have a form on the checkout page and add all values there, including the formData object. But the file gets appended to the formData object on a different page.
I have a file input field and I append that file to a FormData object.
Why am I doing that instead of submitting the form right away?
Because of privacy reasons I want the user to first agree to the terms before I send it to the server.
So the file is now in the FormData object.
What can I do with it now?
Because the user gets redirected to a different page, I wonder if the file is still there? Where is it anyway?
I tried to put it as a value of a hidden input file field on the second page, because at this point I could submit like a normal HTML form submission, but apparently that’s a no-go because it just sends a string ([“upfile”]=> string(17) “[object FormData]”).
So I tried different things…
I tried sending it via AJAX, which worked before when the project was much simpler on one site, however, I’m actually trying to implement a PayPal payment button, so that the file gets uploaded to the server when the payment is approved…
That doesn’t work, the $_FILES variable remains an empty array on the server.
I might add that I also send other data to the server from several (hidden) input fields in a form on that page. Those entries attain the server alright.
So my guess is that the AJAX call is somehow interfered with or runs asynchronously with the submission of the form? (shouldn’t be a problem if you think about it but it’s worth a try) so I put the form submission in a callback function of the AJAX call function.
Doesn’t work either.
// javascript
paypal.Buttons(
// This function captures the funds from the transaction.
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
// This function shows a transaction success message to your buyer.
hiddenInputShippingDetails.value = JSON.stringify(details.purchase_units[0].shipping.address);
hiddenInputPaypalPayer.value = JSON.stringify(details.payer);
hiddenInputPaymentMethod.value = 'PayPal';
hiddenInputCartItems.value = JSON.stringify(cartItems);
const cartForm = document.getElementById('cartform');
function makeAJAXcall(formData, callback) {
// Set up our HTTP request
var uploadXHR = new XMLHttpRequest();
// Setup our listener to process compeleted requests
uploadXHR.onreadystatechange = function () {
// Only run if the request is complete
if (uploadXHR.readyState !== 4) return;
};
uploadXHR.open('POST', './', true);
uploadXHR.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
uploadXHR.send(formData);
callback(cartForm);
}
function secondFunction(cartForm){
// call first function and pass in a callback function which
// first function runs when it has completed
cartForm.submit();
}
// makeAJAXcall(formData, secondFunction);
cartForm.submit();
});
}
}).render('#paypal-button-container');
//This function displays Smart Payment Buttons on your web page.
}