Jodit-angular editor uploads screenshots and customizes the file name with serial number

Question

Paste a screenshot on the jodit editor, I can upload the screenshot through a customized url, but currently I cannot customize the file name of these screenshots as image+serial number.

I tried adding the following settings to the jodit-editor config, but they couldn't solve it:

1.

saveSameFileNameStrategy: 'addNumber'

Try results：not work

2.

filesVariableName: function (r) {
   console.log('filesVariableName', r);
   return 'image' + r;
},

Try results：not work，It will be executed but r is always 0, and the file name has not changed.

3.

processFileName: (key, file, name) => {
   console.log('processFileName', key, file, 'image' + name);
   return [key, file, 'image' + name];
},

Try results：not work，did not execute this event

Browser:Chrome, OS: Windows, "jodit": "3.5.4", "jodit-angular": "1.11.1"

Answer 1

The prepareData function can change the file name before uploading the file to the backend, as shown below:

{
    uploader: {
        insertImageAsBase64URI: false,
        url: 'Your backend Link',
        prepareData: (formdata) => {
            let file = formdata.getAll("files[0]")[0];
            if (file.name === 'image.png') {
                let sn = 0;
                this.newFiles.forEach((f) => {
                    const num = this.getSerialNumber(f.name);
                    if (Number.isNaN(num) === false && num >= sn) {
                        sn = num + 1;
                    }
                });
                const newFileName = `image${sn}.png`;
                const tmp = file.slice(0, file.size, 'image/png');
                file = new File([tmp], newFileName, { type: "image/png" });
                this.newFiles.push(file);
                formdata.set("files[0]", file, newFileName);
            }
            return formdata;
        },
        process: (resp) => {
            return resp;
        },
        isSuccess: function (resp) {
            return !resp.errorText;
        },
        defaultHandlerSuccess: function (data) {
            const j = this.j || this;
            data.fileList.forEach((element) => {
                if (['.gif', '.png', '.jpg'].some((ext) => element.fileName.endsWith(ext))) {
                    j.s.insertImage('Your image Url/' + element.fileID, null, 800);
                }
            });
        }
    }
}