Examples

Code

Define a ManyToOne relation in your entity.

#[ORM\ManyToOne(targetEntity: \Jits\FilesPickerManagerBundle\Entity\File::class)]
#[ORM\JoinColumn(referencedColumnName: 'id', nullable: true, onDelete: "cascade")]
#[Assert\NotBlank()]
private $cover;

Add the FilePickerType in your form with the type photo.

$builder->add('cover', \Jits\FilesPickerManagerBundle\Form\Type\FilePickerType::class, array(
    'class' => \Jits\FilesPickerManagerBundle\Entity\File::class,
    'type' => 'photo'
));

After saving the entity, you can display the photo using our fileWebPath helper

<img src="{{ event.cover|fileWebPath }}">

Code

Define a ManyToMany relation in your entity.

#[ORM\ManyToMany(targetEntity: \Jits\FilesPickerManagerBundle\Entity\File::class)]
#[ORM\JoinTable(name: 'event_photos')]
private Collection $photos;

Add the FilesPickerType in your form with the type photo.

$builder->add('photos', \Jits\FilesPickerManagerBundle\Form\Type\FilesPickerType::class, array(
    'label' => "Photos",
    'class' => \Jits\FilesPickerManagerBundle\Entity\File::class,
    'type' => 'photo',
    'init_with_n_elements' => 1,
    'multiple_selection' => true,
))

After saving the entity, you can display your files using our fileWebPath helper

{% for photo in event.photos %}
    <div class="col-4"><img src="{{ photo|fileWebPath }}" class="img-fluid"></div>
{% endfor %}

Code

Define a ManyToOne relation in your entity.

#[ORM\ManyToOne(targetEntity: \Jits\FilesPickerManagerBundle\Entity\File::class)]
#[ORM\JoinColumn(referencedColumnName: 'id', nullable: true, onDelete: "cascade")]
#[Assert\NotBlank()]
private $document;

Add the FilePickerType in your form with the type file.

$builder->add('document', \Jits\FilesPickerManagerBundle\Form\Type\FilePickerType::class, array(
    'class' => \Jits\FilesPickerManagerBundle\Entity\File::class,
    'type' => 'file'
));

After saving the entity, you can display your file using our fileWebPath helper

<a href="{{ event.document|fileWebPath }}" target="_blank">download the document</a></p>

Code

Define a ManyToMany relation in your entity.

#[ORM\ManyToMany(targetEntity: \Jits\FilesPickerManagerBundle\Entity\File::class)]
#[ORM\JoinTable(name: 'event_documents')]
private Collection $documents;

Add the FilesPickerType in your form with the type file.

$builder->add('documents', \Jits\FilesPickerManagerBundle\Form\Type\FilesPickerType::class, array(
    'label' => "Documents",
    'class' => \Jits\FilesPickerManagerBundle\Entity\File::class,
    'type' => 'file',
    'init_with_n_elements' => 1,
    'multiple_selection' => true,
))

After saving the entity, you can display your files using our fileWebPath helper

{% for document in event.documents %}
    <a href="{{ document|fileWebPath }}" target="_blank">download the document</a></p>
{% endfor %}

Open the Media Library Manager outside of a form and manage yourself the picked file response.

Code

Create a container where you will add the needed data attributes using our fpmPickerAttributes helper.

<div id="standalonePicker" {{ fpmPickerAttributes({type: "photo"})|raw }}>
    <ul class="selected-files">

    </ul>
    <a href="#" class="link-attach">Add file</a>
</div>

Options are

Stand alone picker must be initialized in your javascript.

import { StandAlonePicker } from "jits-files-picker-manager";

new StandAlonePicker(document.querySelector('#standalonePicker'), {
    filePicked : (picker, fileData) => {
        let itemEl = document.createElement('li');
        itemEl.innerHTML = `${fileData.title} (${fileData.humanSize})`
        picker.element.querySelector('.selected-files').appendChild(itemEl);
    }
});

fileData response example:

{
    "id": 19,
    "title": "FA_SANTANDER_PV_NEG_RGB.png",
    "filename": "FA_SANTANDER_PV_NEG_RGB.png",
    "libraryType": "photo",
    "section": null,
    "path": "/uploads/fpm",
    "pathSuffix": "202208",
    "extension": "png",
    "size": 32270,
    "humanSize": "31.51K",
    "src": "/uploads/fpm/202208/FA_SANTANDER_PV_NEG_RGB.png",
    "dateShort": "29/08/2022",
    "dateLong": "29/08/2022 17:04:35"
}