Topic: Upload Directly To Amazon S3

Hey Guys,

Ive been struggling to get this to work and I cracked the nut on HTML4
runtime, the rest i have yet a solution but here is the s3 implementation of html4

IE FIXES thanks to
http://www.plupload.com/punbb/viewtopic.php?id=101

STEP 1

1) in plupload.html4.js

FIND

form.setAttribute('enctype', 'multipart/form-data');

ADD Bellow

form.setAttribute('encoding', 'multipart/form-data');

2) in plupload.html4.js

FIND

Append mutlipart parameters

DELETE THIS

                plupload.each(up.settings.multipart_params, function(value, name) {
                    var input = document.createElement('input');

                    plupload.extend(input, {
                        type : 'hidden',
                        name : name,
                        value : value
                    });

                    form.appendChild(input);
                });

FIND

                // Create container for iframe
                inputContainer = document.createElement('div');
                inputContainer.id = up.id + '_iframe_container';

                // Convert extensions to mime types list
                for (i = 0; i < filters.length; i++) {
                    ext = filters[i].extensions.split(/,/);

                    for (y = 0; y < ext.length; y++) {
                        type = plupload.mimeTypes[ext[y]];

                        if (type) {
                            mimes.push(type);
                        }
                    }
                }

PASTE THIS BELLOW

                // Append mutlipart parameters
                plupload.each(up.settings.multipart_params, function(value, name) {
                    var input = document.createElement('input');

                    plupload.extend(input, {
                        type : 'hidden',
                        name : name,
                        value : value
                    });

                    inputContainer.appendChild(input);
                });

3) in plupload.html4.js

FIND

iframe.setAttribute('id', up.id + '_iframe');

PASTE BELLOW

iframe.style.display = 'none';
uploader.iframeid = up.id + '_iframe';

FIND

var n = e.target, file = uploader.currentfile, el;

REPLACE WITH

var n = document.getElementById(uploader.iframeid);
var file = uploader.currentfile, el;

FIND

file.input.removeAttribute('name');

REPLACE WITH

file.input.setAttribute('name','');

OK, now we fixed the html4 for IE and moved the appended elements
to the correct position of the div were good to continue...  cause amazon bitches when the order of the post is wrong.. drove me nutz smile


STEP 2

1) in plupload.js

FIND

buildUrl : function(url, items) {

            var query = '';

            plupload.each(items, function(value, name) {
                query += (query ? '&' : '') + encodeURIComponent(name) + '=' + encodeURIComponent(value);
            });

            if (query) {
                url += (url.indexOf('?') > 0 ? '&' : '?') + query;
            }

            return url;
},

REPLACE WITH

        buildUrl : function(url, items) {
            return url;
        },

This is because amazon does not like the appended ? file name data
eeekkk..


STEP 3

Ok I used the example folder structure for this so you may have to change paths of the js files

THIS IS PHP EXAMPLE

<?php
// Change the following to correspond to your system:
$AWS_ACCESS_KEY = 'key';
$AWS_SECRET_KEY = 'secret key';
$S3_BUCKET = 'bucketname';
$S3_FOLDER = 'folder_in_buket/'; // folder within bucket
$MAX_FILE_SIZE = 50 * 1048576; // MB size limit
$SUCCESS_REDIRECT = ' http://' . $_SERVER['SERVER_NAME'] . ($_SERVER['SERVER_PORT']=='' ? '' : ':') .
                        $_SERVER['SERVER_PORT'] . '/' . 'SendFileS3.php'/*$_SERVER['SERVER_SELF']*/ .
                        '?ok' ; // SendFileS3.php is URL from server root
// setup transfer form
$expTime = time() + (1 * 60 * 60); // now plus one hour (1 hour; 60 mins; 60secs)
$expTimeStr = gmdate('Y-m-d\TH:i:s\Z', $expTime);
// create policy document
$policyDoc = '
{"expiration": "' . $expTimeStr . '",
  "conditions": [
    {"bucket": "' . $S3_BUCKET . '"},
    ["starts-with", "$key", "' . $S3_FOLDER . '"],
    {"acl": "public-read"},
    {"success_action_redirect": "' . $SUCCESS_REDIRECT . '"}
  ]
}
';

$policyDoc = implode(explode('\r', $policyDoc));
$policyDoc = implode(explode('\n', $policyDoc));
$policyDoc64 = base64_encode($policyDoc); // encode to base 64
// create policy document signature
$sigPolicyDoc = base64_encode(hash_hmac("sha1", $policyDoc64, $AWS_SECRET_KEY, TRUE/*raw_output*/));
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="css/plupload.queue.css" type="text/css" media="screen" />
<title>Plupload - Queue widget example</title>
<style type="text/css">
body {background: #9A7C5F;}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1.3");
</script>
<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
<script type="text/javascript" src="../js/plupload.js"></script>
<script type="text/javascript" src="../js/plupload.html4.js"></script>

<script type="text/javascript">
// Custom example logic
$(function() {
    var uploader = new plupload.Uploader({
        runtimes : 'html4',
        browse_button : 'pickfiles',
        container : 'container',
        max_file_size : '<?=$MAX_FILE_SIZE;?>mb',
        chunk_size : '1mb',
        url : 'https://<?=$S3_BUCKET;?>.s3.amazonaws.com',
        multipart_params : {
            key : '<?=$S3_FOLDER;?>${filename}',
            AWSAccessKeyId : '<?=$AWS_ACCESS_KEY;?>',
            acl : 'public-read',
            success_action_redirect : '<?=$SUCCESS_REDIRECT;?>',
            policy : '<?=$policyDoc64;?>',
            signature : '<?=$sigPolicyDoc;?>'
        },
        unique_names:false,
        file_data_name : 'file',
        filters : [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip"},
            {title : "PDF files", extensions : "pdf"}
        ],
        resize : {width : 320, height : 240, quality : 90}
    });

    uploader.bind('Init', function(up, params) {
        $('#filelist').html("<div>Current runtime: " + params.runtime + "</div>");
    });

    uploader.bind('QueueChanged', function(up) {
        $.each(up.files, function(i, file) {
            $('#filelist').append(
                '<div id="' + file.id + '">' +
                file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
            '</div>');
        });
    });

    uploader.bind('UploadProgress', function(up, file) {
        $('#' + file.id + " b").html(file.percent + "%");
    });

    uploader.bind('Error', function(up, err) {
        $('#filelist').append("<div>Error: " + err.code +
            ", Message: " + err.message +
            (err.file ? ", File: " + err.file.name : "") +
            "</div>"
        );
    });

    uploader.bind('FileUploaded', function(up, file) {
        $('#' + file.id + " b").html("100%");
    });
    
    $('#uploadfiles').click(function(e) {    
        uploader.start();
        e.preventDefault();
    });
    
    uploader.init();    
    
});
</script>

</head>
<body>
<div id="container">
        <div id="filelist">No runtime found.</div>
        <br />
        <a id="pickfiles" href="#">[Select files]</a>
        <a id="uploadfiles" href="#">[Upload files]</a>
    </div>

</body>
</html>

Thats all folks Fire this bad boy up and you can upload directly to
Amazon s3.. Hope you enjoy!!

OK so there are some drawbacks and Im hoping that the community
can help me port this over to the rest of the runtimes

1) There is no chunk support in html4
2) There is no progress indicator in html4

I hope someone can help me get this to work in flash cause that
the library i originally tried with no luck

Well hope this helps you guys

Cheers!

Ricky Mataka
www.divorcetheboss.com

Re: Upload Directly To Amazon S3

Awesome work rmatakajr

Does it working in HTML4 mean it should be compatible with HTML5?

For that matter, do we care about Flash if HTML4 is working?

If the form reverts to Flash over HTML5, does that mean the HTML4 file upload ability is totally lost?

Just getting my head around this obviously smile

Would be great to see some more S3 examples from the creaters

cheers

Re: Upload Directly To Amazon S3

Thanks for this.. can u tell me what i have to change if u want to upload from one server to another sever? means remote upload from one server to another.. waiting for your reply sir.. THANKS

Re: Upload Directly To Amazon S3

Hey Guys, sorry for the delay.. busy as hell!

For 7zark7

I ended up using swfupload as my connector to Amazon s3, i could not get pupload to work with s3 through the other methods... no doubt its a great script and thats why i busted ass on getting it to work for HTML4 but i really needed the progress bar effect.. anyway you can get that implimentation here wink

http://swfupload.org/forum/generaldiscussion/2185

I really didnt test anything else but Flash and HTML4 i could not get it to work
with flash correctly and that could be because later down the road i found out i needed to store a crossdomain.xml file in the bucket to access from flash but you dont need that for the HTML 4 method, you should check out my jQuery and s3 implimentation of swfupload.. worked out awesome

downpacks

Im not sure what you mean by one server to another sever, both implimentations use s3 as the transport to server from the server running the
uploader.

I guess if you want to do this to another server you would have to impliment some sort of FTP implementation, what you could do is take the RAW examples of plupload or swfupload and then modify your server script that handles rthe upload to transport it to the destination server, thats the way i would go about it

Originally i had plupload upload to my server, then my uploader script transported it to s3... but i wanted to get my server out the equation so i moded each script to upload directly to s3, but you could revert back to the
original implimentation (simple uploader) and then use PHP ftp functionality
to move the file to the remote server.

Hope this helps
Ricky
http://www.DivorceTheBoss.com
http://www.PHPWits.com

Re: Upload Directly To Amazon S3

Hi rmatakajr,

Thank you for the share.
I believe you have already chosen swfupload as your tool for S3, but would you mind if i ask for the sample you made to work on html4 runtime.

Thanks!

Re: Upload Directly To Amazon S3

Can you show some code? THe generated code that you use to invoke the SWFUpload would be nice.

Re: Upload Directly To Amazon S3

Thank you for your most valuable post. If you provide some codes we will be more beneficial.

Re: Upload Directly To Amazon S3

wish this was doable to an ftp server instead of amazon s3 aswell smile

Re: Upload Directly To Amazon S3

Thanks for the information I would really like to see some code as well if you don't mine.  Thanks again

[url=http://copyrestaurantrecipes.org]Copy Restaurant Recipes[/url]

[url=http://partykit.org]Party Kit[/url]

Re: Upload Directly To Amazon S3

I've been searching through posts for the past half hour for something like this. Exactly what I need. Thanks for the info.

[url=http://www.stefanwest.com]Murrieta Real Estate[/url]
[url=http://www.Simi-valley-realestate.com]Simi Valley Real Estate[/url]

Re: Upload Directly To Amazon S3

Latest release has an example of how one could upload directly to S3 using Plupload.

If you want to see your issue fixed, do not report it here, do it on - GitHub.

Re: Upload Directly To Amazon S3

Thanks everybody. I can now do this easily.

Re: Upload Directly To Amazon S3

Example inside 1.4.1 release doesn't work with html 5.

For html4 it works and file appears on server. But upload doesn't see that upload was succeful and continue waiting for response.

Re: Upload Directly To Amazon S3

rmatakajr uses success_action_redirect to redirect html4 iframe to the url on his server, which on its turn apparently makes Plupload realize that upload is over. However this won't work with html5  and I described here why.

If you want to see your issue fixed, do not report it here, do it on - GitHub.

Re: Upload Directly To Amazon S3

Thanks. After using success_action_redirect it is working without any changes in html4.js.

Re: Upload Directly To Amazon S3

What are you using as a value for success_action_redirect ?

If you want to see your issue fixed, do not report it here, do it on - GitHub.

Re: Upload Directly To Amazon S3

Thanks buddies. I think it will save some of my time.

Re: Upload Directly To Amazon S3

Quite complicated to me, take some time to master it.

Re: Upload Directly To Amazon S3

Hey, it looks great, just a bit too complicated for me tongue

Tnx.

Re: Upload Directly To Amazon S3

There is much better and thoroughly commented S3 example bundled with the latest release.

If you want to see your issue fixed, do not report it here, do it on - GitHub.

Re: Upload Directly To Amazon S3

Thanks for the post!

Re: Upload Directly To Amazon S3

Very nice, thanks for sharing...

Re: Upload Directly To Amazon S3

Does this work in HTML4?

_________________________________
Arnold

Re: Upload Directly To Amazon S3

davit -
thanks for your clarification on this:

rmatakajr uses success_action_redirect to redirect html4 iframe to the url on his server, which on its turn apparently makes Plupload realize that upload is over. However this won't work with html5  and I described here why.

TotalEnthusiast

Re: Upload Directly To Amazon S3

wow! thanks a bunch! i'll be saving up time since i won't be spinning up my head on thinking of the s3 implementation.
thanks rmatakajr! smile