Upload a txt to Amazon S3

Question

I am using the s3 sdk to upload a string (which will be change into a txt file). It is ok using the sdk. But since the sdk is only available for new browser (eg: ie10+) I need to upload my file with another way (for old browser)

For image file I use an input (type file) and a form for the upload

<form id="urlform" enctype="multipart/form-data" method="post" target="upload_target" class="inline">
    <input type="hidden" name="key" value="{{$parent.keyurl}}">
    <input type="hidden" name="acl" value="public-read">
    <input type="hidden" name="AWSAccessKeyId" value="{{$parent.awSAccessKeyIdUrl}}">
    <input type="hidden" name="success_action_redirect" value="{{$parent.redirectionUrl}}">
    <input type="hidden" name="x-amz-meta-filename" value="{{$parent.filenameurl}}">
    <input type="hidden" name="policy" value="{{$parent.policyurl}}">
    <input type="hidden" name="signature" value="{{$parent.signatureurl}}">
    <input type="hidden" name="x-amz-security-token" value="{{$parent.urlSessionToken}}">
    <div>
        <label>
        </label>
        <input type="file" name="file" id="urlfileinput">
    </div>
</form> 

this solution only works with input type file .

For security reason I can't change the value of the input with jquery.

Is there another way to upload text (using the rest api perhaps) ?

Answer 1

I found a solution. To upload a text I had to use an inside the form with a the name "file".

<form id="disclaimerform" enctype="multipart/form-data" method="post" target="upload_target" class="inline">
    <input type="hidden" name="key" value="{{keydisclaimer}}">
    <input type="hidden" name="acl" value="public-read">
    <input type="hidden" name="AWSAccessKeyId" value="{{awSAccessKeyId}}">
    <input type="hidden" name="success_action_redirect" value="{{redirection}}">
    <input type="hidden" name="x-amz-meta-filename" value="{{disclaimerfilename}}">
    <input type="hidden" name="x-amz-security-token" value="{{session_token}}">
    <input type="hidden" name="policy" value="{{policy}}">
    <input type="hidden" name="signature" value="{{signature}}">
    <div>
        <label></label>
        <textarea style="opacity:0;" name="file" id="disclaimerinput"/>
    </div>
</form>

Answer 2

I'm curious as to why you're using a URL form to submit this to Amazon... This is hugely insecure since you're giving out your AWS Access Key to everyone. First, you need to look into using the Amazon SDK for Javascript, which should work easy enough with Angular as a dependency.

Next, you need to look into doing CORS on your S3 Bucket (cross domain resource sharing) so that you can in fact 'upload' something on S3 from anywhere without the need for authentication (be careful with this since everyone will have access to it and can upload anything, and if you don't configure it properly, can give access to other things like delete).

Lastly, you simply need to use the SDK's AWS.S3().putObject() function to upload whatever you need to your public S3 bucket.

Answer 3

You can use the formdata to send the file.

var formData = new FormData();

formData.append("key", "{{$parent.keyurl}}");
formData.append("acl", 'public-read');
formData.append("AWSAccessKeyId", '{{$parent.awSAccessKeyIdUrl}}');
formData.append("success_action_redirect", '{{$parent.redirectionUrl}}');
.........
// JavaScript file-like object...
var blob = new Blob('testSample', { type: "text/xml"});
 formData.append("file", blob);

var request = new XMLHttpRequest();
request.open("POST", "upload_target");
request.send(formData);