Dyanmically Add Data To A Property/Option

Question

I am not sure if "property" or "option" is the correct term, but here is what I need to figure out.

Given the following:

' $.fileup({
            url: '/file/upload',
            inputID: 'upload-6',
            queueID: 'upload-6-queue',
            files: [
                {
                    id: 1,
                    name: 'Cat.jpg', // required
                    size: '254361',  // required
                    previewUrl: 'img/preview/cat.jpg',
                    downloadUrl: 'img/cat.jpg',
                    customParam: '123'
                },
                {
                    id: 2,
                    name: 'Flower.jpg', // required
                    size: '924160',     // required
                    previewUrl: 'img/preview/flower.jpg',
                    downloadUrl: 'img/flower.jpg',
                    customParam: '456'
                },
                {
                    name: 'FileUp.zip', // required
                    size: '23040',      // required
                    downloadUrl: 'https://github.com/shabuninil/fileup/archive/master.zip'
                }
            ]
        }); '

How would I add the needed information to 'files:', from an ajax call, since PHP is needed for database and file listing interaction. I know how to do the PHP side, but have no clue, how to fill the "file" property. I could add 'file: function(php data return)', but that will not fill the rest of the properties (name, size...).

Thanks,

Dave

Here is an update, in hopes it gets a reply. I have tried several ways, and getting close, but still not working correctly. Here is the code i have now:

 $.fileup({
           url: 'UpIt.php',
            inputID: 'upload-2',
            dropzoneID: 'upload-2-dropzone',
            queueID: 'upload-2-queue',
            lang: 'en',
            onSelect: function(file) {
                $('#multiple button').show();
            },
            onRemove: function(file, total, file_number) {
                alert(file_number);
                if (file === '*' || total === 1) {
                    $('#multiple button').hide();
                }
            },
            onSuccess: function(response, file_number, file) {
                
                Snarl.addNotification({
                    title: 'Upload success',
                    text: file.name,
                    icon: '<i class="fa fa-check"></i>'
                });
            },
            onError: function(event, file, file_number) {
               
                Snarl.addNotification({
                    title: 'Upload error',
                    text: file.name,
                    icon: '<i class="fa fa-times"></i>'
                });
            },
         files: LoadFiles()
         
        });
        
        function LoadFiles()
        {
             $.ajax({
                url: 'LoadFiles.php',
                type: "POST",
                dataType: 'json',
               
                success: function (FileData) {

                    return FileData;
                },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
            });
        }       

What did first was make a variable, and hard coded the array, and then use it in the "file" property, that worked very well. However, if i assigned the variable to the LoadFiles Function, it would not stick, for some reason, the script runs twice (maybe i need to use a ready), so the variable gets destroyed, and becomes undeclared. So my next way is with the above, have the property "file" get assigned right from the function call, still not working. I even put the Ajax call right in the property, and declared it a function "file: function() {ajax stuff}, but that broke the whole script.

What am i missing?

Thanks,

Dave

Answer 1

If you do an ajax call, you don't get the response immediatelly, so you don't have a value to return from your LoadFiles function.

What you need to do is turn around the flow, i.e. instead of $.fileup calling the ajax in LoadFiles, have the ajax call $.fileup when the response arrives:

//this function will initialize the fileup, when it is called with the list of files later
function initFileup(fileData) {
    $.fileup({
        url: 'UpIt.php',
        inputID: 'upload-2',
        dropzoneID: 'upload-2-dropzone',
        queueID: 'upload-2-queue',
        lang: 'en',
        onSelect: function (file) {
            $('#multiple button').show();
        },
        onRemove: function (file, total, file_number) {
            alert(file_number);
            if (file === '*' || total === 1) {
                $('#multiple button').hide();
            }
        },
        onSuccess: function (response, file_number, file) {

            Snarl.addNotification({
                title: 'Upload success',
                text: file.name,
                icon: '<i class="fa fa-check"></i>'
            });
        },
        onError: function (event, file, file_number) {

            Snarl.addNotification({
                title: 'Upload error',
                text: file.name,
                icon: '<i class="fa fa-times"></i>'
            });
        },
        files: fileData
    });
}

//this ajax call is started immediatelly and upon receiving the response data
//it will call the function initFileup to initialize the fileup
$.ajax({
    url: 'LoadFiles.php',
    type: "POST",
    dataType: 'json',

    success: function (fileData) {
        initFileup(fileData);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
    }
});