Cannot pass withCredentials with my POST request

[AlanJereb]

Relevant editor setting excerpt:

image: {
    class: ImageTool,
    config: {
      endpoints: {
        byFile: 'PLACEHOLDER_PATH'
      },
      additionalRequestData: {
         // none of these two work
         credentials: "include",
         withCredentials: true,
      },
      additionalRequestHeaders: {
        "Access-Control-Allow-Credentials": true,
      }
    },
  }

On the server, the req.isAuthenticated() is failing.

Any known solution?

[peakercope]

hi @AlanJereb could you please share your solution?

[AlanJereb]

hi @AlanJereb could you please share your solution?

Sure thing.

This are my client-side EditorJS's instance settings for image

image: {
        class: ImageTool,
        config: {
        /**
         * Custom uploader
         */
          uploader: {
            /**
             * Upload file to the server and return an uploaded image data
             * @param {File} file - file selected from the device or pasted by drag-n-drop
             * @return {Promise.<{success, file: {url}}>}
            */
            uploadByFile(file: File){
              const data = new FormData();
              data.append('name', 'image');
              data.append('file', file);

              return axios.post<IResponse>(
                "/data/upload/image/message", 
                data, 
                {
                  headers: {'Content-Type' : 'multipart/form-data'},
                  withCredentials: true
                }
              )
                .then((res) => {
                  return res.data;
                })
                .catch((res) => {
                  return res.data;
                });
            },
          },
        },
      },

And this is my nodeJS route (I'm uploading images to AWS S3 bucket using multer

    const storage = multer.memoryStorage();
    const upload = multer({ storage });

/////////////////////////////////////////////////////////
    // NOTE Image upload - message image
    /////////////////////////////////////////////////////////
    router.post(
        '/upload/image/message', 
        isLoggedIn, 
        upload.single('file'), 
        async (req, res) => {
            // fileType check
            if (!req.file?.mimetype.startsWith('image/')) {
                return res.status(422).json({ error: 'Only .png, .jgp, .jpeg file types permitted.'})
            } 
            // upload image
            if (req.user) {
                await uploadFile(req.file, { width: 1084, quality: 80 })
                    .then(async (result: IS3Response) => {
                        return res.status(200).json({
                          success: 1,
                          file: {
                            url: req.protocol + '://' + req.headers.host + '/data/image/uploads/' + result.Key
                          }
                        });
                    })
                    .catch(() => {
                        return res.status(400).json({ 
                          success: 0,
                         });
                    })
                ;
            }
    });
    /////////////////////////////////////////////////////////
    // NOTE Image read from S3
    /////////////////////////////////////////////////////////
    router.get('/image/uploads/:key', async (req, res) => {
        const key = req.params.key;
        const readStream = await downloadFile(key);
        readStream.pipe(res);
    });
    /////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////
// drownload file from s3
//////////////////////////////////////////////////////////////////
export const downloadFile = async (fileKey: string) => {
  // download params
  const downloadParams = {
    Bucket: bucketName as string,
    Key: fileKey
  };
  // download file from s3
  return s3.getObject(downloadParams).createReadStream();
};

[peakercope]

Thanks!
I used the same approach - implementing custom uploadByFile function