Upload text from input field

[ConquerDeveloper]

Hello, first of all, thank you so much for developing simple ajax uploader.

The plugin works just fine for me, the only issue i have is that i'm trying to upload an input text field value and i'm sending it to the server but it doesn't work. It only works when i give it a default value. For example:

data: {title: "hello world"}

but doesn't work like this:

data: {title: document.getElementById('title').value}

How can i solve this? Thank you so much for your help!!!

Here's my complete code:

function escapeTags(str) {
    return String(str)
        .replace(/&/g, '&')
        .replace(/"/g, '"')
        .replace(/'/g, ''')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
}

window.onload = function() {

    var btn = document.getElementById('uploadBtn'),
        progressBar = document.getElementById('progressBar'),
        progressOuter = document.getElementById('progressOuter');                

    var uploader = new ss.SimpleUpload({
        button: btn,
        url: 'index.php/file/upload/do_upload',
        name: 'userfile',
        method: "POST",
        data: { title: document.getElementById("title").value },
        dataType: "JSON",
        multipart: true,
        hoverClass: 'hover',
        focusClass: 'focus',
        responseType: 'JSON',
        debug: true,
        autoSubmit: false,
        startXHR: function () {
            progressOuter.style.display = 'block'; // make progress bar visible
            this.setProgressBar(progressBar);
        },
        onSubmit: function () {
            $("#upload").button("loading");                
        },
        onComplete: function (filename, response) {
            progressOuter.style.display = 'none'; // hide progress bar when upload is completed
            $("#upload").button("reset");
            if (!response) {
                console.log(filename + ' Unable to upload file ' + response);
                return;
            }

            if (response.success === true) {
                alert('<strong>' + escapeTags(filename) + '</strong>' + ' successfully uploaded.');

            } else {
                if (response.msg) {
                    console.log(escapeTags(response.msg));

                } else if (response.title) {
                    console.log(escapeTags(response.title));
                } else {
                    console.log('An error occurred and the upload failed.');
                }
            }
        },
        onError: function (response) {
            progressOuter.style.display = 'none';
            alert('Unable to upload file ' + response);
        }
    }); 
    $("#upload").click(function(){
        uploader.submit();
    });      
};

[LPology]

@ConquerDeveloper You need to use the setData() method inside of the onSubmit() callback in order to get the current value at the time the upload is submitted:

        onSubmit: function () {
            this.setData({ title: document.getElementById("title").value });
            $("#upload").button("loading");                
        },

If you just use the data option like you're currently doing, it's getting the value of the title input field at the time the uploader is initialized when the page loads, before the user ever enters anything.

Let me know if it works.

[ConquerDeveloper]

@LPology Thank you so much!!! It worked!!

[LPology]

Excellent, glad I could help.