react-page / react-page

Next-gen, highly customizable content editor for the browser - based on React and written in TypeScript. WYSIWYG on steroids.

Home Page:https://react-page.github.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

page-editor/plugins-image - Returned Link not being set in field

IN2TEC opened this issue · comments

Hi there, I am having problems with the image upload plugin./ I followed the documentation and get the file uploaded to an amazon AWS3 bucket. I also get the link back, but for some reason the resolver doesn't save and populate the field:
Can anyone help me out?

Documentation: https://react-page.github.io/docs/#/builtin_plugins?id=background-control

I obviously must be missing something but I have no idea what

    ```
function UploadImage(file) {

    return async function (file, reportProgress) {
        // Guard Clause
        if (!file || !file?.name || !auth?.user_info?._id || !values?._id) {
            // return
            handleRegularResponse({ open: true, status: "error", message: "Parameter missing" })
            return new Promise(resolve => {
                setTimeout(() => {
                  resolve({ url: '' });
                }, 2000);
             });

        } else if (file.size > 5120000) {
            let fileSize = Math.round(file.size / 1000);
            handleRegularResponse({ open: true, status: "warning", message: `Maximum File size is limited to 5MB, yours has ${fileSize} MB` })
            return new Promise(resolve => {
                setTimeout(() => {
                  resolve({ url: '' });
                }, 2000);
             });
        }

        let url = "/api/aws/content/add"
        const formData = new FormData();
        formData.append("file", file);
        formData.append("file_name", file.name);
        formData.append("folder", values?.link);

        await axiosData.post(url, formData, {
            headers: {
                "Content-Type": "multipart/form-data",
            },
        })
            .then((response) => {
                // console.log(`Received Data ${response}`)
                // handleRegularResponse({ open: true, status: response.data.status, message:response.data.message })
                return new Promise(resolve => {
                    setTimeout(() => {
                        resolve({ url: response.data.url });
                    }, 4000);
                });
            })
            .catch(function (err) {
                handleErrorResponse(err)
                return new Promise(resolve => {
                    setTimeout(() => {
                      resolve({ url: '' });
                    }, 2000);
                 });
        });
    }
};