How to store images from a WYSIWYG editor on the backend

When dealing with images from a WYSIWYG editor, it's important to manage them efficiently to avoid orphaned files and ensure that only necessary images are stored. Here’s a strategy you can use to handle images more effectively:

1. Temporary Storage: When an image is uploaded via the WYSIWYG editor, store it temporarily. This can be done using a temporary directory or a specific media collection for unconfirmed images.

2. Track Usage: Keep track of which images are actually used in the content. This can be done by parsing the content before saving it to identify which images are referenced.

3. Confirm and Move: Once the content is saved, move only the used images to the permanent storage location or media collection. Delete any unused images from the temporary storage.

4. Cleanup: Implement a scheduled task or a cleanup script that periodically removes old, unused images from the temporary storage to prevent clutter.

Here’s a basic implementation outline using Spatie Media Library and Livewire:

public function updatedTextEditorImage()
{
    // Store the image temporarily
    $media = $this->model->addMedia($this->textEditorImage)
                         ->toMediaCollection('temporary-images');

    $this->dispatch('textEditorImageUploaded', url: $media->getUrl())->self();
}

public function saveContent($content)
{
    // Parse the content to find all image URLs
    $usedImages = $this->extractImageUrls($content);

    // Move used images to the permanent collection
    foreach ($usedImages as $imageUrl) {
        $mediaItem = $this->model->getMedia('temporary-images')
                                 ->firstWhere('getUrl', $imageUrl);

        if ($mediaItem) {
            $mediaItem->move($this->model, 'description-images');
        }
    }

    // Remove unused images from temporary storage
    $this->model->clearMediaCollectionExcept('temporary-images', $usedImages);

    // Save the content
    $this->model->update(['content' => $content]);
}

private function extractImageUrls($content)
{
    // Use a regex or DOM parser to extract image URLs from the content
    preg_match_all('/<img[^>]+src="([^">]+)"/', $content, $matches);
    return $matches[1] ?? [];
}

Key Points:

• Temporary Storage: Use a separate media collection for temporary images.
• Content Parsing: Extract image URLs from the content to determine which images are used.
• Media Management: Move only the used images to the permanent collection and clean up the rest.
• Scheduled Cleanup: Regularly clean up the temporary storage to remove any leftover images.

This approach ensures that only necessary images are stored permanently, reducing the risk of orphaned images and keeping your storage clean.