Skip to content

Instantly share code, notes, and snippets.

@avescodes

avescodes/S3 SWF Upload Complex Example.html

Created June 20, 2012 20:15
Download ZIP

Revisions

  1. Ryan Neufeld renamed this gist Jun 20, 2012. 1 changed file with 0 additions and 0 deletions.
    0 S3 SWF Upload Complex Example → S3 SWF Upload Complex Example.html
    View file
    File renamed without changes.
  2. @nathancolgate nathancolgate revised this gist Sep 9, 2010. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions S3 SWF Upload Complex Example
    View file
    Original file line number Diff line number Diff line change
    @@ -11,18 +11,18 @@ var queueChangeHandler = function(queue){
    // Clear out the old
    while (list.hasChildNodes()){list.removeChild(list.firstChild);}
    // Add the new
    for (i=0;i<queue.source.length;i++)
    for (i=0;i<queue.files.length;i++)
    {
    addFileToTodoList(queue.source[i].name, queue.source[i].size, i);
    addFileToTodoList(queue.files[i].name, queue.files[i].size, i);
    }
    };

    var uploadingStartHandler = function(){
    queueBytesTotal = 0;
    queueBytesLoaded = 0;
    for (i=0;i<myQueue.source.length;i++)
    for (i=0;i<myQueue.files.length;i++)
    {
    queueBytesTotal += parseInt(myQueue.source[i].size);
    queueBytesTotal += parseInt(myQueue.files[i].size);
    }
    document.getElementById('queue_size').innerHTML = readableBytes(queueBytesTotal);
    };
  3. @nathancolgate nathancolgate created this gist Apr 29, 2010.
    130 changes: 130 additions & 0 deletions S3 SWF Upload Complex Example
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,130 @@
    <script type="text/javascript">
    var queueBytesLoaded = 0;
    var queueBytesTotal = 0;
    var myQueue = null;

    var queueChangeHandler = function(queue){
    // alert('Uploading Started');
    myQueue = queue;
    // console.log("COLLECTION CHANGE!");
    var list = document.getElementById('file_todo_list');
    // Clear out the old
    while (list.hasChildNodes()){list.removeChild(list.firstChild);}
    // Add the new
    for (i=0;i<queue.source.length;i++)
    {
    addFileToTodoList(queue.source[i].name, queue.source[i].size, i);
    }
    };

    var uploadingStartHandler = function(){
    queueBytesTotal = 0;
    queueBytesLoaded = 0;
    for (i=0;i<myQueue.source.length;i++)
    {
    queueBytesTotal += parseInt(myQueue.source[i].size);
    }
    document.getElementById('queue_size').innerHTML = readableBytes(queueBytesTotal);
    };

    var uploadingFinishHandler = function(){
    document.getElementById('overall').firstChild.style.width = '100%';
    document.getElementById('overall').firstChild.firstChild.innerHTML = '100%';
    alert('All files have been successfully uploaded');
    };

    var queueClearHandler = function(queue){
    document.getElementById('overall').firstChild.style.display = 'none';
    document.getElementById('overall').firstChild.style.width = '0%';
    document.getElementById('overall').firstChild.firstChild.innerHTML = '0%';
    var list = document.getElementById('file_done_list');
    while (list.hasChildNodes()){list.removeChild(list.firstChild);}
    };

    var addFileToDoneList = function(file_name, file_size){
    var list = document.getElementById('file_done_list');
    var li = document.createElement("li");
    li.innerHTML =
    '<span class="progress"><span class="amount">100%</span></span>'+
    '<span class="file_name">'+file_name+'</span>'+
    '<span class="file_size">'+readableBytes(file_size)+'</span>';
    list.appendChild(li);
    };

    var addFileToTodoList = function(file_name, file_size, index){
    var list = document.getElementById('file_todo_list');
    var li = document.createElement("li");
    li.innerHTML =
    '<span class="progress"><span class="amount">0%</span></span>'+
    '<span class="file_name">'+file_name+'</span>'+
    '<span class="file_size">'+readableBytes(file_size)+'</span>'+
    '<span class="delete" onclick="javascript:s3_swf_1_object.removeFileFromQueue('+index+');">Delete</span>';
    list.appendChild(li);
    };

    var progressHandler = function(progress_event){
    document.getElementById('file_todo_list').firstChild.children[3].style.display = 'none';
    var current_percentage = Math.floor((parseInt(progress_event.bytesLoaded)/parseInt(progress_event.bytesTotal))*100)+'%';
    document.getElementById('file_todo_list').firstChild.firstChild.style.display = 'block';
    document.getElementById('file_todo_list').firstChild.firstChild.style.width = current_percentage;
    document.getElementById('file_todo_list').firstChild.firstChild.firstChild.innerHTML = current_percentage;

    var overall_percentage = Math.floor(((queueBytesLoaded+parseInt(progress_event.bytesLoaded))/queueBytesTotal)*100)+'%';
    document.getElementById('overall').firstChild.style.display = 'block';
    document.getElementById('overall').firstChild.style.width = overall_percentage;
    document.getElementById('overall').firstChild.firstChild.innerHTML = overall_percentage;
    };

    var uploadCompleteHandler = function(upload_options,event){
    queueBytesLoaded += parseInt(upload_options.FileSize);
    addFileToDoneList(upload_options.FileName,upload_options.FileSize);
    };

    var readableBytes = function(bytes) {
    var s = ['bytes', 'kb', 'MB', 'GB', 'TB', 'PB'];
    var e = Math.floor(Math.log(bytes)/Math.log(1024));
    return (bytes/Math.pow(1024, Math.floor(e))).toFixed(2)+" "+s[e];
    }
    </script>

    <div id="wrapper">
    <h1>Uploader</h1>
    <div id="file_lists">
    <ul id="file_done_list" class="file_list"></ul>
    <ul id="file_todo_list" class="file_list"></ul>
    </div>

    <div id="queue_size"></div>

    <div id="overall"><span class="progress"><span class="amount">10%</span></span><span id="status"></span></div>

    <%=raw s3_swf_upload_tag(
    :fileTypes => '*.jpg;*.gif;*.png;',
    :fileTypeDescs => 'Image files.',
    :onFileNotInQueue => "alert('File not found in the queue');",
    :onFileSizeLimitReached => "alert('That file is too big');",
    :onQueueChange => "queueChangeHandler(queue);",
    :onQueueSizeLimitReached => "alert('There are too many files in the queue');",
    :onQueueEmpty => "alert('You gotta have at least one file in there');",
    :onQueueClear => "queueClearHandler(queue);",
    :onUploadingStart => "uploadingStartHandler();",
    :onUploadingFinish => "uploadingFinishHandler();",
    :onSignatureIOError => "alert('There was an error');",
    :onSignatureXMLError => "alert('There was an error');",
    :onSignatureSecurityError => "alert('There was an error');",
    :onUploadError => "alert('There was an error');",
    :onUploadIOError => "alert('There was an error');",
    :onUploadSecurityError => "alert('There was an error');",
    :onUploadProgress => "progressHandler(progress_event);",
    :onUploadComplete => "uploadCompleteHandler(upload_options,event);"

    ) %>

    <div>
    <input type="submit" id="StartButton" value="Start Uploading" onclick="s3_swf_1_object.startUploading();" />
    <input type="submit" id="ResetButton" value="Clear Queue" onclick="s3_swf_1_object.clearQueue();" />
    <input type="submit" id="StopButton" value="Stop Uploading" onclick="s3_swf_1_object.stopUploading();" />
    </div>


    </div>