District Core Developer DocsDistrict Core Developer Docs
Developers
Boilerplate
Modules
Bitbucket
Developers
Boilerplate
Modules
Bitbucket
  • Modules

    • ABN
    • ActivityLog
    • AnalyticsApi
    • ApiConnector
    • BlockApi
    • CategoryApi
    • CloneApi
    • CommentApi
    • ContentApi
    • Core
    • Documents
    • EmbedApi
    • Event
    • ExportApi
    • FeatureApi
    • FormApi
    • GTM
    • GalleryApi
    • HelpApi
    • Hotspot
    • IdeaSurvey
    • ImportApi
    • InteractionsApi
    • Intercom
    • MailApi
    • MapApi
    • MapSurvey
    • MediaApi
    • MenuApi
    • MetaTagApi
    • NlpApi
    • NotificationApi
    • Page
    • ParentableContent
    • PaymentApi
    • PermissionsApi
    • Postcode
    • ReCaptcha
    • Redirects
    • Renderer
    • ReportApi
    • RestrictionApi
    • RevisionApi
    • SearchApi
    • Settings
    • ShareableApi
    • Slack
    • SlugApi
    • SubscribableApi
    • Survey
    • Team
    • TenantApi
    • TestApi
    • ThemeApi
    • Timeline
    • TranslationApi
    • Update
    • Users
    • VisualisationApi
    • WorkflowApi
    • Wysiwyg

Media API module

This module provides media management capabilities, based on the package spatie/laravel-medialibrary. It handles the creation of media in application, creation of standalone files/documents and media added to models. Also provide helpers for file uploads.

Secure file upload

Look at examples in this module to see how files are getting securely uploaded (including validation and creation). All file uploads should follow these principles:

  • Use Clamav antivirus validation
  • Validate mime types
  • Validate file extension (see -> https://larasec.substack.com/p/laravel-security-file-upload-vulnerability)
  • Use the MediaService filename sanitisation that:
    • Forces rename file extensions with matching mime types.
    • Append a unique id making actual file names impossible to guess and retrieve/execute.
    • Removes unwanted characters.

Adding Image media collections

There are a few steps to follow to add image media collections to models or bundles.

Model

Ensure that your model:

  • Defines media collections under: protected array $mediaCollectionConfig = [];. See HasMediaCollectionTrait for more info.
  • Add the name of the media collection to protected array $guarded so that it will not be treated as an attribute during CRUD operations.
  • Implements Modules\MediaApi\Interfaces\HasMediaCollectionInterface and Modules\Core\Models\Interfaces\HasModelSchemaInterface
  • Uses the following traits:
    use HasModelSchema {
        getSchema as parentGetSchema;
    }

Controllers and Views

Dashboard

Create/Update Request:

  • Make sure your rules get updated with media validation:
public function rules(): array
{
    /** @var HasMediaCollectionInterface $model */
    $model = $this->getRequestModel();
    MediaApiService::alterValidationRulesWithMedia(parent::rules(), $model);
}
  • Make sure your messages get updated with media validation messages:
public function messages(): array
{
    /** @var HasMediaCollectionInterface $model */
    $model = $this->getRequestModel();
    $messages = parent::messages()
    return MediaApiService::addMediaValidationMessages($messages, $model);
}

Controller: In the create/update endpoints:

  • Make sure you use requests that validate media input (see previous section).
  • After model creation/edition, call $yourModel->updateMediaCollections($request);

View: In the related view file (e.g "preview"), add a section to display the media:

@if (! empty($model->mediaShow))
    @foreach($model->mediaShow as $collection => $items)
        @if (! empty($items))
            <x-dashboard.preview.section title="{{ $collection }}">
                @foreach($items as $item)
                    <img src="{{ $model['src'] }}" alt="{{ $model['alt'] }}" style="height: 70px; margin-right: 1rem" />
                @endforeach
            </x-dashboard.preview.section>
        @endif
    @endforeach
 @endif

Frontend

  • Add media_show to the list of attributes to be displayed on pages and blocks (if any).
  • Inside the view, you can access the collections using the media_show attribute, but you'll need to add a computed section to guard against missing images. e.g.
// ...
computed: {
    primaryImage () {
        return !!this.model.media_show.primary_image[0] ? this.model.media_show.primary_image[0].conversions.large : null
    }
}
// ...

For example model.media_show.primary_image[0].conversions.large


Edit this page
Prev
MapSurvey
Next
MenuApi