Upload files not working using jQuery File Upload

Question

Problem:

To set session variable and redirect user to different PHP-page once upload of .txt file has been completed using jQuery File Upload.

HTML code (upload.php):

<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Add files...</span>
    <!-- The file input field used as target for the file upload widget -->
    <input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
    <div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>

jQuery code (upload.php):

<script>    
    $(function () {
        'use strict';
        // Server-side upload handler:
        var url = 'process.php';

        $('#fileupload').fileupload({
            url: url,
            autoUpload: true,
            acceptFileTypes: /(\.|\/)(txt)$/i,
            maxFileSize: 5000000, // 5 MB
            done: function (e, data) {
                $(this).delay(2000, function(){
                    window.location = "explorer.php";
                });
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }
        }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });
</script>

PHP upload script (process.php):

<?php
    session_start();

    $folder      = 'upload';

    if (!empty($_FILES))
    {
        // Set temporary name
        $tmp    = $_FILES['files']['tmp_name'];

        // Set target path and file name
        $target = $folder . '/' . $_FILES['files']['name'];

        // Upload file to target folder
        $status = move_uploaded_file($tmp, $target);

        if ($status)
        {
            // Set session with txtfile name
            $_SESSION['txtfile'] = $_FILES['files']['name'];
        }
    }
?>

Desired output:

Text file should be uploaded to folder /upload - which currently has chmod 777
Session of text file name should be assigned to the variable $_SESSION['txtfile']
Redirect user once upload is done to the file "explorer.php"

EDIT: SOLVED. Final code above!

any error messages? what currently happens when you run this? — A.O., Oct 21 '13 at 21:01

A.O. · Accepted Answer · 2013-10-21T21:18:17.870

3

For starters...

Notice your input name is files[] and has attribute multiple. This means that you are sending an array of files to the server so to reference them in php, you'll need something like this:

$_FILES['files']['name'][0]

for the first file.

Also, I have found that move_uploaded_file() likes full paths for the destination, try tacking on $_SERVER['DOCUMENT_ROOT'].

To send information back to jQuery you would want to use echo json_encode() like so...

echo json_encode(array(
    'status' => $status,
    'message' => 'your message here'
));

In your done function the data can be accessed like this:

done: function(e, data){
     console.log(data.status);
     console.log(data.message);
}

edited Oct 21 '13 at 21:18

answered Oct 21 '13 at 21:04

A.O.

3,733
6
30
49

Ok, this solved the uploading issue. Now the file does get uploaded. But how do I send back a response to jQuery to move the person to "explorer.php"? – kexxcream Oct 21 '13 at 21:07
you could send back html, use a script to set window.location, if your current method is not working... – A.O. Oct 21 '13 at 21:08
Not sure I follow, I suspect that the "done:" part should be modified. But how would I return an answer from process.php back to jQuery? – kexxcream Oct 21 '13 at 21:11
Shouldn't I just be able to put window.location = "explorer.php"; in done:? I tried it but didn't work. Updated with new code. – kexxcream Oct 21 '13 at 21:23
you'll most likely need to provide a full address for the new location, or at least "../explorer.php".....im guessing – A.O. Oct 21 '13 at 21:26
I tried to do: window.location.href = "http://full.address.here/explorer.php"; but with no success. – kexxcream Oct 21 '13 at 21:28
It could be due to the form submitting, try adding `return false;` right after your window.location line – A.O. Oct 21 '13 at 21:30
Updated jQuery code with your suggestion but still no redirect. – kexxcream Oct 21 '13 at 21:32
not sure whats going on, have you tried using `http://www.google.com` for the url to verify that it works – A.O. Oct 21 '13 at 21:38
Progress bar gets completed, file gets uploaded, but redirect does not fire. Feels like I have written everything completely. – kexxcream Oct 21 '13 at 21:40
Solution was very easy. Remove "dataType: json" and I got it from here: http://stackoverflow.com/questions/14674999/jquery-fileupload-doesnt-trigger-done - no idea why. – kexxcream Oct 21 '13 at 21:53
One last question: is it possible to add a delay before "done:"? Just 2-3 second after uploading is complete. EDIT: managed to figure it out by reading this: http://stackoverflow.com/questions/6704553/jquery-delay-function - final code updated as well. – kexxcream Oct 21 '13 at 22:03
1

that would do it, if you arent using echo json_encode()....and for the delay, you could wrap everything inside of a `setTimeout()` – A.O. Oct 21 '13 at 22:06
I wrapped it up with the delay() instead and works like a charm. Highly appreciate your help, keep up the good work. – kexxcream Oct 21 '13 at 22:07

Upload files not working using jQuery File Upload

1 Answers1