Fine-Uploader title of the uploaded file

Question

First, i'm sorry for my bad english but I hope you'll understand my problem..

I'm trying to use FU to upload songs on a server.

I understood how worked the parameters in general but I cannot change the title of my songs. I would like that users have to select a song (only one). onSubmit, an input appears to let him select the title of his song. Until here, no problem. But after uploading this song (when the drop area shows again) when I want to upload another one, it takes the same title than the one I chose before.

I'll try to explain it better.

1. I choose a song.
2. The drop area is hidden onsubmit
3. An input appears to let the user change the title of his song
4. A OK button appears to validate when the title has benn chose
5. On click (ok button), the upload begin and the drop area is visible again
6. Same scenario
7. For the second song, whatever I enter in the input, it will take what was written in the input for the first song

Here is my code:

.on('submit', function(){
                $('.qq-upload-drop-area').hide();
                $('.qq-upload-button-selector').hide();
                $('.valider_chanson').show();
            });


        $('.valider_chanson').click(function(){    //button OK

            var input_title = $('#song_title').val();
            var dropzone_titre = $('.dropzone_titre');
            var drop_area = $('.qq-upload-drop-area');
            var upload_button = $('.qq-upload-button-selector');

            if(input_title == "")
            {
                //Titre de chanson obligatoire
                alertify.alert('Vous devez sélectionner un titre pour votre morceau');
            }
            else{
                //On recache le bouton jusqu'au prochain upload
                //$('#uploadSelectedFiles').hide();

                //On renomme le champ visible par le nom saisi
                //$('.qq-editable').text(input_title);
                //$('.qq-edit-filename').val(input_title);
                var new_input_title = $('.qq-edit-filename').val();

                //On lance l'upload
                SongsUploader.fineUploader('uploadStoredFiles');
                //dropzone_titre.hide();

                $('.valider_chanson').hide();
            }
        });

.on('upload', function(event, id, name){
                var fileItemContainer = $(this).SongUploader('getItemByFileId', id);
                var enteredTitle = $('#input_title').val();
                //enteredTitle = $(fileItemContainer).find('INPUT[name="title"]').val();
                    $(this).fineUploader('setParams', {title: enteredTitle}, id);
                //$(this).fineUploader('setName', {title: enteredTitle}, id);
                $(this).fineUploader.setName(enteredTitle, id);
                })

// I dont understand very well how the 'setParams' and 'setName' works

I would really thankfull if someone could help me.. Thanks by advance! Cordially, -B

Answer 1

You may need to reverse the parameters for setName.

Right now, you have setName(enteredTitle, id), but it should be setName(id, enteredTitle)

.on('upload', function(event, id, name){
    var fileItemContainer = $(this).SongUploader('getItemByFileId', id);
    var enteredTitle = $('#input_title').val();
    $(this).fineUploader('setParams', {title: enteredTitle}, id);
    $(this).fineUploader('setName', id, enteredTitle);
})

Source: setName in the documentation.

Update

Below is how you would set the filename and upload a single file at a time. Note that if you provide a qq-edit-filename-selector element which serves as an input element. This is already provided in the default temoplate, so you may not need to change that at all.

   <input class="qq-edit-filename-selector">

$(document).ready(function(){

    // when a user clicks this button is should trigger the upload
    $("#upload_button").on('click', function(){
        $("#fineuploader-traditional").fineUploader("uploadStoredFiles");
    });

    // but we want to hide the button until we have a file
    $("#upload_button").hide();

    $("#fineuploader-traditional").fineUploader({
        debug: true,
        multiple: false,
        template: "qq-template",
        autoUpload: false,
        request: {
            endpoint: "/uploads"
        }
    })
    .on('submit', function(event, id){
        // a file has been submitted, so let us show the upload button
        $("#upload_button").show();
    })
    .on('validate', function(){
        // Do not allow more than one file to be in the queue at a time.
        var status = [qq.status.SUBMITTING, qq.status.SUBMITTED, qq.status.QUEUED, qq.status.UPLOADING, qq.status.UPLOAD_RETRYING],
            queuedFiles = $(this).fineUploader('getUploads', {
                status: status
            });

        if (queuedFiles.length > 1) {
            alert("One at a time");
            return false;
        }
    })
    .on('complete', function(){
        // hide the button again (may want to check for success)
        $("#upload_button").hide();

    });


});

You can now click on the filename and edit it. The new filename will be sent to the server under the qqfilename parameter.