ajax-put-rackspace/upload.html at master · 216software/ajax-put-rackspace · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
    <title>Upload a file straight to Rackspace Cloud Files</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div class="container">

    <h1>Upload a file straight to rackspace</h1>

    <p>Upload URL: {upload_url}

    <p>
    <label>Pick a file to upload
        <input id="upfile" type="file" name="upfile" />
    </label>

    <div id="progress-bar" class="progress">
        <div class="progress-bar"></div>
    </div>

    <div id="download_url" class="collapse">
        <p>Download URL: {download_url}&amp;filename=jokes-about-your-mom.pdf
        <p><a class="btn btn-default" href="{download_url}&filename=jokes-about-your-mom.pdf">DOWNLOAD</a>
    </div>

    <p><a href="https://github.com/216software/ajax-put-rackspace">code available here on github</a>

</div>

<script type="text/javascript" src="//codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

<script type="text/javascript">

// Custom jQuery xhr instance to support our progress bar.
var xhr_with_progress = function() {{
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress",
        function(evt) {{
            if (!evt.lengthComputable) return;
            var percentComplete = evt.loaded / evt.total;
            $("#progress-bar div.progress-bar").css('width', String(100*percentComplete) + "%");
        }}, false);
    return xhr;
}};

$(document).ready(function() {{
    if (!window['File']) {{
        alert('Browser does not support HTML5 File API. Cannot continue.');
        return;
    }}

    $("#upfile").on('change', function (e) {{
        var file = this.files[0];
        $.ajax({{
            xhr: xhr_with_progress,
            url: '{upload_url}',
            type: 'PUT',
            data: file,
            cache: false,
            contentType: false,
            processData: false,

            success: function (data) {{
                console.debug('Upload complete -- do what you want here');
                $("div#download_url").collapse('show');
            }},

            error: function (data) {{
            }}
        }});
    }});

}});
</script>

</body>

</html>