I'm trying to implement wysiwyg text editor on react using react-draft-wysiwyg.
For uploading image using the text editor, i'm trying to post the file on uploadCallback function to S3 and return the url for the uploaded item to the editor.
But I don't know how to handle unused image (deleted before submit) that s just hanging around in my S3 bucket. Is there any good method to prevent this? I was trying to just post the image in base64 format but that seems just way to much and waste of memory.
There are a couple of ways you can solve this:
You can write a lambda function behind an API Gateway that you could call to give you pre-signed URL to post on S3. This URL will allow anyone that has this URL to upload one time to S3. When the user is ready to submit the text-editor, you would just post the attached file to S3 using the pre-signed URL.
IAmazonS3 client;
client = new AmazonS3Client(Amazon.RegionEndpoint.USEast1);
// Generate a pre-signed URL.
GetPreSignedUrlRequest request = new GetPreSignedUrlRequest
{
BucketName = bucketName,
Key = objectKey,
Verb = HttpVerb.PUT,
Expires = DateTime.Now.AddMinutes(5)
};
string url = null;
url = s3Client.GetPreSignedURL(request);
// Upload a file using the pre-signed URL.
HttpWebRequest httpRequest = WebRequest.Create(url) as HttpWebRequest;
httpRequest.Method = "PUT";
using (Stream dataStream = httpRequest.GetRequestStream())
{
// Upload object.
}
HttpWebResponse response = httpRequest.GetResponse() as HttpWebResponse;
You can find more examples at AWS S3s documentation on obtaining a pre-signed URL via a Lambda written in Java, C#, Ruby, etc..
For doing the upload to a pre-signed URL from your Reactjs app, you can find some awesome examples at this Stackoverflow post.
You can move all pending images to a bucket that has its lifecycle configured to delete objects within a certain period. Then, when the post is submitted, you can move the object from the transitory bucket to a more permanent bucket. More information on S3 object expiration can be found in their docs.