Jits Files Picker Manager Bundle for Symfony 6
For Symfony 6
Jits Files Picker Manager, a File manager Bundle for Symfony 6.
Tired of standard file input? This Symfony 6 Bundle replaces standard file input into file picker control using a
media library to manage your existing files with a built-in html5 file uploader.
Last update: 5 Sept 2022
Jits Files Picker Manager, a File manager Bundle for Symfony 6.
Tired of standard file input? This Symfony 6 Bundle replaces standard file input into file picker control using a
media library to manage your existing files with a built-in html5 file uploader.
Last update: 5 Sept 2022
Features
Jits Files Picker Manager, a File manager Bundle for Symfony 6 compatible with all modern browser > IE 11. Works with Symfony >= 6.0. Requirements: bootstrap 5 and font awesome 6 free. No jquery needed. Translated in 2 languages with possibility to extend. Reference the JS and CSS files using NPM.
Simple File Picker
Attach one file to your entity using the library with the mode « file ».
Simple Photo Picker
Attach one photo to your entity using the library with the mode « photo ».
Multiple Files Picker
Attach multiple files to your entity with a ManyToMany relation.
Media Library
Manage your files in the Media Library where you can search, delete, or upload new files.
HTML5 Upload
Drag & Drop your files in the uploader zone to easily upload new files.
Real Entity Links
Your files are stored on your server, but also listed in your database. That allows you to create real links with your existing entities.
Secure
The security of the Files Picker Manager can be defined directly in the security.yaml file.
Public URL
Get the public url to be shared of your files.
Cropping
Coming soon
Crop your images in the media library.
Standalone Picker
Use the File Picker outside a form.
URL Picker
Pick file(s) and return url(s).
AWS S3 Storage
Coming soon
Store your file on a AWS S3 Storage
Replace
Coming soon
Replace a file
Examples
Imagine you have a Event entity and you want a cover picture, a gallery of images, a legal document and a list miscellaneous documents. Let's then use the Simple Photo Picker, the Multiple Photo Picker, the Simple File Picker and the Multiple Files Picker.
Simple Photo Picker
Create a new event
use Jits\FilesPickerManagerBundle\Entity\File;
...
#[ORM\ManyToOne(targetEntity: File::class)]
#[ORM\JoinColumn(referencedColumnName: 'id', nullable: true, onDelete: "cascade")]
#[Assert\NotBlank]
private ?File $cover = null;
use Jits\FilesPickerManagerBundle\Form\Type\FilePickerType;
...
$builder->add('cover', FilePickerType::class, [
'label' => "Cover",
'class' => File::class,
'type' => 'photo'
])
import { FilesPickerManager } from "jits-files-picker-manager";
new FilesPickerManager();
@import "~jits-files-picker-manager/filesPickerManager.min.css";
<p>Title : {{ event.title }}</p>
<p>Cover Id : {{ event.cover.id }}</p>
<p>Cover File : {{ event.cover.filename }}</p>
<p>Cover Size : {{ event.cover.size }}</p>
<p>Cover HSize : {{ event.cover.size|humanFileSize }}</p>
<p>Cover Public Url : {{ event.cover|fileWebPath }}</p>
<p><img src="{{ event.cover|fileWebPath }}" style="width:200px;"></p>
Multiple Photos Picker
Create a new event
use Jits\FilesPickerManagerBundle\Entity\File;
...
#[ORM\ManyToMany(targetEntity: File::class)]
#[ORM\JoinTable(name: 'event_photos']
private Collection $photos;
use Jits\FilesPickerManagerBundle\Form\Type\FilesPickerType;
...
$builder->add('photos', FilesPickerType::class, [
'label' => "Photos",
'class' => File::class,
'type' => 'photo',
'init_with_n_elements' => 1,
'multiple_selection' => true
])
import { FilesPickerManager } from "jits-files-picker-manager";
new FilesPickerManager();
@import "~jits-files-picker-manager/filesPickerManager.min.css";
<p>Title : {{ event.title }}</p>
<div class="row">
{% for photo in event.photos %}
<div class="col-4"><img src="{{ photo|fileWebPath }}" class="img-fluid"></div>
{% endfor %}
</div>
Simple File Picker
Create a new event
use Jits\FilesPickerManagerBundle\Entity\File;
...
#[ORM\ManyToOne(targetEntity: File::class)]
#[ORM\JoinColumn(referencedColumnName: 'id', nullable: true, onDelete: "cascade")]
#[Assert\NotBlank]
private ?File $document = null;
use Jits\FilesPickerManagerBundle\Form\Type\FilePickerType;
...
$builder->add('cover', FilePickerType::class, [
'label' => "Document",
'class' => File::class,
'type' => 'file'
])
import { FilesPickerManager } from "jits-files-picker-manager";
new FilesPickerManager();
@import "~jits-files-picker-manager/filesPickerManager.min.css";
<p>Title : {{ event.title }}</p>
<p>Document Id : {{ event.document.id }}</p>
<p>Document File : {{ event.document.filename }}</p>
<p>Document Size : {{ event.document.size }}</p>
<p>Document HSize : {{ event.document.size|humanFileSize }}</p>
<p>Document Public Url : {{ event.document|fileWebPath }}</p>
<p><a href="{{ event.document|fileWebPath }}" target="_blank">download the document</a></p>
Multiple Files Picker
Create a new event
use Jits\FilesPickerManagerBundle\Entity\File;
...
#[ORM\ManyToMany(targetEntity: File::class)]
#[ORM\JoinTable(name: 'event_documents']
private Collection $documents;
use Jits\FilesPickerManagerBundle\Form\Type\FilesPickerType;
...
$builder->add('documents', FilesPickerType::class, [
'label' => "Documents",
'class' => File::class,
'type' => 'file',
'init_with_n_elements' => 1,
'multiple_selection' => true
])
import { FilesPickerManager } from "jits-files-picker-manager";
new FilesPickerManager();
@import "~jits-files-picker-manager/filesPickerManager.min.css";
<p>Title : {{ event.title }}</p>
<div class="row">
{% for photo in event.photos %}
<div class="col-4"><img src="{{ photo|fileWebPath }}" class="img-fluid"></div>
{% endfor %}
</div>
Multiple Urls Photo Picker
Create a new event
#[ORM\Column(type: Types::JSON, nullable: true)]
private array $photosUrl = [];
use Jits\FilesPickerManagerBundle\Form\Type\UrlsPickerType;
...
$builder->add('photosUrl', UrlsPickerType::class, [
'label' => "Photos",
'type' => 'photo',
'init_with_n_elements' => 1,
'multiple_selection' => true
])
import { FilesPickerManager } from "jits-files-picker-manager";
new FilesPickerManager();
@import "~jits-files-picker-manager/filesPickerManager.min.css";
<p>Title : {{ event.title }}</p>
<div class="row">
{% for url in event.photosUrl %}
<div class="col-4"><img src="{{ url }}" class="img-fluid"></div>
{% endfor %}
</div>
Multiple Files Picker
Download now
A regular license is required if you are using this plugin in one of your personal projects (including sites for your customers) and all other licenses for any commercial application (including sites, themes and apps you plan to sell).
Regular licence
€ 13
per project
- Limited to 1 project
- 1 month professional support
- Future updates*
Commercial licence
€ 30
per project
- Limited to 1 commercial project
- 3 month professional support
- Future updates*
Extended licence
€ 75
unlimited
- Unlimited projects
- 1 year professional support
- Future updates*
Contact Support
Please don't hesitate to contact us with any regarding questions, missing functionalities or other business inquiries . We are looking forward to answer your questions within 24 hours.