5

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.

Dong Park
  • 67
  • 1
  • 4

2 Answers2

5

There are a couple of ways you can solve this:

Obtain Pre-signed URL from a Lambda

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.

C# Lambda Example

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.

S3 Object Expiration

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.

azizj
  • 3,428
  • 2
  • 25
  • 33
-1

Each Amazon S3 bucket can be configured to delete files in certain folders after a set period of time. I would suggest pushing all temp images to a specific directory, then configure the directory to empty itself out after enough time has elapsed for your program to make use of those files. This way, you don't have to actively monitor anything - S3 will empty out the directly based on file age for you automatically.

Ben Chan
  • 240
  • 3
  • 10
  • So, an image that's stored in temp folder and then move it to a permanent folder accordingly when it's actually submitted? or is there a way to set an item to not get deleted on different level? – Dong Park Oct 16 '17 at 12:18
  • The S3 SDK has a method to copy an image from one place to another. So you could save the temp uploaded S3 key on the frontend before the user submits, then when the user submits you can tell S3 to copy the temp file to the permanent directory. So if the user submits, the file is copied to a permanent location. If the user does not submit, then the file is not copied. But in either case, the file in the temp directly gets removed after a period of time (I'd recommend 1 day just in case you need to jump in and fix a bug before it clears itself). – Ben Chan Oct 16 '17 at 12:23