grafikart / filemanager-element Goto Github PK
View Code? Open in Web Editor NEWA simple file browser distributed as a custom element
License: MIT License
A simple file browser distributed as a custom element
License: MIT License
Salut @Grafikart et vraiment merci pour la lib, c'est cool
ça serait cool d'avoir un bouton pour télécharger les fichiers. En effet, lorsqu'un dossier est vide, on a bien une indication qui nous signale de glisser-deposer un fichier pour uploder. Sauf que quand le dossier contient déjà un élément, on n'a plus cette indication et pour un non dev, il pourrait ne pas savoir.
Du coup, il serait bien d'avoir un bouton (+) en haut de la page ou à côté de la bar de recherche pour sélectionner un fichier ou mieux encore fournir une méthode pour déclencher l'upload, comme ça le dev pourra placer son bouton où il veut et appelé la méthode fournie lors d'un événement quelconque.
Par ailleurs, pour le moment, on ne peut uploder qu'un seul fichier à la fois. J'avais une dizaine de fichier à uploader et j'avoue que le faire de façon individuel est vraiment pénible. Serait-il donc possible d'implémenter le téléversement multiple 🙏🙏
Ajouter sur le composant un parametre : readonly.
De cette façon si readonly est true:
l'utilisateur ne pourra pas ajouter ou supprimer des dossier ou des fichiers.
Hello, tout est dans le titre :) Pour des petits fichiers, c'est instantané et du coup c cool mais pour des vidéos, et bien là, on n'a pas de progressbar pour indiquer où ça en est. Ce serait cool :).
Salut,
J'ai un petit souci avec l'explorateur de fichier (standalone). J'ai un dossier qui contient des images et un dossier, qui lui même contient des images et un dossier et qui lui même a des images.
Quand je clique sur / j'ai bien mes images mais dès que je clique sur le premier dossier j'ai cette erreur dans la console. J'ai débuggé un peu et c'est bizarre car $filesQuery.data
contient bien un objet avec des infos correspondantes à la spécification OpenAPI mais impossible d'appeler la fonction filter
dessus.
[
{
"id": "dossier-123/P1100940_5d1ceace5ddee.jpg",
"name": "P1100940_5d1ceace5ddee.jpg",
"url": "https://__MY_URL__/buckets/images/dossier-123/P1100940_5d1ceace5ddee.jpg",
"size": 392282,
"folder": "dossier-123",
"thumbnail": "https://__MY_URL__/buckets/images/dossier-123/P1100940_5d1ceace5ddee.jpg?func=cropfit&w=75&h=75&bg_color=auto"
},
{
"id": "dossier-123/P1130411_5f4f44984eb36.jpg",
"name": "P1130411_5f4f44984eb36.jpg",
"url": "https://__MY_URL__/buckets/images/dossier-123/P1130411_5f4f44984eb36.jpg",
"size": 450185,
"folder": "dossier-123",
"thumbnail": "https://__MY_URL__/buckets/images/dossier-123/P1130411_5f4f44984eb36.jpg?func=cropfit&w=75&h=75&bg_color=auto"
},
{
"id": "dossier-123/P1130413_5f4f44c1ef6a9.jpg",
"name": "P1130413_5f4f44c1ef6a9.jpg",
"url": "https://__MY_URL__/buckets/images/dossier-123/P1130413_5f4f44c1ef6a9.jpg",
"size": 379824,
"folder": "dossier-123",
"thumbnail": "https://__MY_URL__/buckets/images/dossier-123/P1130413_5f4f44c1ef6a9.jpg?func=cropfit&w=75&h=75&bg_color=auto"
},
{
"id": "dossier-123/garage-65e20efc102c3.png",
"name": "garage-65e20efc102c3.png",
"url": "https://__MY_URL__/buckets/images/dossier-123/garage-65e20efc102c3.png",
"size": 114646,
"folder": "dossier-123",
"thumbnail": "https://__MY_URL__/buckets/images/dossier-123/garage-65e20efc102c3.png?func=cropfit&w=75&h=75&bg_color=auto"
},
{
"id": "dossier-123/garage-65e20f2ae7c8d.png",
"name": "garage-65e20f2ae7c8d.png",
"url": "https://__MY_URL__/buckets/images/dossier-123/garage-65e20f2ae7c8d.png",
"size": 114646,
"folder": "dossier-123",
"thumbnail": "https://__MY_URL__/buckets/images/dossier-123/garage-65e20f2ae7c8d.png?func=cropfit&w=75&h=75&bg_color=auto"
},
{
"id": "dossier-123/harley-65e210f596ffd.jpg",
"name": "harley-65e210f596ffd.jpg",
"url": "https://__MY_URL__/buckets/images/dossier-123/harley-65e210f596ffd.jpg",
"size": 455820,
"folder": "dossier-123",
"thumbnail": "https://__MY_URL__/buckets/images/dossier-123/harley-65e210f596ffd.jpg?func=cropfit&w=75&h=75&bg_color=auto"
}
]
Je suis un peu bloqué et je n'ai pas moyen d'utiliser le filemanager.
Une idée pour solutionner le problème ?
Merci
Hello @Grafikart ,
Est-il possible d'implémenter une fonction qui retourne des icônes en aperçu pour les fichiers qui ne sont pas des images ?
Une fonction de ce type la :
function getThumbnail(url) {
const extension = url.split('.').pop().toLowerCase();
switch(extension) {
case 'jpg': case 'jpeg': case 'png': case 'gif':
return url;
case 'pdf':
return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" style="enable-background:new 0 0 496 512;" xml:space="preserve"><rect y="0" style="fill:%23FFFFFF;" width="496" height="512"/><path d="M162.8,394.1h32.1v32.1h-32.1c-23.6,0-42.7-19.2-42.7-42.7V127c0-23.6,19.2-42.7,42.7-42.7h110.5c11.4,0,22.2,4.5,30.3,12.5l60.4,60.4c8,8,12.5,18.9,12.5,30.3v99.9h-32.1v-96.2h-53.4c-11.8,0-21.4-9.6-21.4-21.4v-53.4H162.8c-5.9,0-10.7,4.8-10.7,10.7v256.5C152.1,389.3,156.9,394.1,162.8,394.1z M237.6,319.3H259c20.6,0,37.4,16.8,37.4,37.4c0,20.6-16.8,37.4-37.4,37.4h-10.7v21.4c0,5.9-4.8,10.7-10.7,10.7c-5.9,0-10.7-4.8-10.7-10.7v-32.1V330C226.9,324.1,231.7,319.3,237.6,319.3z M259,372.8c8.9,0,16-7.1,16-16c0-8.9-7.1-16-16-16h-10.7v32.1H259z M323.1,319.3h21.4c17.7,0,32.1,14.4,32.1,32.1v42.7c0,17.7-14.4,32.1-32.1,32.1h-21.4c-5.9,0-10.7-4.8-10.7-10.7V330C312.4,324.1,317.2,319.3,323.1,319.3z M344.5,404.8c5.9,0,10.7-4.8,10.7-10.7v-42.7c0-5.9-4.8-10.7-10.7-10.7h-10.7v64.1H344.5z M397.9,330c0-5.9,4.8-10.7,10.7-10.7h32.1c5.9,0,10.7,4.8,10.7,10.7s-4.8,10.7-10.7,10.7h-21.4v21.4h21.4c5.9,0,10.7,4.8,10.7,10.7c0,5.9-4.8,10.7-10.7,10.7h-21.4v32.1c0,5.9-4.8,10.7-10.7,10.7s-10.7-4.8-10.7-10.7v-42.7V330z"/></svg>`;
case 'doc': case 'docx':
return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" style="enable-background:new 0 0 496 512;" xml:space="preserve"><rect y="0" style="fill:%23FFFFFF;" width="496" height="512"/><path d="M152.1,383.9V128.1c0-5.9,4.8-10.7,10.7-10.7h106.6v53.3c0,11.8,9.5,21.3,21.3,21.3h53.3v191.8c0,5.9-4.8,10.7-10.7,10.7H162.8C156.9,394.5,152.1,389.7,152.1,383.9z M162.8,85.5c-23.5,0-42.6,19.1-42.6,42.6v255.8c0,23.5,19.1,42.6,42.6,42.6h170.5c23.5,0,42.6-19.1,42.6-42.6V188.4c0-11.3-4.5-22.2-12.5-30.2L303.1,98c-8-8-18.8-12.5-30.1-12.5H162.8z M199.4,246.1c-2.5-8.5-11.5-13.3-19.9-10.7s-13.3,11.5-10.7,19.9l32,106.6c2,6.8,8.3,11.4,15.3,11.4s13.3-4.7,15.3-11.4l16.7-55.5l16.7,55.5c2,6.8,8.3,11.4,15.3,11.4s13.3-4.7,15.3-11.4l32-106.6c2.5-8.5-2.3-17.4-10.7-19.9c-8.5-2.5-17.4,2.3-19.9,10.7L280,301.6l-16.7-55.5c-2-6.8-8.3-11.4-15.3-11.4s-13.3,4.7-15.3,11.4L216,301.6L199.4,246.1z"/></svg>`;
case 'xls': case 'xlsx':
return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" style="enable-background:new 0 0 496 512;" xml:space="preserve"><rect y="0" style="fill:%23FFFFFF;" width="496" height="512"/><path d="M152.1,383.9V128.1c0-5.9,4.8-10.7,10.7-10.7h106.6v53.3c0,11.8,9.5,21.3,21.3,21.3h53.3v191.8c0,5.9-4.8,10.7-10.7,10.7H162.8C156.9,394.5,152.1,389.7,152.1,383.9z M162.8,85.5c-23.5,0-42.6,19.1-42.6,42.6v255.8c0,23.5,19.1,42.6,42.6,42.6h170.5c23.5,0,42.6-19.1,42.6-42.6V188.4c0-11.3-4.5-22.2-12.5-30.2L303.1,98c-8-8-18.8-12.5-30.1-12.5H162.8z M223.3,240.9c-5.4-7-15.5-8.2-22.4-2.8s-8.2,15.5-2.8,22.4l29.7,38.1l-29.6,38.2c-5.4,7-4.2,17,2.8,22.4s17,4.2,22.4-2.8l24.6-31.8l24.7,31.7c5.4,7,15.5,8.2,22.4,2.8c7-5.4,8.2-15.5,2.8-22.4l-29.7-38.1l29.6-38.2c5.4-7,4.2-17-2.8-22.4c-7-5.5-17-4.2-22.4,2.8L248,272.6L223.3,240.9L223.3,240.9z"/></svg>`;
case 'mp3': case 'wav':
return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" style="enable-background:new 0 0 496 512;" xml:space="preserve"><rect y="0" style="fill:%23FFFFFF;" width="496" height="512"/><path d="M162.8,394.5h170.5c5.9,0,10.7-4.8,10.7-10.7V192.1h-53.3c-11.8,0-21.3-9.5-21.3-21.3v-53.3H162.8c-5.9,0-10.7,4.8-10.7,10.7v255.8C152.1,389.7,156.9,394.5,162.8,394.5z M120.1,128.1c0-23.5,19.1-42.6,42.6-42.6H273c11.3,0,22.2,4.5,30.2,12.5l60.3,60.3c8,8,12.5,18.8,12.5,30.2v195.5c0,23.5-19.1,42.6-42.6,42.6H162.8c-23.5,0-42.6-19.1-42.6-42.6V128.1z M248,266.7v85.2c0,4.3-2.6,8.2-6.6,9.9s-8.6,0.7-11.6-2.3l-23.5-23.5h-11.6c-5.9,0-10.7-4.8-10.7-10.7v-32c0-5.9,4.8-10.7,10.7-10.7h11.6l23.5-23.5c3.1-3.1,7.7-3.9,11.6-2.3C245.3,258.4,248,262.3,248,266.7L248,266.7z M305.1,264c7.7,13.3,12.1,28.8,12.1,45.3s-4.4,32-12.1,45.3c-4.4,7.7-14.2,10.3-21.8,5.9c-7.7-4.4-10.3-14.2-5.9-21.8c5-8.6,7.9-18.6,7.9-29.3s-2.9-20.7-7.9-29.3c-4.4-7.7-1.8-17.4,5.9-21.8S300.7,256.3,305.1,264z"/></svg>`;
case 'mp4': case 'avi':
return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" style="enable-background:new 0 0 496 512;" xml:space="preserve"><rect y="0" style="fill:%23FFFFFF;" width="496" height="512"/><path d="M333.2,394.5c5.9,0,10.7-4.8,10.7-10.7V192.1h-53.3c-11.8,0-21.3-9.5-21.3-21.3v-53.3H162.8c-5.9,0-10.7,4.8-10.7,10.7v255.8c0,5.9,4.8,10.7,10.7,10.7H333.2z M120.1,128.1c0-23.5,19.1-42.6,42.6-42.6H273c11.3,0,22.2,4.5,30.2,12.5l60.3,60.3c8,8,12.5,18.8,12.5,30.2v195.5c0,23.5-19.1,42.6-42.6,42.6H162.8c-23.5,0-42.6-19.1-42.6-42.6V128.1z M173.4,277.3c0-11.8,9.5-21.3,21.3-21.3h63.9c11.8,0,21.3,9.5,21.3,21.3V288l29.9-19.9c1.3-0.9,2.9-1.4,4.5-1.4c4.5,0,8.2,3.7,8.2,8.2v68.9c0,4.5-3.7,8.2-8.2,8.2c-1.6,0-3.2-0.5-4.5-1.4L280,330.6v10.7c0,11.8-9.5,21.3-21.3,21.3h-63.9c-11.8,0-21.3-9.5-21.3-21.3V277.3z"/></svg>`;
default:
return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" style="enable-background:new 0 0 496 512;" xml:space="preserve"><rect y="0" style="fill:%23FFFFFF;" width="496" height="512"/><path d="M333.2,394.5c5.9,0,10.7-4.8,10.7-10.7V192.1h-53.3c-11.8,0-21.3-9.5-21.3-21.3v-53.3H162.8c-5.9,0-10.7,4.8-10.7,10.7v255.8c0,5.9,4.8,10.7,10.7,10.7H333.2z M120.1,128.1c0-23.5,19.1-42.6,42.6-42.6H273c11.3,0,22.2,4.5,30.2,12.5l60.3,60.3c8,8,12.5,18.8,12.5,30.2v195.5c0,23.5-19.1,42.6-42.6,42.6H162.8c-23.5,0-42.6-19.1-42.6-42.6V128.1z"/></svg>`;
}
}
Que l'on appellerais à ce moment là : attr(img, "src", getThumbnail(img_src_value));
Pour ce type de résultat :
Bonjour @Grafikart ,
Je viens d'utiliser votre librairie dans le cadre de mon projet Symfony.
J'ai adapté tout le code et tout fonctionne bien sauf pour la suppression des images.
Dans mon api, je supprime bien l'image puis je retourne un no-content.
Mais je ne comprends pas pourquoi le filemanager ne s'actualise pas et ne supprime pas l'image dans le visuel alors qu'elle est bien supprimé du serveur.
Affichage en ligne ou grid ne change rien malheureusement.
Merci de ta réponse !
Hello !
Déjà très bonne librairie, c'est très cool.
Je ne sais pas si c'est possible, mais le problème, c'est que la librairie est finalement assez couplée avec le backend et avec la nécessité d'avoir une API qui suit une structure spécifique, ce qui n'est pas forcément pertinent.
Je propose de pouvoir réimplémenter les méthodes comme getFiles
, getFolder
, etc... La librairie n'a pas besoin de savoir si c'est une API derrière, ou juste un passage en props via un autre script JS
L'idée serait de pouvoir passer un adapter qui implémenterait une interface lors de l'enregistrement du custom component.
Si c'est le cas, la librairie utiliserait les méthodes de l'adapter, pour récupérer et interagir avec les données.
L'énorme avantage c'est que du coup, nous ne devons plus forcément suivre un schéma spécifique au niveau de l'API, le temps qu'on retourne ce qu'il faut au niveau de l'adapter, c'est bon. On peut également intégrer le client http que l'on souhaite, par exemple un client GraphQL au lieu de se limiter à une API REST.
import { FileManager, FileManagerActionsInterface } from 'filemanager-element'
import 'filemanager-element/FileManager.css'
class CustomFileManagerAdapter implements FileManagerActionsInterface {
public async getFiles() {
// Custom code here to fetch files from anything I want
// I can even use a GraphQL client here !
return myHttpClient.fetch("/api/something");
}
public async getFolders() {}
// Other methods....
}
// Here, we register the FileManager component with our custom adapter
FileManager.register({
adapter: new CustomFileManagerAdapter()
});
CustomFileManagerInterface.ts : (Should be provided by the library)
interface File {
id: string;
name: string;
url: string;
size: number;
folder: string;
thumbnail: string;
}
interface Folder {
id: string;
name: string;
parent: string | null;
}
interface FileManagerActionsInterface {
getFiles(): Promise<Array<number, File>>;
getFolders(): Promise<Array<number, Folder>>;
// Other methods ....
}
Vous en pensez quoi ?
Comment associer un header personnalité ou un token type csrf à la requête qui est envoyé au serveur pour des besoins de protection ou d'authentification!
Salut,
Avec des milliers de fichiers, il est préférable de les lister avec un système de pagination.
Ajout de l'attribut pagination
(optionnel) dans le custom element.
Paramètres additionnels dans la requête si l'attribut pagination
est intégré:
{page: 1, limit: 20}
Merci.
Salut,
J'ai eu une erreur de compilation en utilisant Webpack.
ERROR in ./node_modules/filemanager-element/FileManager.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 57
at /home/vagrant/domain.com/node_modules/filemanager-element/FileManager.css:1:6481
at Parser.error (/home/vagrant/domain.com/node_modules/postcss-values-parser/lib/parser.js:127:11)
at Parser.operator (/home/vagrant/domain.com/node_modules/postcss-values-parser/lib/parser.js:162:20)
at Parser.parseTokens (/home/vagrant/domain.com/node_modules/postcss-values-parser/lib/parser.js:245:14)
at Parser.loop (/home/vagrant/domain.com/node_modules/postcss-values-parser/lib/parser.js:132:12)
at Parser.parse (/home/vagrant/domain.com/node_modules/postcss-values-parser/lib/parser.js:51:17)
at parse (/home/vagrant/domain.com/node_modules/postcss-custom-properties/index.cjs.js:47:30)
at /home/vagrant/domain.com/node_modules/postcss-custom-properties/index.cjs.js:333:24
at /home/vagrant/domain.com/node_modules/postcss/lib/container.js:72:18
at /home/vagrant/domain.com/node_modules/postcss/lib/container.js:55:18
at Rule.each (/home/vagrant/domain.com/node_modules/postcss/lib/container.js:41:16)
at processResult (/home/vagrant/domain.com/node_modules/webpack/lib/NormalModule.js:753:19)
at /home/vagrant/domain.com/node_modules/webpack/lib/NormalModule.js:855:5
at /home/vagrant/domain.com/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /home/vagrant/domain.com/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/home/vagrant/domain.com/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/home/vagrant/domain.com/node_modules/postcss-loader/dist/index.js:96:7)
@ ./src/dashboard/js/styles/file-manager.js 1:0-45
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.69.1 compiled with 2 errors in 49283 ms
Pas d'erreur en mode watch
.
Fichier de configuration:
const path = require("path")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const { WebpackManifestPlugin } = require("webpack-manifest-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
const TerserWebpackPlugin = require("terser-webpack-plugin")
const MomentLocalesPlugin = require("moment-locales-webpack-plugin")
const build = process.env.NODE_ENV === "local"
const watch = process.env.NODE_ENV === "watch"
const output = {
path: path.resolve(__dirname, "public_html/dist/dashboard"),
publicPath: "https://statics.domain.com/dashboard/",
filename: "js/[name].[chunkhash:8].js",
assetModuleFilename: "img/[hash][ext][query]"
}
const rules = [
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 1024 // 1 Ko
}
}
},
{
test: /\.(woff2?|eot|ttf|otf|svg)$/i,
exclude: [/images/],
type: "asset/resource",
generator: {
filename: "fonts/[name][ext][query]"
}
},
{
test: /\.(s[ac]|c)ss$/i, // scss, sass or css
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "../"
}
},
"css-loader",
"postcss-loader",
"sass-loader"
]
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
]
const mode = build === false ? "development" : "production"
const target = build === false ? "web" : "browserslist"
const stats = build === false ? "errors-warnings" : "normal"
const devtool = mode !== "production" ? "source-map" : false
const manifestFilename = path.resolve(__dirname, "app/manifest-dashboard.json")
const plugins = [
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ["**/*", "!../js", "../js/auth/**"],
cleanAfterEveryBuildPatterns: ["css/*.js"],
dangerouslyAllowCleanPatternsOutsideProject: true,
protectWebpackAssets: false,
verbose: true,
dry: false
}),
new MiniCssExtractPlugin({ filename: "css/[name].[chunkhash:8].css" }),
new MomentLocalesPlugin({
localesToKeep: ["fr"],
}),
new WebpackManifestPlugin({
fileName: manifestFilename
}),
]
const styleEntries = {
"style": {
import: "./src/dashboard/js/styles/style.js",
filename: "css/[name].[chunkhash:8].js"
},
"style-dark": {
import: "./src/dashboard/js/styles/style-dark.js",
filename: "css/[name].[chunkhash:8].js"
},
"intl-tel-input": {
import: "./src/dashboard/js/styles/intl-tel-input.js",
filename: "css/[name].[chunkhash:8].js"
},
"file-manager": {
import: "./src/dashboard/js/styles/file-manager.js",
filename: "css/[name].[chunkhash:8].js"
},
}
const authEntries = {
"signup": {
import: "./src/dashboard/js/auth/signup.js",
filename: "../js/auth/[name].[chunkhash:8].js",
dependOn: "app"
},
"login": {
import: "./src/dashboard/js/auth/login.js",
filename: "../js/auth/[name].[chunkhash:8].js",
dependOn: "app"
},
"forgot-password": {
import: "./src/dashboard/js/auth/forgot-password.js",
filename: "../js/auth/[name].[chunkhash:8].js",
dependOn: "app"
},
"forgot-password-confirm": {
import: "./src/dashboard/js/auth/forgot-password-confirm.js",
filename: "../js/auth/[name].[chunkhash:8].js",
dependOn: "app"
},
"reset-password": {
import: "./src/dashboard/js/auth/reset-password.js",
filename: "../js/auth/[name].[chunkhash:8].js",
dependOn: "app"
},
}
const dashboardEntries = {
"moderators": {
import: "./src/dashboard/js/moderators/index.js",
filename: "js/moderators/[name].[chunkhash:8].js",
dependOn: "app"
},
"moderators-crud": {
import: "./src/dashboard/js/moderators/crud.js",
filename: "js/moderators/[name].[chunkhash:8].js",
dependOn: "app"
},
"newest-brands": {
import: "./src/dashboard/js/newest/brands/index.js",
filename: "js/newest/brands/[name].[chunkhash:8].js",
dependOn: "app"
},
"newest-brands-crud": {
import: "./src/dashboard/js/newest/brands/crud.js",
filename: "js/newest/brands/[name].[chunkhash:8].js",
dependOn: "app"
},
"brand-sale-points": {
import: "./src/dashboard/js/newest/brands/sale-points.js",
filename: "js/newest/brands/[name].[chunkhash:8].js",
dependOn: "app"
},
"brand-sale-point-crud": {
import: "./src/dashboard/js/newest/brands/sale-point-crud.js",
filename: "js/newest/brands/[name].[chunkhash:8].js",
dependOn: "app"
},
"newest-cars": {
import: "./src/dashboard/js/newest/cars/index.js",
filename: "js/newest/cars/[name].[chunkhash:8].js",
dependOn: "app"
},
"newest-cars-crud": {
import: "./src/dashboard/js/newest/cars/crud.js",
filename: "js/newest/cars/[name].[chunkhash:8].js",
dependOn: "app"
},
"newest-cars-show": {
import: "./src/dashboard/js/newest/cars/show.js",
filename: "js/newest/cars/[name].[chunkhash:8].js",
dependOn: "app"
},
"posts": {
import: "./src/dashboard/js/posts/index.js",
filename: "js/posts/[name].[chunkhash:8].js",
dependOn: "app"
},
"posts-crud": {
import: "./src/dashboard/js/posts/crud.js",
filename: "js/posts/[name].[chunkhash:8].js",
dependOn: "app"
},
"media-pictures": {
import: "./src/dashboard/js/media/pictures/index.js",
filename: "js/media/pictures/[name].[chunkhash:8].js",
dependOn: "app"
},
"adserver-advertisers-crud": {
import: "./src/dashboard/js/adserver/advertisers/crud.js",
filename: "js/adserver/advertisers/[name].[chunkhash:8].js",
dependOn: "app"
},
"adserver-campaigns-index": {
import: "./src/dashboard/js/adserver/campaigns/index.js",
filename: "js/adserver/campaigns/[name].[chunkhash:8].js",
dependOn: "app"
},
}
let Config = {
mode: mode,
target: target,
stats: stats,
entry: {
app: ["./src/dashboard/js/app.js"],
...styleEntries,
...authEntries,
...dashboardEntries,
},
output: output,
module: {
rules: rules
},
plugins: plugins,
devtool: devtool
}
if (mode === "production") {
Config.optimization = {
minimize: true,
minimizer: [
new TerserWebpackPlugin({
terserOptions: {
format: {
comments: false
}
},
extractComments: false
}),
new CssMinimizerPlugin()
]
}
}
if (watch === true) {
Config.watchOptions = {
ignored: /node_modules/,
poll: 1000,
}
}
module.exports = Config
Salut,
Afin d'être maintenu à jour des nouveautés de la lib, est-il possible de publier des releases en même temps que les tags ? Cela permet de watch de le repo et d'avoir une notif quand une nouvelle version est dispo.
Par défaut, Github ne permet pas de watch sur un tag.
Merci
Petite suggestion pour ajouter un attribut pour avoir un fichier déjà sélectionné à l'ouverture du filemanager. On lui passerait le path du fichier (ou du dossier seulement) et il est automatiquement chargé ;)
Salut grand manitou du code !
Comme évoqué ensemble sur ton stream, petite issue pour demander l'ajout d'un bouton d'upload pour les mobiles/tablettes où le drag and drop n'est pas possible.
Merci beaucoup pour ton travail !
120_
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.