CODEWITHSUNDEEP
javascriptphphtmljqueryajax
Kyv
Kyv

Reputation: 697

How to upload videos using javascript and PHP?

I am trying to upload files using html. Uploading images works fine. Most of the gifs also work fine. But some gifs and all videos are not working.
From the client side, I see that the file exists, and the file size is greater than 0. However, on the server side, I get 0 for the file size. I would like to know if there is anything else I need to consider for gifs and videos.
Here is the code.

<input class="form-control input-filename" accept=".jpg,.jpeg,.png,.gif,.mp4" id="input-filename" name="" type="file">

console.log(document.getElementById('input-file').files[0]) returns

File { name: "dancing-baby.mp4", lastModified: 1662709502657, webkitRelativePath: "", size: 28739050, type: "video/mp4" }

Client-side code

$(document).on('change', '#input-filename', function (e){
var form_data = new FormData();
var oFReader = new FileReader();
var f = document.getElementById('input-filename').files[0];
console.log(f)
oFReader.readAsDataURL(f);    

var fsize = f.size||f.fileSize;

form_data.append("uploaded_file", f);
$.ajax({
        url: 'handle_file.php',
        method:"POST",
        data: form_data,
        contentType: false,
        cache: false,
        processData: false,
        beforeSend:function(){
        // ...
        },
    success:function(data)
    {
        console.log(data);
    }
});
}

Server side code


if(isset($_FILES["uploaded_file"]["name"]) && $_FILES["uploaded_file"]["name"] != ''){
    $filepath = $_FILES['uploaded_file']['name'];   
    $fileSize = $_FILES['uploaded_file']['size'];   
    print json_encode(array('message' => "add a message", 'img_details' =>  $filepath . ' ' . $fileSize, 'code' => 1));
        exit();
}

Upvotes: 0

Views: 529

Answers (1)

fuziion_dev
fuziion_dev

Reputation: 1691

Did you check the upload limit on your current host? That might be the reason why you can't upload video files.

Upvotes: 1

Related Questions