Get file upload name and extension in JS

Question

I have a upload image form which is being posted through some AJAX. I am trying to get the uploaded file name and extension to further process it into PHP file. I just can't get the correct function to retrieve Uploaded file name and extension or size. This is what i have tried. Any one please.

form

<div class="modal-body">
                    <form data-toggle="validator" action="api/update.php" method="put" enctype="multipart/form-data">
                        <input type="hidden" name="id" class="edit-id">

                        <div class="form-group">
                            <label class="control-label" for="title">Name:</label>
                            <input type="text" name="cat_name" class="form-control" data-error="Please enter title." required />
                            <div class="help-block with-errors"></div>
                        </div>

                        <div class="form-group">
                            <label class="control-label" for="title">Image:</label>
                            <!-- <textarea name="description" class="form-control" data-error="Please enter description." required></textarea>-->
                            <input class="inputField" type="file" id="file" name="file" class="form-control" required>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div>
                        <label>Type:</label>
                        <input type="radio" name="type" value="1" > Special
                        <input  type="radio" name="type" value="0"> Ordinary
                        </div>
                        <br>

<div>
                        <label>Switch:</label>
                        <input type="radio" name="switch" value="1">  On
                        <input  type="radio" name="switch" value="0"> Off
</div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success crud-submit-edit">Submit</button>
                        </div>

                    </form>

                </div>

AJAX

$(".crud-submit-edit").click(function(e){

    e.preventDefault();
    var form_action = $("#edit-item").find("form").attr("action");
    var name = $("#edit-item").find("input[name='cat_name']").val();
    var image = $("#edit-item").find("input[name='file']").val();
    var type = $("#edit-item").find("input[name='type']:checked").val();
    console.log(type);
    var switches=$("#edit-item").find("input[name='switch']:checked").val();
    console.log(switches);
     var id = $("#edit-item").find(".edit-id").val();

    if(name != '' && type != ''){
        $.ajax({
            dataType: 'json',
            type:'POST',
            url: url + form_action,
            data:{cat_name:name,cat_image:image ,cat_type:type,cat_switch:switches,id:id}
        }).done(function(data){
            getPageData();
            $(".modal").modal('hide');
            toastr.success('Item Updated Successfully.', 'Success Alert', {timeOut: 5000});
        });
    }else{
        alert('You are missing Name or type.')
    }

});
});

update.php

$id  = $_POST["id"];
$post = $_POST;
define ("MAX_SIZE","2000"); // 2MB MAX file size
function getExtension($str)
{
    $i = strrpos($str,".");
    if (!$i) { return ""; }
    $l = strlen($str) - $i;
    $ext = substr($str,$i+1,$l);
    return $ext;
}
// Valid image formats
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");

    $uploaddir = "images/"; //Image upload directory

        $filename = stripslashes($_FILES['cat_image']['name']);
        $size=filesize($_FILES['cat_image']['tmp_name']);
//Convert extension into a lower case format
        $ext = getExtension($filename);
        $ext = strtolower($ext);
//File extension check
        if(in_array($ext,$valid_formats))
        {
//File size check
            if ($size < (MAX_SIZE*1024))
            {
                $image_name=time().$filename;
                echo "<img src='".$uploaddir.$image_name."' class='imgList'>";
                $newname=$uploaddir.$image_name;
//Moving file to uploads folder
                if (move_uploaded_file($_FILES['cat_image']['tmp_name'], $newname))
                {
                    $time=time();
//Insert upload image files names into user_uploads table

                    $sql = "UPDATE categories SET cat_name = '".$post['cat_name']."',cat_image='".$image_name."',cat_type = '".$post['cat_type']."' ,cat_switch='".$post['cat_switch']."' WHERE cat_id = '".$id."'";

                    $result = $con->query($sql);


                    $sql = "SELECT * FROM categories WHERE cat_id = '".$id."'";

                    $result = $con->query($sql);

                    $data = $result->fetch_assoc();


                    echo json_encode($data);
                }
                else
                {
                    echo '<span class="imgList">You have exceeded the size limit! so moving unsuccessful! </span>'; }
            }

            else
            {
                echo '<span class="imgList">You have exceeded the size limit!</span>';
            }

        }

        else
        {
            echo '<span class="imgList">Unknown extension!</span>';
        }

That's not how you upload a file via Ajax, search so for some examples — Musa, Jun 21 '17 at 13:27

score 0 · Answer 1 · answered Jun 21 '17 at 13:29

To upload file using AJAX like you do, you should use FormData to collect all data from form and send it to php handler https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects similar topic How to use FormData for ajax file upload

score 0 · Accepted Answer · answered Jun 21 '17 at 14:17

I do not know much about php but you can get file details in javascript like that code;

$("#showMe").click(function(){
  var file=$("#myFile").val().replace(/C:\\fakepath\\/i, '').split(".");
  console.log("File Name:"+file[0],"File Extension:"+file[1])
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="myFile"/>

<button id="showMe">Show Me File Details</button>

Get file upload name and extension in JS

2 Answers2