Unable to dynamically set imageUploadToS3 config of froala editor

[RamGupta07]

I'm using "vue": "^3.3.4", and "vue-froala-wysiwyg": "^4.1.1",

Issue Description:
I'm facing a challenge when using the Froala Editor's imageUploadToS3 configuration in combination with dynamically obtained presigned URLs for image uploads. Let me explain the scenario and the problem in detail:

Problem:
The imageUploadToS3 configuration is typically set during the initialization of the Froala Editor and doesn't provide an obvious way to be updated dynamically before an image upload.

Specific Use Case:
Before uploading an image to S3, I need to obtain a presigned URL from my server through an API call.
This presigned URL contains the necessary credentials and parameters for the S3 upload, such as the secret key, signature, etc.
I want to use these presigned URL parameters to dynamically set the imageUploadToS3 configuration just before the image upload process is initiated.

Current Challenge:
Since the imageUploadToS3 configuration is usually set initially, I'm struggling to find a direct way to update it with the presigned URL parameters before each image upload.
The current approach forces the Froala Editor to use the initially configured S3 URL, which results in failed uploads as the parameters are not updated dynamically.

Desired Solution:
I'm seeking guidance on how to dynamically update the imageUploadToS3 configuration just before the image upload occurs, using the parameters from the presigned URL obtained through an API call.

[muyiwaoyeniyi]

@RamGupta07 In my case, I couldn't do a direct upload. I had to upload it on my server. If you find a way to do a direct upload, let me know.

Here's what my rails controller look like

def create
        blob = ActiveStorage::Blob.create_and_upload!(io: params[:file], filename: params[:file].original_filename)
        # data-signed-id so froala adds to html tag and persists it if same html tag is pasted back into froala
        render json: {
          "data-signed-id": blob.signed_id,
          link: Rails.application.routes.url_helpers.polymorphic_url(blob, Utility::Tenant.default_url_options)
        }
end

This is the controller that imageUploadToS3 is pointing to. Whatever is returned in the object will become attributes on the image tag. So with the data-signed-id, I can tie the image upload back to an email or a template later on.

[RamGupta07]

@muyiwaoyeniyi
Here is how we can get img data and hit the api from the methods

'image.beforeUpload': (images) => {
if( images[0] instanceof Blob ){
this.imageuploaded(new File(images, "name." + this.getFileExtensionFromBlob(images[0])));
}
else{
this.imageuploaded(images.item(0));
}
},

[RamGupta07]

Also @muyiwaoyeniyi ,
Does imageMaxSize have dependency on other options? Becuase I'm using imageMaxSize: 1024 * 1024 * 1, in my editorConfig but still it is accepting images bigger than 1MB.

[antonarbus]

Very valid question. I am also interested in how to use a pre-signed URL for direct bucket upload without uploading a file to an intermediate server and then sending it to the bucket from there (more cost-effective and requires less code).