how to get dropdown values from append function

I have a function that I am using to append data elements from one dropdown option to another
The function is working properly. What I am looking for is to get the values of the second dropdown option which is an array

<select id="sel1" multiple size="5">
<option value="test1">1st test</option>
<option value="test2">2nd test</option>
<option value="test3">3rd test</option>
<option value="test4">4th test</option>
<option value="test5">5th test</option>
</select>
<select id="sel2" name = "sel2[]" multiple size="4">
<option value="dummy">Dummy</option>
</select>
<br>
<input type="button" id="doBtn" value="do it">
<input type="button" id="submit" value="add">
 

and this is my javascript for appending elements

$('#doBtn').click(function () {
$('#sel1 option:selected').each(function () {
    $("<option/>").
    val($(this).val()).
    text($(this).text()).
    appendTo("#sel2");
});
});

when I submit it, I expect the $diag_string to have values but it returns empty

if(isset($_POST[submit]))
{
 $diag_string = implode(', ', $_POST['sel2']);

$sql ="INSERT INTO  ...... values ('...... ')";
    $qsql = mysqli_query($con,$sql);
}

what has to be done to sel2[] select option to obtain values from it?

how can I scrape the subtitle from a javascript driven page with python

I am trying to scrape this site: https://www.msn.com/nl-be/nieuws/other/de-50-beste-netflix-series-volgens-the-new-york-times/ss-BB1kJC5H?rc=1&ocid=winp1taskbar&cvid=c774477be4b04494b3690631644cf5a9&ei=3#image=2

I am trying to get the title 'Friday Night Lights' but I don’t seem to get past the javascript.

I am using python and selenium or beautifullsoup.
tried WebDriverWait(driver, 10)
I used webdriver.Chrome.

options = webdriver.ChromeOptions()

options.add_argument("disable-infobars")

options.add_argument("start-maximized")

options.add_argument("disable-dev-shm-usage")

options.add_argument("no-sandbox")

#options.add_experimental_option("prefs", {'profile.managed_default_content_settings.javascript': 2})

options.add_experimental_option("excludeSwitches", ["enable-automation"])

options.add_argument("disable-blink-features=AutomationControlled")

driver = webdriver.Chrome(options=options)

driver.get('https://www.msn.com/nl-be/nieuws/other/de-50-beste-netflix-series-volgens-the-new-york-times/ss-BB1kJC5H?rc=1&ocid=winp1taskbar&cvid=c774477be4b04494b3690631644cf5a9&ei=3#image=2')

page = requests.get('https://www.msn.com/nl-be/nieuws/other/de-50-beste-netflix-series-volgens-the-new-york-times/ss-BB1kJC5H?rc=1&ocid=winp1taskbar&cvid=c774477be4b04494b3690631644cf5a9&ei=3#image=2')

element = WebDriverWait(driver, 30).until(EC.presence_of_element_located((By.CSS_SELECTOR, '#ViewsPageId-BB1kJC5H')))

title = soup.find_all(name="span", class_="title")

print(title)

This returns an empty list, when I print the pagesource I get the HTML before javascript execution so the title is not displayed but in the inspectors HTML I get the completed html after javascript execution which includes the title.

Use css next sibling selector (+) with css scope rule

Trying to figure out why this works:

const aa = document.querySelector('div');
//const bb = aa.querySelector(':scope + aside');
const bb = aa.querySelector(':scope > aside');

console.log(bb.classList[0]);
<div>Div<aside class="zoe yip xin"> span</aside></div>
<aside class="abe bob cam">Aside</aside>
but this does not:

const aa = document.querySelector('div');
const bb = aa.querySelector(':scope + aside');
//const bb = aa.querySelector(':scope > aside');

console.log(bb.classList[0]);
<div>Div<aside class="zoe yip xin"> span</aside></div>
<aside class="abe bob cam">Aside</aside>
The first example uses :scope > aside to grab the nested aside,
while the second uses :scope + aside to TRY / FAIL to grab the sibling aside

The desired result is to use the aa selector to cache the sibling aside.abe.bob.cam element.

How does p5.js instance mode work where the argument to instantiate the object is a function?

I’m having issues understanding how the P5.js instance mode works. The syntax of creating the object seems so different from anything else I’ve seen.

We’re instantiating a new object with the ‘new p5(Sketch)’ statement in UseEffect. Usually to instantiate a new object, an argument is passed that has the necessary requirements for the Constructor in a Class to create. However, in this case, a new object is being instantiated by passing a function as an argument. This seems so different from what I’ve encountered in the past.

I can use these templates and have been able to create my own customized code. However, it bothers me that how this is so different.

I would like to understand the principles. Can someone please explain to me in a detailed manner?I’m a self-taught programmer and am able to code certain work or hobby related requirements. I’m familiar with OOP principles.

I understand the objective is to use the instance mode so that we don’t confuse the common variables/functions with other libraries.

I’ve tried to read as much possible but I’ve not understood the explanations. I had also tried https://github.com/processing/p5.js/wiki/Global-and-instance-mode

The two most confusing lines are:

  1. new p5(Sketch);
  2. const Sketch = p5 => {….}

Here are a few specific questions:

  1. We’re instantiating a p5 object with a function with the ‘new p5(Sketch’. How is this possible?
  2. The Sketch function itself has a p5 argument. So, we seem to be instantiating a p5 object with an argument Sketch which itself has a p5 object as an argument. This seems circular.
import React, { useEffect } from "react";
import * as p5 from "p5";
 
const P5Sketch = () => {
 const Sketch = p5 => {
   Let radius;  
   p5.setup = () => {
     p5.createCanvas(p5.windowWidth, p5.windowHeight);
     p5.background(0);
     Radius = 0;
   };
 
   p5.draw = () => {
    p5.ellipse(p5.width/2,p5.height/2,radius,radius);
      radius++;  
   };
 };
 
 useEffect(() => {
  new p5(Sketch);
 }, []);
 
 return (
    <></>
 );
};
 
export default P5Sketch;

I’ve tried to read as much as possible to understand this but not able to grasp it.

Sequential execution in backend Wix Velo Javascript

I have this strange problem with sequential code, maybe I am missing something fundamental, but I cannot see what.
The following backend code (async WebMethod) runs sequentially fine (I am not interested in asynchronous performance; simplest code is better):

let branch_url = await get_branches_func(token_id);
console.log("BRANCH_URL: ", branch_url);
var xml_branch = await get_branch_func(token_id, branch_url);
console.log("xml_branch: ", xml_branch);

branch_url and xml_branch are correctly returned and I can go ahead.

But if I run some other code after this:

. . .
var xml_branch = await get_branch_func(token_id, branch_url);
console.log("xml_branch: ", xml_branch);
var property_array = await process_properties_func(xml_branch, token_id, branch_url); 
return("pippo"); // Return to frontend.

The function get_branch_func returns without executing the first .then() and process_properties_func is not even called.

This is the code of the two functions:

//------------------
// GET_BRANCH_FUNC: Get Property List 
//------------------
export const get_branch_func = webMethod(Permissions.Anyone, (token, branch_url) =>  
{
const datafeedid = 'lugushomesapi';
  console.log("Hello world get_branch_func!");
  var base64File = encode(token, 'base64');
  const AuthHeader = "Basic "+base64File;
  console.log("AuthHeader", AuthHeader);
  return fetch(branch_url+"/property", {
  'method': 'get',
  'headers': {
    'Authorization': AuthHeader
      },
    })
  .then((httpResponse) => {   // This part is never executed
    //console.log("Response: ");
    //console.log("Response: ", httpResponse);
    if (httpResponse.ok) {
      //return httpResponse.json();
      console.log("Response OK: ", httpResponse);
      return (httpResponse.text());  // RETURNS FROM INTERNAL THEN FUNCTION
    } else 
      console.log("Fetch did not succeed: ", httpResponse);
      console.log("Status:", httpResponse.status);
      return (httpResponse.text());  // RETURNS FROM INTERNAL THEN FUNCTION
          }
        })
  .then(xmlText => {
        // Now you can work with the parsed XML document
        console.log("xmlDoc:", xmlText);
        return(xmlText);
  });
  }
);

//------------------
// PROCESS PROPERTIES: Get Properties, process and set Collection
//------------------
export const process_properties_func = webMethod(Permissions.Anyone, (xmlText, token, branch_url) =>
{
  console.log("Hello world process_properties_func!");
  var parser = new DOMParser();
  var xmlDoc = parser.parseFromString(xmlText,"application/xml");
 // return([]); -> If I uncomment this, get_branch_func  works fine
// Retrieve all property elements
  const properties = xmlDoc.getElementsByTagName("property");
  console.log("process_properties_func properties:", properties);
  // return([]); -> If I uncomment  this,  in get_branch_func  we have the same problem

// Create an array to store the results
  var propertyArray = Array.from(properties).map(property => {
    const propId = property.getElementsByTagName("prop_id")[0].textContent;
    const lastChanged = property.getElementsByTagName("lastchanged")[0].textContent;
    
    return {
        prop_id: propId,
        lastchanged: lastChanged
      };
    });
  

  console.log("process_properties_func propertyArray: ", propertyArray);
  return(propertyArray); 
});

I tried to disable code in process_properties_func, it seems that if I leave more code it would fail, it works until only two lines are executed (i.e. if process_properties_func is only two instructions, get_branch_func is executed correctly.

I tried the following code but the result is the same:

    get_branch_func(token_id, branch_url).then(async (result) => {
     let xml_branch = result;
     console.log("xml_branch: ", xml_branch);
     var property_array = await process_properties_func(xml_branch, token_id, branch_url);
    console.log("property_array: ", property_array);

I cannot use process_properties_func.then() because it fails (.then() is not available for the returned data).

Comparing Fetch API, Axios, and GraphQL for API requests: Performance and Use Cases [closed]

I’m evaluating methods for making API requests in JavaScript applications and need factual comparisons between Fetch API, Axios, and GraphQL. Specifically, I’m looking for:

Performance metrics:

What are the average response times for each method when making similar requests?
How do they compare in terms of memory usage and bundle size impact?

Use case suitability:

What types of projects or scenarios are each method best suited for, based on their features?
Are there specific industry standards or best practices that recommend one method over others for particular use cases?

Implementation complexity:

What is the average time to set up and implement each method for a basic CRUD application?
How do they compare in terms of lines of code required for common operations?

Browser and environment support:

What are the exact browser version requirements for each method?
How do they perform in different environments (browser vs Node.js)?

Error handling and debugging:

I’ve researched the documentation and experimented with basic API calls using Fetch and Axios in small test scripts. I’m looking for empirical data or documented experiences that can provide objective comparisons.
Can you provide factual information or references to studies/benchmarks that compare these methods based on the above criteria?

Uncaught ReferenceError: “class” is not defined

I’m currently starting to get into NodeJS-Projekts and my first one should be a simple wrapper-class for an Openlayers-Map, that should work as a standalone.
I have put together my configuration, based on a basic tutorial, sprinkled with anything I could find, that promised to help with the problem.
But whatever I do, I cant get the class to work and get the error:

Uncaught ReferenceError: OpenLayersMap is not defined

The following is an extreme simplification of the Problem:

Please note, that index.js will later include more imports.

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/index.js",
    output: {
        library: { type: "umd" },
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"],
                    },
                },
            },
            {
                test: /.css$/,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
        }),
    ],
    devServer: {
        static: path.join(__dirname, "public"),
        compress: true,
        port: 9000,
        open: true,
    },
};

index.js

import OpenLayersMap from "./map";

export default OpenLayersMap;

map.js

import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";

export default class OpenLayersMap {
    constructor(elementId) {
        this.map = new Map({
            target: elementId,
            layers: [
                new TileLayer({source: new OSM()}),
            ],
            view: new View({
                center: [998616.32, 7084710.0],
                zoom: 12,
            }),
        });
    }
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenLayers Map</title>
    <style>
        #map {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script src="bundle.js"></script>
    <script>
       const map = new OpenLayersMap("map")
    </script>
</body>

</html>

The following does work:

index.js

import OpenLayersMap from "./map";

document.addEventListener('DOMContentLoaded', () => {
    const map = new OpenLayersMap('map');
});

or

import OpenLayersMap from './map';

window.createMap = (elementId) => {
    new OpenLayersMap(elementId);
};

But the first does not allow me to customize the ID of the target and the second one does not give me the instance of the class for further use, therefore i cant use these.

How to Stream Responses from vllm API Server and Display in Flask App?

I am using the vllm API server with the following setup:

python -m vllm.entrypoints.api_server --model=mistralai/Mistral-7B-Instruct-v0.3 --dtype=half --tensor-parallel-size=4 --gpu-memory-utilization=0.5 --max-model-len=27000

I am sending requests to the server using this Python function:

def send_request_2_llm(prompt: str):
    url = "http://localhost:8000/generate"
    if len(prompt) > 27_000:
        prompt = prompt[:27_000]
    payload = {
        "prompt": prompt,
        "stream": True,
        "min_tokens": 256,
        "max_tokens": 1024
    }
    response = requests.post(url, json=payload, stream=True)
    return response

I want to display the streamed response on my Flask app’s screen. The issue I’m encountering is with the structure of the streamed responses. The API server returns the response in a sequence of JSON objects like this:

{"text": "SYSTEM_PROMPT + hello"}
{"text": "SYSTEM_PROMPT + hello how"}
{"text": "SYSTEM_PROMPT + hello how are"}
{"text": "SYSTEM_PROMPT + hello how are you"}
{"text": "SYSTEM_PROMPT + hello how are you?"}

On my Flask app, I want to print only the final text (“hello how are you?”) on a single line, in a streaming fashion. I believe I can slice the “text” by SYSTEM_PROMPT, but I’m unsure how to do this correctly.

Here is the JavaScript code I am using to handle the streaming:

function askQuestion() {
    const fileInput = document.getElementById('fileInput');
    const questionInput = document.getElementById('questionInput');
    const responseDiv = document.getElementById('response');

    const formData = new FormData();
    formData.append('file', fileInput.files[0]);
    formData.append('question', questionInput.value);

    responseDiv.innerHTML = '';  // Clear previous response

    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const reader = response.body.getReader();
        const decoder = new TextDecoder();

        return new ReadableStream({
            start(controller) {
                function push() {
                    reader.read().then(({ done, value }) => {
                        if (done) {
                            controller.close();
                            return;
                        }
                        const chunk = decoder.decode(value, { stream: true });
                        console.log("Received chunk:", chunk);  // Debug log
                        controller.enqueue(chunk);
                        responseDiv.innerHTML += chunk;
                        push();
                    }).catch(error => {
                        console.error('Stream reading error:', error);
                        controller.error(error);
                    });
                }
                push();
            }
        });
    })
    .then(stream => new Response(stream).text())
    .then(result => {
        console.log('Complete response received');
    })
    .catch(error => {
        console.error('Error:', error);
        responseDiv.innerHTML = 'An error occurred while processing your request.';
    });
}

My Questions:

  1. How can I correctly slice out the SYSTEM_PROMPT from the “text” field and display only the final text?
  2. How can I implement streaming in a way that ensures the response is updated on the screen in real-time, without showing intermediate fragments?

Any advice or guidance would be greatly appreciated!

React native swiper auto scrolls when swipped

I have a react native swiper component that auto scrolls when I swipe, which results in two images showing together, but it doesn’t do this if I remove onindexchanged()
the issue
what I want when I swipe

The code

    <Swiper
          index={0}
          loop={false}
          autoplay={false}
          onIndexChanged={(index) => {
          setCurrentIndex(index)
          }}
          showsPagination={false}
          loadMinimal
          loadMinimalSize={1}
          horizontal={false}
        >
          {[{ id: "cover", image: image }, ...images]
            .filter((item) => item.image)
            .map((item, index) => (
              <Manga
                key={item.id}
                coverImage={item.image}
                img={item.image}
                index={index}
                blurStatus={blurStatus}
                overlayVisible={overlayVisible}
                commentsForImages={commentsForImages}
                refRBSheet={refRBSheet}
              />
            ))}
        </Swiper>

this causes the issue

  onIndexChanged={(index) => {
            setCurrentIndex(index);
          }}

this doesn’t

    onIndexChanged={(index) => {
            console.log(index)
          }}

Is it possible to generate forms or surveys in Go High Level via the API

I have a massive form we are using for multiple sub-accounts. Its impractical to build this survey multiple times. (i am already creating the custom fields via the api) but i cant seem to find if the api is able to generate the forms or surveys for me via the api. Is it possible or is there another work-around? Thanks.

I am creating the custom fields via the api (360+ fields) but these fields are to be used in the survey/form. I see the docs mention the GET functions but no push. We are usuing the basic api and have yet to try advanced. I will get it if it can solve it.

JavaScript getting slow after running idle for 10Hr+ [closed]

I have a custom JavaScript library that I need to use in my Java project. To achieve this, I wrapped the JavaScript library with React Native and created a bridge to access its functions.

Initially, everything works fine. However, after the application runs for more than 10 hours, the JavaScript library starts responding with delays. For instance, an API call that usually returns within 700ms takes 2 to 3 seconds after running for 10 hours.

Note: During the 10-hour idle period, no API calls are made. For API requests, I’m using Axios.

JAVA <-> RN <-> JS Library

Capacitor CapGo Native Audio TypeError: this.notifyListeners is not a function

NOTE:

this error happens on the web only, on the web version of the capacitor plugin. I locally cloned the plugin repository and checked and the method should theoretically exist.

This is the package with which the error occurs:

https://www.npmjs.com/package/@capgo/native-audio

I am getting errors like below

TypeError: this.notifyListeners is not a function

triggered from this method:

Audio.onEnded

after upgrading to

  1. capacitor v6
  2. (ionic v8)
  3. (angular v17)

enter image description here

plugin version:

"@capgo/native-audio": "^6.4.4",

Here is my native-audio usage:

import { Injectable } from '@angular/core';
import { getIsSoundEffectsOn$ } from './preferences';
import { NativeAudio } from '@capgo/native-audio';
import { Haptics, ImpactStyle } from '@capacitor/haptics';

@Injectable({
  providedIn: 'root'
})
export class AudioService {

  public isSoundEffectsOn = false;

  constructor() {
    this.preloadAudio('click', 'assets/sounds/click.mp3');
    this.preloadAudio('toggle', 'assets/sounds/toggle.mp3');
    this.preloadAudio('success', 'assets/sounds/success.wav');
    this.preloadAudio('failure', 'assets/sounds/failure.wav');

    getIsSoundEffectsOn$().then(isOn => {
      this.isSoundEffectsOn = isOn;
    }).catch(error => {
      console.error('Error fetching sound effects preference:', error);
    });
  }

  private preloadAudio(assetId: string, assetPath: string): void {
    NativeAudio.preload({
      assetId,
      assetPath,
      audioChannelNum: 1,
      isUrl: false
    }).then(() => {
      console.log(`Preloaded ${assetId} successfully.`);
    }).catch(error => {
      console.error(`Error preloading ${assetId}:`, error);
    });
  }

  private async playAudio(assetId: string) {
    if (this.isSoundEffectsOn) {
      try {
        await NativeAudio.play({ assetId });
        console.log(`Playing ${assetId}.`);
      } catch (error) {
        if (assetId !== 'click') {
          console.error(`Error playing ${assetId}:`, error);
        }
      }
    } else {
      console.log(`Sound effects are off. Not playing ${assetId}.`);
    }
  }

  public click(): void {
    Haptics.impact({ style: ImpactStyle.Light });
    this.playAudio('click');
  }

  public toggle(): void {
    Haptics.impact({ style: ImpactStyle.Light });
    this.playAudio('toggle');
  }

  public success(): void {
    Haptics.impact({ style: ImpactStyle.Medium });
    this.playAudio('success');
  }

  public failure(): void {
    this.playAudio('failure');
  }
}

used with a directive:

import {Directive, HostListener} from '@angular/core';
import {AudioService} from '../services/audio-service';

@Directive({
  selector: '[clickSound]',
  standalone: true,
})
export class ClickSoundDirective {
  constructor(private audioService: AudioService) {
  }
  @HostListener('click', ['$event']) onClick(){
    this.audioService.click();
  }
}

Tested on:

Chrome MacOS ARM

Safari MacOS ARM

d3.js zooming on a line chart not updating data

I am trying to add zooming functionality to my line chart. However, after consulting the documentation and the examples provided by d3.js, my solution still only updates the scaling of the x-axis, without changing the actual displayed data. This is how I generate the chart:

export function drawHypnogram(minX, maxX, data, containerId) {
    // Declare the chart dimensions and margins.
    const width = 640;
    const height = 400;
    const marginTop = 20;
    const marginRight = 20;
    const marginBottom = 30;
    const marginLeft = 40;

    // Declare the x (horizontal position) scale.
    const x = d3.scaleLinear()
        .domain([minX, maxX])
        .range([marginLeft, width - marginRight]);

    // Declare the y (vertical position) scale.
    const y = d3.scalePoint()
        .domain(['4', '3', '2', '1', 'R', 'W'])
        .range([height - marginBottom, marginTop]);

    const line = d3.line()
        .x(d => x(d.x))
        .y(d => y(d.y));

    // Create the SVG container.
    const svg = d3.create("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("class", "hypno");

    // Add the x-axis.
    const xAxis = svg.append("g")
        .attr("transform", `translate(0,${height - marginBottom})`)
        .call(d3.axisBottom(x));

    // Add the y-axis.
    const yAxis = svg.append("g")
        .attr("transform", `translate(${marginLeft},0)`)
        .call(d3.axisLeft(y));

    svg.append("path")
        .attr("fill", "none")
        .attr("stroke", "black")
        .attr("stroke-width", 1.5)
        .attr("d", line(data));

    // Append the SVG element.
    const container = d3.select(containerId);
    container.append(() => svg.node());

    // Add zooming
    const zoom = d3.zoom()
        .scaleExtent([1, 8])
        .translateExtent([[marginLeft, marginTop], [width - marginRight, height - marginBottom]])
        .on("zoom", event => {
            const newX = event.transform.rescaleX(x);
            xAxis.call(d3.axisBottom(newX));
            svg.select("path").attr("d", line(data.map(d => ({ x: newX(d.x), y: d.y }))));
        });

    svg.call(zoom);
}

Upon initial loading, the chart looks fine:
inital view of the chart

However, after zooming in on it, only the x-scale changes:
Chart after zooming

Furthermore, there are these weird structures in the left bottom corner, as can be seen on the screenshot.
How can I get my data to change according to the x-axis?

Wait for html2canvas to finish, before showing “successful” message

(Repost from serverfault)

I’m pretty new to JavaScript development.

I have a PHP/HTML webpage where users can edit things and once they’re done, they click on “Save” and it saves changes to the database. This works well, but what I implemented, is html2canvas to save a rendered image of the current state, to display it on another page.

My problem is: Rendering and saving takes about 15 seconds right now until the image file is saved. If users close their tab before this is done, of course the rendering breaks. So I decided to display a message “Please wait for rendering”, that closes once the rendering is done.
But I can’t manage to wait until the rendering is done – I have read lots about promises, async, await and stuff but yet I don’t fully understand that functionality.

Here’s my code:

const saveButton = document.getElementById('saveButton');
saveButton.addEventListener('click', saveChanges); 
function saveChanges() {  
    // here is the code for saving data to database ...
    // then the image will be rendered  
    console.log('Start image generating')
    showSaveMessage('Öffentliche Ansicht wird generiert...'); // This creates a message box
    // setTimeout is needed, because otherwise somehow, the rendering is missing texts etc.
    setTimeout(() => {
        html2canvas(document.getElementById('map'), {
            onclone: function(document) {
                // do some CSS changes before rendering
                });
            },
            scale: 2,
            useCORS: true,
        }).then(canvas => {
            console.log('Starting to convert');
            const imgData = canvas.toDataURL('image/png');
            fetch('sources/saveimage.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ imageData: imgData })
            });
            console.log('Conversion done');
        });
    }, 200);
    hideSaveMessage(); // This closes the message box
}

Currently, the message box is closed immediately after opening it, so it doesn’t actually wait for rendering and saving the image. I also tried adding a .then after fetch, but it closes the message within 1-2 seconds, while PHP needs 10-15 seconds to actually finish the image saving.

My PHP is pretty easy:

<?php

$data = file_get_contents('php://input');
// error_log($data);
$image = explode('base64,',$data); 
file_put_contents('images/glencore/rendered.png', base64_decode($image[1]));

?>

Maybe some of you are kind enough to solve this and explain to me 🙂

Load script to Objection on startup

I tried to use objection (Frida tool) and I want to load a JavaScript script in startup

I run it objection -g com.myapp explore but when I got prompt (to use import function` the application already running, that too late

So for know I use

frida  -U  -l myScript.js -f com.myapp
exit
frida-ps -Uai
objection -g PID explore 

Is there any way to use only objection to load script on startup ?