CRUD with multi language media

[blondie63]

I need to create a Crud to manage some settings, each setting has multilingual text fields and also images for each language. I am using Spatie Translation and Spatie Media Library but I found these problems:
if I use 'type' => 'image', and 'withMedia' I cannot upload images like svg

if I use 'type' => 'upload', and 'withFiles(true)' then I am forced to have the fields on the table even if they are not used

What is the right way to create a Crud that meets my needs

Thanks a lot for the help

[backpack-ai-bot[bot]]

Based on the knowledge sources, I can see you're trying to create a CRUD with multilingual support that includes both text fields and images for each language, using Spatie's Translation and Media Library packages with Backpack.

Challenges with Multilingual Media in Backpack

There are some known issues when working with translatable fields and media uploads in Backpack:

1. Image field with withMedia and SVG support:
   The withMedia option works with Spatie Media Library but may have limitations with SVG files based on your configuration.

2. Upload field with withFiles:
   Using withFiles(true) requires database columns to store the file paths, which you mentioned you don't want to use if they're not needed.

Possible Solutions

For SVG Support with Media Library

If you're using withMedia but can't upload SVG files, you need to ensure that SVG is included in your allowed mime types. Based on the issues mentioned in the knowledge sources, you can try:

[
    'name'  => 'image',
    'type'  => 'image',
    'withMedia' => [
        'displayConversions' => 'thumbnail',
        'mimeTypes' => 'jpeg,png,jpg,gif,svg'
    ]
]

For Multilingual Media

There are a few approaches you can consider:

1. Using Spatie Media Library with Collections:

   You can define different media collections for each language. This approach is mentioned in the community discussions:

[
    'name'  => 'image',
    'type'  => 'image',
    'withMedia' => [
        'collection' => 'image_' . app()->getLocale(),
        'displayConversions' => 'thumbnail'
    ]
]

2. Custom Implementation:

   Based on this GitHub issue, there was a solution for translatable upload fields where you need to return the value in the mutator:

public function setImageAttribute($value)
{
    $attribute_name = "image";
    $disk = "uploads";
    $destination_path = "uploads/".$this->table;
    
    // Your upload logic here
    
    // Return the attribute value for translation
    return $this->attributes['image'];
}

3. Using the Backpack Media Library Uploaders Package:

   Backpack has a dedicated package for Spatie Media Library integration called backpack/medialibrary-uploaders which might help with your use case. This is mentioned in this GitHub issue.

Current Limitations

It's worth noting that there are some ongoing issues with the integration between Backpack's upload fields and Spatie's Media Library, especially in relationship fields as mentioned in this GitHub issue. The Backpack team is working on a major refactoring of the uploader functionality to address these issues.

Recommendation

Based on the available information, I would recommend:

1. Use backpack/medialibrary-uploaders package for better integration with Spatie Media Library
2. Define separate media collections for each language
3. Make sure SVG is included in your allowed mime types
4. Consider using the custom mutator approach if you're still facing issues

If you continue to experience problems, you might want to wait for the upcoming uploader refactoring that the Backpack team is working on, as mentioned in several of the GitHub issues.

ℹ️ Please note our AI Bot does not reply to follow-ups, this will be the only AI answer in this thread. If the AI helped you find the answer, please mark it as answered or write details below so it can learn. Then close the conversation. If not, please give more information for when a human reads this. ℹ️

Relevant sources:

Github Issue (closed): [Bug] upload_multiple field translation missing
Github Issue (open): [BUG] ValidUploadMultiple - False validation while updating
3. Advanced Features|Other Features Part 1
Github Issue (closed): [Bug] Image in a relationship model does not work with Spatie/MediaLibrary
Github Issue (closed): [Bug] MorphOne workaround relation is not saved despite online demo example
Github Issue (closed): Translatable fields
Github Issue (closed): Check if spatie/media-library works with current Backpack fields
Github Issue (closed): [Bug] Multiple upload in a relationship does not work with Spatie/MediaLibrary
crud image type field & path
Github Issue (open): [Bug] crud-api doesn't work properly with upload fields.
Spatie Media Column
Github Issue (closed): Image field and HasTraslation trait issue
Github Issue (closed): Translatable field + file upload field = NOT WORKING :(
Tab/Field minimized
Github Issue (closed): Upload files or images translation

[karandatwani92]

Hey @blondie63

AFAIK, the Spatie Media Library doesn't save files per translation. You can use 'type' => 'upload' with withFiles(true) and add it to $translatable in the model.

Yes, this will need a column in the DB and you will find it working separately for each language.