I want to be able to send the unique name and the original file name. However, I haven't figured out how to do this. I see that plupload sends chunk, chunks and the file name ... but if unique gets turned on it only sends out the guid. This makes it difficult to reconstruct, if I don't know the file name. Anyway to send both a guid and the original filename, or at least the original extension?

Thanks!

Edit: It looks like this was asked before (http://www.plupload.com/punbb/viewtopic.php?id=214), but went unanswered.

Does the flash itself need to be updated to accomplish this? I'm not that familiar with flash, but a shot in the dark attempt didn't seem to work:

                    getFlashObj().uploadFile(lookup[file.id], plupload.buildUrl(settings.url, { name: file.target_name, unique: file.name }), {

After selecting a file from the file picker dialog it takes about 20 seconds of beachballing before the file is actually added to the queue.
Unfortunatly the upload server I am using only supports mulitpart, so I cant use the html5 upload.

Does anybody have any suggustions as to what might be causing this?

Multipart changes:
We used to have multipart disabled by default mainly since Safari 4 and Chrome 4 didn't support the possibility to send multipart encoded data using XMLHttpRequest. But new browsers have been released and people using Safari and Chrome tend to update quickly so we decided to switch multipart on by default since most users know how to handle that correctly on the server side.

Flash changes:
We pulled in a patch from Marcel Jackwerth that enables Plupload to automatically change the upload method to FileReference.upload depending on what settings you have and the file type you are uploading. This is good news for people uploading large files since it will not load the file into memory if it doesn't have to. However since Flash has a bug where it doesn't pass though cookies or have the ability to set custom headers you will have to pass though some authentication token in the upload url or similar. You can force the upload to use the UrlStream method we used before by setting urlstream_upload to false.

Other minor changes:
The unique_names setting will now retain the file extension this is vital for mapping mime types etc for uploaded files.

We added a new event called BeforeUpload this enables you to change config settings dynamically before each file gets uploaded. This has been a common request.

Longer extensions can now be used such as forcing tar.gz.

Better image scaling in Flash contributed by rcoopman.

And a lot more stuff check the changelog for details.

I'm trying to integrate plupload with a custom form, everything is working as expected, uploads, chunks etc, but I can't get post data to be sent across the submit, e.g.:

uploader_0_tmpname    p15bn78p91ontvdl9rt1i9f2kd1.tmp
uploader_0_name    file.zip
uploader_0_status    done
uploader_count    1

I've looked at the documentation but can't find anything about binding plupload data to form, am I missing something?

Thanks in advance,
Luís Sousa

I have the following problem.
My form consists of more then just the Plupload part, and also has some normal text inputs, etc. Therefor, a proper submit of the form is crucial.
When trying the demo code on the "Examples" page, my form gets submitted TWICE. Debugging it gave me the culprit: the code on line 54:

if (uploader.total.uploaded == uploader.files.length)

is being run twice. Therefor, the form gets submitted twice. I've replaced the code

$('form').submit();

with a simple

alert()

, which gives me 2 alerts.
Anyone has the same problem? Is this a bug? Or an error on my side?

Thanks!

Any ideas why?

IN SHORT, MY PROBLEM IS: setting up a Plupload widget to send its multipart request and files to the appropriate Grails controller action.

Some background:

I have a short segment of Grails code that handles multipart-form uploads:

def upload = {
        if(request.method == 'POST') {
            String result
            int cntUpload = 0
            Iterator itr = request.getFileNames();
            String dest = "C:\\Downloads\\"
            boolean success = (new File(dest)).mkdir();
            while(itr.hasNext()) {
                def file = request.getFile(itr.next());
                File destination = new File(dest + file.getOriginalFilename())
                if (!file.isEmpty()){
                    file.transferTo(destination)
                    cntUpload++
                    // success
                }
                else{    
                    // failure
                }
            }
         
            result = cntUpload + " files successfully uploaded."
            redirect(action:index,params:[message:result])
        }
    }

Here is the Grails Server Page I use to test the upload:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="layout" content="main" />
        <title>Test Upload</title>
    </head>
    <body>
        <div class="body">
            <h1>Upload File</h1>
            <g:message code="${message}" />
            <g:form method="post" action="upload" enctype="multipart/form-data">
            <input type="file" name="file_1"/><br/>
            <input type="file" name="file_2"/><br/>
            <input type="file" name="file_3"/><br/>
            <input type="file" name="file_4"/><br/>
            <input type="file" name="file_5"/><br/>
            <input type="submit"/>
            </g:form>
        </div>
    </body>
</html>

The following line:

 <g:form method="post" action="upload" enctype="multipart/form-data"> 

makes sure that the files in the multipart form are directed to the "upload" action in the controller.

To reiterate, my problem is setting up a Plupload widget to send its multipart request to the appropriate Grails controller action. I have enabled multipart in the widget javascript code, but I don't know what to use as the URL. I have tried setting the URL to the address of the action when the Grails app is running, but that does nothing.

If anyone has any ideas, please let me know. All help is appreciated. The only other thing I can think of doing is creating a .gsp file for the upload action and redirecting the widget url to it. Thanks in advance!

Uploader object is initialized in this way:

myVirgilioWall.uploader = new plupload.Uploader({
            runtimes : 'html5,flash,gears,silverlight,browserplus,html4',
            multipart: true,
            multipart_params : {service : 'people',
                                description : description,
                                channelname : myVirgilioWall.context.full_channel,
                                referrerid : 'page.' + utils.getPageOwner(),
                                callback : 'myVirgilioWall.uploadPhoto'},
            file_data_name : 'photo',
            unique_names : false,
            browse_button : 'pickfiles',
            container : 'uploadContainer',
            multi_selection : false,
            max_file_size : '5mb',
            url : 'http://faanywhere.virgilio.it/fa-fotoap … ploadphoto',
            flash_swf_url : 'http://people.virgilio.it/_ria/plupload.flash.swf',
            silverlight_xap_url : 'http://people.virgilio.it/_ria/plupload.silverlight.xap',
            filters : [
                {title : "Image files", extensions : "jpg,jpeg,gif,png,bmp,tif,tiff"}
            ]
            //resize : {width : 700, height : 700, quality : 90}
        });

In our first attempt, we got a 500 server error in the POST which followed the first OPTIONS request.
Then, following the Mozilla website
(https://developer.mozilla.org/en/HTTP_access_control),
we have made a second attempt, adding in the file plupload.html5.js this string:
xhr.withCredentials = "true";
inside the function sendBinaryBlob(blob) (line 234)
in order to allow the browser to send cookies to the server.

Now, the POST return 200 but there is no content.
Instead, we would expect a json response because the servlet returned the content correctly when we used flash runtime.

Thanks in advance for any suggestion!

1. Uploaded files are corrupted if their original  width and height less than specified in the resize settings.

2. Files also corrupted if resize option is not specified.

Are these known issues?

My application requires knowing the file's content-type -- and I'd prefer not to have to generate a list of all known file extensions and their mime types.

Is there any way to set this to the file's content type? Is this not possible due to the uploaders used?

Thanks!

-Patrick

Thanks!

I have the custom widget sending the file to my controller. The plan was to create a (paperclip) image object in the database and post a preview with AJAX. I am seeing the POST response with firebug but the browser isn't doing anything with it. It's just an "alert" now for testing.

I know this might be out of your scope but any help would be appreciated, even if it's to tell me that this is or isn't possible with regard to plupload internals.

Here is the code: http://pastebin.com/aX65NzgS

<script type="text/javascript" src="js/mootools124core.js"></script>
<script type="text/javascript" src="js/plupload.min.js"></script>
<script type="text/javascript" src="js/plupload.html5.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
    // (0) CREATE PLUPLOADER OBJECT
    var uploader = new plupload.Uploader({
        runtimes : 'html5',
        browse_button : 'pickFiles',
        container : 'container',
        drop_element : 'dropList',
        url : 'upload.php',
        max_file_size : '10mb',
        unique_names : true,
        chunk_size : '1mb'
    });

    // (1) INIT ACTIONS
    uploader.bind('Init', function(up, params){
        // FORCEFULLY NUKE GRACEFUL DEGRADING FALLBACK ON INIT
        $('fallback').destroy();
        $('container').removeClass("hidden");
    });

    // (2) ON FILES ADDED ACTION
    uploader.bind('FilesAdded', function(up, files){
        files.each(function(file, idx){
            $('dropList').adopt(
                new Element('div', {
                    id: file.id,
                    html: "Name : " + file.name + " Size : " + file.size + "<span id='progress" + file.id + "'></span>"
                })
            );
        });
    });

    // (3) ON FILE UPLOAD PROGRESS ACTION
    uploader.bind('UploadProgress', function(up, file){
        $('progress'+file.id).set("html", file.percent + "%");
    });

    // (4) UPLOAD FILES FIRE STARTER
    $('uploadFiles').addEvent('click', function(e){
        e.stop();
        uploader.start();
    });

    // (5) KICK-START PLUPLOAD
    uploader.init();
});
</script>

<!-- UPLOAD CONTAINER -->
<div id="container" class="hidden">
    Drop files below :
    <div id="dropList"></div>
    <br />
    <a id="pickFiles" href="#">[Select files]</a>
    <a id="uploadFiles" href="#">[Upload files]</a>
</div>

<!-- FALLBACK; SHOULD LOADING OF PLUPLOAD FAILS -->
<div id="fallback">
    Opps. Still on dinosaur technology? Time to update.<br />
    Place old school upload form here.
</div>

<style type="text/css">
.hidden{ display:none; }
#dropList{ background:#aaa; width:500px; height:500px; }
</style>

Here's what i did... (maybe not the best solution, but it works)

I already have Album names and ID stored in DB, so just echo these out in a dropdown within a form.
Next step is to press Next button, which posts value from the dropdown into same page.
There of course would be if - else case to vary the outcome.

As you can see below, i set general setting for uploader at runtime and thanx to if-else  i can pass some kind of variable to upload.php file, where i also have sql query to store filename AND this album ID in db.

In upload.php i use GET, and pass that to sql query.

$albumID = $_POST['mg'];
        if($albumID > 0){
            
            $htmlSource .= '<SCRIPT LANGUAGE="javascript">
                            $(function() {
                            $("#html5_uploader").pluploadQueue({
                                // General settings
                                runtimes : \'html5\',
                                url : \'upload.php?mg='.$albumID.'\',
                                max_file_size : \'3mb\',
                                chunk_size : \'1mb\',
                                unique_names : true,
                                
                                flash_swf_url : \'/plupload/js/plupload.flash.swf\',

                                filters : [
                                    {title : "Image files", extensions : "jpg,jpeg,gif,png"}
                                ]
                        
                                // Resize images on clientside if we can
                                //resize : {width : 320, height : 240, quality : 90}
                            });
                        });
                            </SCRIPT>';
            $htmlSource .= '<div id="uploadWrapper" style="float: left; margin-right: 20px;">
                                <div id="html5_uploader" style="width: 450px; height: 330px;">You browser doesnt support native upload. Try Firefox 3 or Safari 4.</div>
                            </div>
                            <br style="clear: both" />';
        }else{
            $htmlSource .= '<form method="post" action="addtosite.php">
                            <p>Valj undermeny som den ska tillh&ouml;ra: '.$selectBox4.'</p>
                            <input type="submit" value="Nästa &raquo;" />
                        </form>';
        }

Since i have almost no experience at all with PHP and JS, i thought it to be a  great challenge.
The above code isnt surely the best one around, but it solved a problem and offered me a great deal of  fun with PHP/JS/HTML

If you know another way to do this, please do share a bit of code and explanation with that.

Thanx in advance!