Topic: Add field for each file added

Hi. First thanks for the great work of plupload team !

I would like adding some field and input tag for each file added.
I'm trying this, but fields appear and disapear immediatly :

<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function() {
    $("#uploader").plupload({
        // General settings
        runtimes : 'html5',
        url : 'http://127.0.0.1/plupload/examples/upload.php',
        max_file_size : '10mb',
        max_file_count: 20, // user can add no more then 20 files at a time
        multiple_queues : true,
        autostart: true,
        resize : {width : 320, height : 240, quality : 90},
        sortable: true,
        // Specify what files to browse for
        filters : [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip,avi"}
        ],
        // Post init events, bound after the internal events
        init: {
            uploaded: function(up, file, info) {
                $('#' + file.id + ' .plupload_file_name').append('<label>Titre <input type="text" value="" /></label>' + '<label>Description <input type="text" value="" /></label>');
            }
        }
    });
    // Client side form validation
    $('form').submit(function(e) {
        var uploader = $('#uploader').plupload('getUploader');

        // Files in queue upload them first
        if (uploader.files.length > 0) {
            // When all files are uploaded submit form
            uploader.bind('StateChanged', function() {
                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                    $('form')[0].submit();
                }
            });
                
            uploader.start();
        } else
            alert('You must at least upload one file.');

        return false;
    });
});
</script>

I tried this too, but error occur :

    var uploader = $('#uploader').plupload('getUploader')
    uploader.bind('FileUploaded', function(up, file, response) {
        $('#' + file.id + ' .plupload_file_name').append('<label>Titre <input type="text" value="" /></label>' + '<label>Description <input type="text" value="" /></label>');
    });
g("#" + l.id).position() is null
[Stopper sur une erreur] (function(f,a,c,g,e){var h={};function...})}(window,document,plupload,jQuery));

Someone already do something like that ?

Re: Add field for each file added

For UI Widget whole list structure is "redrawn" every time file or Plupload change state. I'd suggest you try out multipart_params option (check our poor documentation page for this), it does just that - sends out additional params with every file (but on upload and not on submit).

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

Re: Add field for each file added

Hum ok... multipart_params aren't good for my use.
I would like adding 2 input text field for title and description for each of the files uploaded....

Is there an other way with plupload to do that ? Only with custom upload ?

Re: Add field for each file added

did you find a solution????

5 (edited by medy4 2011-11-01 18:01:59)

Re: Add field for each file added

The functionality to show an optional input box for each added download file, and then access the input text in the upload handler would be great.

We currently use plupload queue to allow our cusomers to associate/upload multiple files to one article and customers being customers try to add them with undescriptive names ie. book1.xlsx. This would gently force them to add something more relevant/descriptive of the attachment.

Re: Add field for each file added

Nothing new on my side, didn't work on it since my post, but I'll work on soon.

Same goal as medy4.

Re: Add field for each file added

@yannux, just do not append those hidden fields to the file list (the only thing that is recreated every time file or Plupload state changes), insert them outside the Plupload structure, but before closing </form> tag. This should solve your problem.

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

Re: Add field for each file added

You can always create your own implementation. In fact I'm not sure how to gently insert input field into our current Plupload UI design, but you can always take the code itself and add missing pieces directly.

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

Re: Add field for each file added

Yes Davit, I think I'll do this, fork of the ui widget . I'm not javascript professional but I think it'll be good . (poor english sorry)

Re: Add field for each file added

Finaly, I used custom version to add input field and bind event FileUpload to add my field value to POST request smile

Re: Add field for each file added

we are trying to accomplish the same. Can you please post your solution. Thank you.

Re: Add field for each file added

Here is my solution, using "custom plupload" :

jQuery(function($){
    
    var uploader = new plupload.Uploader({
        runtimes : 'flash',
        browse_button : 'pickfiles',
        max_file_size : '10mb',
        resize : {width : 1024, height : 0, quality : 90},
        url : '<?php echo $uploadPath;?>',
        flash_swf_url : '<?php echo $jsPath;?>plupload/js/plupload.flash.swf',
        urlstream_upload : true,
        multipart_params: {
            action : 'media-upload',
            postId : '<?php echo $this->_postId;?>'
        },
        filters : [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Audio files", extensions : "mp3,m4a"},
            {title : "Document files", extensions : "pdf"}
        ]
    });

    uploader.bind('Init', function(up, params) {
        $('#info').append("Plugin utilisé : " + params.runtime);
        $('#uploadfiles').attr('disabled', 'disabled');
    });

    uploader.bind('FilesAdded', function(up, files) {
        for (var i in files) {
            $('#filelist').append('<div style="height:75px;border-bottom:1px solid #666" id="' + files[i].id + '"> <small>Fichier :' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ')</small><b></b><i></i><div><label>Titre <input id="' + files[i].id + 'Titre" type="text" size="25" name="media[' + files[i].id + '][titre]" value="" /></label><label>Légende <input id="' + files[i].id + 'Legende" type="text" size="25" name="media[' + files[i].id + '][legende]" value="" /></label> <label><input id="' + files[i].id + 'Marquage" type="checkbox" checked="checked" name="media[' + files[i].id + '][marquage]" value="1"/><small>Copyright Journal</small></label><input type="hidden" name="media[' + files[i].id + '][uploaded]" value="0" /></div></div>');
        }
        $('#uploadfiles').removeAttr('disabled');
        $('.uploadInfos .total').html(parseInt($('.uploadInfos .total').html()) + files.length );
    });
    
    uploader.bind('UploadFile', function(up, file) {
        $.extend(up.settings.multipart_params, { legende : $('#' + file.id + 'Legende').val(), titre : $('#' + file.id + 'Titre').val(), marquage :  $('#' + file.id + 'Marquage').is(':checked')});
                
        $('.uploadInfos .envois').html(parseInt($('.uploadInfos .envois').html()) + 1 );
        $('#' + file.id).prepend('<img style="float:left;margin-right:5px" src="/wp-admin/images/wpspin_light.gif" alt="chargement en cours"/>');
    });
    
    uploader.bind('FileUploaded', function(up, file, response) {
        resJ = $.parseJSON(response.response);
        $('#' + file.id + ' i').html(' ' + resJ.reduceSize + 'Kb');        
        if (resJ.url != '' && resJ.filetype == 'image') {
            $('#' + file.id + ' img').attr('src', resJ.url);
            $('#' + file.id + ' img').attr('alt', 'aperçus image');
        }
        else if (resJ.url && resJ.filetype == 'audio') {
            //$('#' + file.id + ' img').after('Some text <b>and bold!</b>').remove();
        }
        else{
            //$('#' + file.id + ' img').attr('src', '');
            //$('#' + file.id + ' img').attr('alt', 'vignette indisponible');
        }

        if ($("#tab-gallery").html() == null) {
            $("#tab-type").after('<li id="tab-gallery"><a href="/wp-admin/media-upload.php?post_id={$this->_postId}&tab=gallery">Galerie de l\'article</a></type>');
        }
        $('#attachments-count').html(parseInt($('#attachments-count').html()) + 1);
        up.refresh();
    });

    uploader.bind('UploadProgress', function(up, file) {
        $('#' + file.id + ' b').html(file.percent + "%");
    });
    
    uploader.bind('UploadComplete', function(up, file) {
        $('#uploadfiles').attr('disabled', 'disabled');
        $('#uploadFinis').addClass('help').html("L'envois des fichiers est terminé. Cliquez sur <b>\"Galerie de l\'article\"</b> pour continuer.");
        $('.uploadInfos').css('display', 'none');
    });

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

    $('#uploadfiles').click(function(e) {
        e.preventDefault();
        uploader.start();
        $('.uploadInfos').css('display', 'block');
    });

    uploader.init();    
});

Important part are

uploader.bind('FilesAdded', function(up, files)
uploader.bind('UploadFile', function(up, file) {
        $.extend(up.settings.multipart_params,

etc...

Re: Add field for each file added

You can add field after FileUploaded event smile