on - edited on by
HannahM
As we aware, Synthetic Browser Click path monitor doesn't support for File Upload actions. However, with help of JavaScript Event, we can perform the same action.
You can use the below JavaScript code and this is simple way to upload file without capturing File Upload HTTP request and response details,
var cssselector = "input[type=file]"; //Replace with your file upload input selector
var data = "data:text/plain;base64, RmlsZXVwbG9hZHRlc3Q="; //Convert your file into base64 format and assign it to the data variable. Make sure that file size should be minimum as we will be adding this code to our synthetic script.
var filename = "fileuploadtest.txt"; //Replace with the filename with the extension
const parts = data.split(';base64,');
const imageType = parts[0].split(':')[1];
const decodedData = window.atob(parts[1]);
const uInt8Array = new Uint8Array(decodedData.length);
for (let i = 0; i < decodedData.length; ++i) {
uInt8Array[i] = decodedData.charCodeAt(i);
}
var blob = new Blob([uInt8Array], {
type: imageType
});
var element = document.querySelector(cssselector);
var file = new File([blob], filename, {
type: imageType
});
var container = new DataTransfer();
container.items.add(file);
element.files = container.files;
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", true, true);
element.dispatchEvent(evt);
-
Get the CSS selector for the file upload input element by Right click on the element ->Inspect the element which will open the developer tools
-
Right click on the element on the Web developer tools - > Copy - > Copy Selector
-
Replace the selector on the above code
-
Convert your file into base64 format and assign it to the data variable. Make sure that file size should be minimum as we will be adding this code to our synthetic script.
-
Assign this base64 output into the data variable
-
Rename the filename which you want to modify with the extension
-
Add this JavaScript code into the JavaScript Event of your Browser click path monitor
