angularfilenamesimage-uploadjodit

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


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"


Solution

  • 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);
                    }
                });
            }
        }
    }