I'm trying to use Froala's imgageUploadToS3 method to drop images into my AWS bucket.
Been struggling with this all day, and making little progress.
In my node environment, I'm using the Node-SDK to generate a hash:
async getHash(req, res) {
const configs = {
bucket: 'bucket',
keystart: 'deskbook-uploads/',
acl: 'public-read',
accessKey: process.env.AWS_S3_ID,
secretKey: process.env.AWS_S3_SECRET
}
const s3Hash = FroalaEditor.S3.getHash(configs);
res.json(s3Hash);
},
The hash is reaching my client, cool, no problems here.
Now I initialize the Froala editor with this
function initializeFroala(hashedData) {
new FroalaEditor('textarea', {
theme: 'dark',
imageAllowedTypes: ['jpeg', 'jpg', 'png'],
imageUploadToS3: hashedData,
imageUploadURL: false,
events: {
},
toolbarButtons: ['fullscreen', 'strikeThrough', 'insertImage', '|',
'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', 'textColor', 'backgroundColor', '|', 'paragraphFormat', 'align',
'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertTable', '|',
'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|']
});
}
Now when I select the insert image button and make my selection, the uploading bar flashes for a moment then displays "Parsing response failed."
The console is displaying a 400 Bad Request.
This is my CORS config on S3.
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"http://localhost:3000"
],
"ExposeHeaders": []
}
]
I've reached a wall with this one. Maybe I'm missing something really easy, not sure. Either way, Froala's documentation has been a little difficult, as it's not the most detailed.
Any help or ideas appreciated.
I was missing camel case on the keyStart prop.
keyStart: 'deskbook-uploads/',