javascript - Upload a txt to Amazon S3 - Stack Overflow

admin管理员组

文章数量:1026989

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) ?

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) ?

• javascript
• angularjs
• amazon-s3

Share Improve this question Follow edited May 6, 2014 at 22:03 Maykonn 2,94877 gold badges3535 silver badges5252 bronze badges asked Apr 25, 2014 at 8:21 BironDavidBironDavid 50355 silver badges1919 bronze badges 3

• This could eventually help you: stackoverflow./questions/14882713/… – Julien Commented May 2, 2014 at 7:37
• Can you clarify exactly how you want the upload to behave, from the user's point of view? Why are you trying to change the value of the file input with jQuery? – Michal Charemza Commented May 3, 2014 at 7:17
• 1 Why don't you try to execute an AJAX request to server code realize the upload? It will improve the security, because really will hide the key and others options. – Maykonn Commented May 6, 2014 at 21:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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.

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);

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>

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) ?

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) ?

• javascript
• angularjs
• amazon-s3

Share Improve this question Follow edited May 6, 2014 at 22:03 Maykonn 2,94877 gold badges3535 silver badges5252 bronze badges asked Apr 25, 2014 at 8:21 BironDavidBironDavid 50355 silver badges1919 bronze badges 3

• This could eventually help you: stackoverflow./questions/14882713/… – Julien Commented May 2, 2014 at 7:37
• Can you clarify exactly how you want the upload to behave, from the user's point of view? Why are you trying to change the value of the file input with jQuery? – Michal Charemza Commented May 3, 2014 at 7:17
• 1 Why don't you try to execute an AJAX request to server code realize the upload? It will improve the security, because really will hide the key and others options. – Maykonn Commented May 6, 2014 at 21:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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.

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);

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>

本文标签： javascriptUpload a txt to Amazon S3Stack Overflow