Open image editor after upload

Is it possible to open the image editor automaticly after an upload?

1 Reply

CyQuer•8mo ago

On SpatieMediaLibraryFileUpload Element:

->afterStateHydrated(function ($state, $livewire) {
  if ($state) {
    $livewire->js('()=>{document.firstStart=false;}');
  }
})
->afterStateUpdated(function ($livewire) {
  $livewire->js('()=>{
    if(document.firstStart){
      document.waitForElm(".filepond--action-edit-item").then((data)=>{data.click()})};
      document.firstStart=false;
  }');
})

->afterStateHydrated(function ($state, $livewire) {
  if ($state) {
    $livewire->js('()=>{document.firstStart=false;}');
  }
})
->afterStateUpdated(function ($livewire) {
  $livewire->js('()=>{
    if(document.firstStart){
      document.waitForElm(".filepond--action-edit-item").then((data)=>{data.click()})};
      document.firstStart=false;
  }');
})

App.js and registered in FilamentAsset::register

document.waitForElm = (selector) => {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                observer.disconnect();
                resolve(document.querySelector(selector));
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}
document.firstStart = true;

document.waitForElm = (selector) => {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                observer.disconnect();
                resolve(document.querySelector(selector));
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}
document.firstStart = true;

I have the following scenario: Image Editor should only open when a new image has been uploaded. Theoretically, this is quite simple with

$livewire->js(document.getElementsByClassName('filepond--action-edit-item')[0].click());

$livewire->js(document.getElementsByClassName('filepond--action-edit-item')[0].click());

but then I had the problem that there was no element with this class. Therefore I used the function: waitForElm from here https://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists So that it doesn't jump back into edit mode immediately after editing, I created the variable firstStart which is set to false after the first opening. !!! Probably there are errors with multiple FileUploads on the page !!!

Gaming

Programming

Open image editor after upload