Search code examples
file-uploadplayframeworkswfupload

Using swfupload with the Playframework and a Mac


I am trying to implement SWFUpload using the Play! framework and a Mac. When using a Mac I get a 302 error (Upload Error: 302). This seems, I think, to come from the redirect that happens by getting the upload page of the Play! framework (as it is translated from the routes file?).

It works fine on IE on Windows.

I have searched a lot, and read a lot, but haven't found if there is a particular solution. Are there any suggestions on how to implement this, or any suggestions for another simple to implement file uploader (for big field, with progress)?

EDIT:

I have tried both Safari and Firefox on my Macbook and both return as status the 302 upload error. I tried again on Windows with IE and it works fine.

The html (stylesheet) code:

#{extends 'main.html' /}
#{set title: 'Upload Media File' /}

<script type="text/javascript" src="/public/swfupload/swfupload.js"></script>
<script type="text/javascript" src="/public/swfupload/swfupload.queue.js"></script>
<script type="text/javascript" src="/public/swfupload/fileprogress.js"></script>
<script type="text/javascript" src="/public/swfupload/handlers.js"></script>

<script type="text/javascript">
    var swfu;

    window.onload = function() {
    var settings = {
    flash_url : "/public/swfupload/swfupload.swf",
    flash9_url : "/public/swfupload/swfupload_fp9.swf",
    upload_url: "doUpload",
    file_post_name: "data",
    post_params: {"article.id" : "${article?.id}"},
    file_size_limit : "1000 MB",
    file_types : "*.*",
    file_types_description : "All Files",
    file_upload_limit : 1,
    file_queue_limit : 0,
    custom_settings : {
    progressTarget : "fsUploadProgress",
    cancelButtonId : "btnCancel"
    },
    debug: false,

    // Button settings
    button_image_url: "/public/swfupload/TestImageNoText_65x29.png",
    button_width: "65",
    button_height: "29",
    button_placeholder_id: "spanButtonPlaceHolder",
    button_text: '<span>Start</span>',
    button_text_style: ".theFont { font-size: 16; }",
    button_text_left_padding: 12,
    button_text_top_padding: 3,

    // The event handler functions are defined in handlers.js
    swfupload_preload_handler : preLoad,
    swfupload_load_failed_handler : loadFailed,
    file_queued_handler : fileQueued,
    file_queue_error_handler : fileQueueError,
    file_dialog_complete_handler : fileDialogComplete,
    upload_start_handler : uploadStart,
    upload_progress_handler : uploadProgress,
    upload_error_handler : uploadError,
    upload_success_handler : uploadSuccess,
    upload_complete_handler : uploadComplete,
    queue_complete_handler : queueComplete  // Queue plugin event
    };

    swfu = new SWFUpload(settings);
    };

</script>

<h2 class="title">#{get 'title' /}</h2>
<div style="clear: both;">&nbsp;</div>
#{form @index(), id:'uploadForm', enctype:'multipart/form-data'}
<div class="entity">
    <p>This page demonstrates a simple usage of SWFUpload.  It uses the Queue Plugin to simplify uploading or cancelling all queued files.</p>

    <div class="fieldset flash" id="fsUploadProgress">
        <span class="legend">Upload Queue</span>
    </div>
    <div id="divStatus">0 Files Uploaded</div>
    <div>
        <span id="spanButtonPlaceHolder"></span>
        <input id="btnCancel" type="button" value="Cancel All Uploads" onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;" />
    </div>
</div>
#{/form}

The entry in the routes file (the Articles.upload is the screen, the doUpload is called by swfupload):

GET     /admin/articles/{id}/upload             Articles.upload
POST    /admin/articles/doUpload                Articles.doUpload

EDIT 2: I also tried Uploadify, which returns the same error. Is there anybody who knows a workaround for the Play! framework or an uploader that does work with Play!


Solution

  • There is html 5 uploader at http://www.uploadify.com which can be downloaded for $5, and it works perfect for me so far.