CODEWITHSUNDEEP
javascriptphpjqueryajax
Ben
Ben

Reputation: 9001

Can't access file uploaded via jQuery AJAX

Overview

I have a label disguised as a button where a user can upload an image file to be read by the system.

Issue

The file either is not sent or cannot be accessed via PHP.

Code

HTML:

<form id='qr-reader' method='post' action='inc/qr-upload.php'>
    <input type='file' capture='camera' accept='image/*' id='cameraInput' name='cameraInput' style='width:0.1px;height:0.1px;opacity:0;position:absolute;overflow:hidden;z-index:-1;'>
    <label for='cameraInput' class='btn btn-primary btn-block'><span class='glyphicon glyphicon-qrcode'></span></label>
</form>

JavaScript/jQuery:

$(function(){
    $(document).on("change", "#cameraInput", function(){
        var $form = $("#qr-reader");
        var $el = $("#cameraInput");
        var file = $el.prop("files");

        //Check file is associated
        if(file[0].name==""||$el.val()=="") return;

        //Submit file
        var file = new FormData($form[0]);
        $.ajax({
            url: "inc/qr-upload.php",
            type: "post",
            data: file,
            contentType: false,
            processData: false,
            success: function(r){
                console.log(r);
            }
        })
    });
})

PHP (inc/qr-upload.php):

<?php

var_dump($_FILES);
var_dump($_POST);

if($_SERVER["REQUEST_METHOD"]=="POST" && isset($_FILES["cameraInput"]["type"])){
    $sourcePath = $_FILES["cameraInput"]["tmp_name"];
    $newName = hash_file("md5", $_FILES["cameraInput"]["tmp_name"]);
    $targetPath = "../qr/$newName";
    if(move_uploaded_file($sourePath,$targetPath)) exit($newName);
        else exit("error");
} else exit("invalid");

Desired result

I should see the file (and temp filename) in one of the var_dump outputs, and the file should upload to output the new filename.

Actual result

I just see two empty arrays (one for $_FILES and one for $_POST). The if statement doesn't fire, so the output is "invalid".

Upvotes: 0

Views: 236

Answers (3)

Ataur Rahman Munna
Ataur Rahman Munna

Reputation: 3917

EDIT : data: file 

$(function(){
        $(document).on("change", "#cameraInput", function(){
            var $form = $("#qr-reader");
            var $el = $("#cameraInput");
            var file = $el.prop("files");

            //Check file is associated
            if(file[0].name==""||$el.val()=="") return;

            //Submit file
            //var file = new FormData($form[0]);
            $.ajax({
                url: "inc/qr-upload.php",
                type: "post",
                data: $('#cameraInput').val(),
                contentType: false,
                processData: false,
                success: function(r){
                    console.log(r);
                }
            })
        });
    })

Upvotes: 0

user2404892
user2404892

Reputation:

Change JS file:

$(function(){
    $(document).on("change", "#cameraInput", function(){
        var $form = $("#qr-reader");
        var $el = $("#cameraInput");
        var file = $el.prop("files");

        //Check file is associated
        if(file[0].name==""||$el.val()=="") return;

        //Submit file

        $.ajax({
            url: "inc/qr-upload.php",
            type: "post",
            data: new FormData(this),
            contentType: false,
            processData: false,
            success: function(r){
                console.log(r);
            }
        })
    });
})

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337580

You're creating the FormData(), but not sending it in the request. Add data: file to the AJAX request properties.

//Submit file
var file = new FormData($form[0]);
$.ajax({
    url: "inc/qr-upload.php",
    type: "post",
    data: file, // < add this here
    contentType: false,
    processData: false,
    success: function(r){
        console.log(r);
    }
})

Upvotes: 1

Related Questions