F
Filament•4w ago
Aivirth

Stop FilePond from appending -v<number> to file names

I'm in the process of customizing the ralphjsmit media library plugin for my needs and i noticed that my file names are always changed to be appended with -v<number> once i edit them through the ->imageEditor method of the underlying SpatieMediaLibraryFileUpload component. I managed to track the issue to the filepond configuration in the vendor/filament/forms/resources/js/components/file-upload.js file to be exact on the line 689 : 
this.$nextTick(() => {
    this.shouldUpdateState = false;

    let editingFileName = this.editingFile.name.slice(
        0,
        this.editingFile.name.lastIndexOf(".")
    );
    let editingFileExtension = this.editingFile.name
        .split(".")
        .pop();

    if (editingFileExtension === "svg") {
        editingFileExtension = "png";
    }

    const fileNameVersionRegex = /-v(\d+)/;

    if (fileNameVersionRegex.test(editingFileName)) {
        editingFileName = editingFileName.replace(
            fileNameVersionRegex,
            (match, number) => {
                const newNumber = Number(number) + 1;

                return `-v${newNumber}`;
            }
        );
    } else {
        editingFileName += "-v1";
    }

    this.pond
        .addFile(
            new File(
                [croppedImage],
                `${editingFileName}.${editingFileExtension}`,
                {
                    type:
                        this.editingFile.type ===
                            "image/svg+xml" ||
                        hasCircleCropper
                            ? "image/png"
                            : this.editingFile.type,
                    lastModified: new Date().getTime(),
                }
            )
        )
        .then(() => {
            this.closeEditor();
        })
        .catch(() => {
            this.closeEditor();
        });
});
this.$nextTick(() => {
    this.shouldUpdateState = false;

    let editingFileName = this.editingFile.name.slice(
        0,
        this.editingFile.name.lastIndexOf(".")
    );
    let editingFileExtension = this.editingFile.name
        .split(".")
        .pop();

    if (editingFileExtension === "svg") {
        editingFileExtension = "png";
    }

    const fileNameVersionRegex = /-v(\d+)/;

    if (fileNameVersionRegex.test(editingFileName)) {
        editingFileName = editingFileName.replace(
            fileNameVersionRegex,
            (match, number) => {
                const newNumber = Number(number) + 1;

                return `-v${newNumber}`;
            }
        );
    } else {
        editingFileName += "-v1";
    }

    this.pond
        .addFile(
            new File(
                [croppedImage],
                `${editingFileName}.${editingFileExtension}`,
                {
                    type:
                        this.editingFile.type ===
                            "image/svg+xml" ||
                        hasCircleCropper
                            ? "image/png"
                            : this.editingFile.type,
                    lastModified: new Date().getTime(),
                }
            )
        )
        .then(() => {
            this.closeEditor();
        })
        .catch(() => {
            this.closeEditor();
        });
});
however i have no idea which is the best way to override or change this behavior to suit my needs.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?