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

src/Entity/Event.php

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

src/Form/EventType.php

use Jits\FilesPickerManagerBundle\Form\Type\FilePickerType;
...
$builder->add('cover', FilePickerType::class, [
    'label' => "Cover",
    'class' => File::class,
    'type' => 'photo'
])

assets/app.js

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

new FilesPickerManager();

assets/app.scss

@import "~jits-files-picker-manager/filesPickerManager.min.css";

templates/event.twig.html

<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

Photos
+ add
src/Entity/Event.php

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

src/Form/EventType.php

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
])

assets/app.js

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

new FilesPickerManager();

assets/app.scss

@import "~jits-files-picker-manager/filesPickerManager.min.css";

templates/event.twig.html

<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

src/Entity/Event.php

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

src/Form/EventType.php

use Jits\FilesPickerManagerBundle\Form\Type\FilePickerType;
...
$builder->add('cover', FilePickerType::class, [
    'label' => "Document",
    'class' => File::class,
    'type' => 'file'
])

assets/app.js

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

new FilesPickerManager();

assets/app.scss

@import "~jits-files-picker-manager/filesPickerManager.min.css";

templates/event.twig.html

<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

Documents
+ add
src/Entity/Event.php

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

src/Form/EventType.php

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
])

assets/app.js

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

new FilesPickerManager();

assets/app.scss

@import "~jits-files-picker-manager/filesPickerManager.min.css";

templates/event.twig.html

<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

Photos
+ add
src/Entity/Event.php

#[ORM\Column(type: Types::JSON, nullable: true)]
private array $photosUrl = [];

src/Form/EventType.php

use Jits\FilesPickerManagerBundle\Form\Type\UrlsPickerType;
...
$builder->add('photosUrl', UrlsPickerType::class, [
    'label' => "Photos",
    'type' => 'photo',
    'init_with_n_elements' => 1,
    'multiple_selection' => true
])

assets/app.js

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

new FilesPickerManager();

assets/app.scss

@import "~jits-files-picker-manager/filesPickerManager.min.css";

templates/event.twig.html

<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*

Buy now

Commercial licence

€ 30

per project

  • Limited to 1 commercial project
  • 3 month professional support
  • Future updates*

Buy now

Extended licence

€ 75

unlimited

  • Unlimited projects
  • 1 year professional support
  • Future updates*

Buy now

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.