CODEWITHSUNDEEP
javascriptphpcordovaphonegap
Tridev Chaudhary
Tridev Chaudhary

Reputation: 368

Uploading video from phonegap to php

I am using this phonegap(js) code to upload a recorded video to php server.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <title>Mobile_Insurance</title>

    </head>
    <body>

    <script type="text/javascript">

        $(document).ready(function(){
    $('input[name="visit"]').click(function(){
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(".box").not(targetBox).hide();
    $(targetBox).show();
    });
    });


     function captureSuccess(mediaFiles) {
        var i, len;
        for (i = 0, len = mediaFiles.length; i < len; i += 1) {
            uploadFile(mediaFiles[i]);
        }
      }

    // Called if something bad happens.
    //
    function captureError(error) {
        var msg = 'An error occurred during capture: ' + error.code;
        navigator.notification.alert(msg, null, 'Uh oh!');
    }

    // A button will call this function
    //
    function captureVideo() {
        // Launch device video recording application,
        // allowing user to capture up to 2 video clips
        navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 1});
    }

    // Upload files to server
    function uploadFile(mediaFile) {
    var ft = new FileTransfer(),
    path = mediaFile.fullPath,
    name = mediaFile.name;
    var options = new FileUploadOptions();
    options.chunkedMode = true;
        options.fileKey = "file";
        options.fileName = name;
        options.mimeType = "video/mp4";
    var params = new Object();
    params.value1 = "test";
    params.value2 = "param";

    options.params = params;

    ft.upload(path, "http://192.168.0.46/upload/upload.php",
    function(result) {
        console.log('Upload success: ' + result.responseCode);
        console.log(result.bytesSent + ' bytes sent');
        console.log("Response = " + r.response);
        alert("Response = " + r.response);
     },
    function(error) {
        console.log('Error uploading file ' + path + ': ' + error.code);
        alert('Error uploading file ' + path + ': ' + error.code);
    },
    options); 
    alert(mediaFile.fullPath);
    }
    </script>
    <script type="text/javascript" src="cordova.js"></script>
    <div data-role="page">
        <div data-role="header">
          <h3>Welcome </h3>
        </div>
        <div data-role="main" class="ui-content">
          <h3 style="text-align: center;">Input Your IMEI:</h3>
          <input type="number"/>
          <h3 style="text-align: center;"> yes?</h3>

          <input type="radio" name="visit" value="YES"  id="Video">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; YES 
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <input type="radio" name="visit" value="NO" id="self">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; NO
          <br>
          <h3 style="text-align: center;"> damage.</h3>
          <input type="radio" name="damage" value="Physical">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Physical
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <input type="radio" name="damage" value="Water">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Water <br><br>
          <h3 style="text-align: center;">Please give a breig description about the damage</h3><br>
            <textarea rows="5" cols="10" style="resize:none"></textarea>
           <div class="YES box"><input type="button"  value="self analysis" hidden="true"></div> 
            <div class="NO box"> <button onclick="captureVideo();">Capture Video</button></div>

        </div>
      </div>
      </body>
      </html>

This is my php code..

<?php
  print_r($_FILES);
  $new_image_name = "r.mp4";
  move_uploaded_file($_FILES["file"]["tmp_name"], $new_image_name);
?>

The uploadFile function is supposed to upload the file to the specified php file. but in my case the phonegap filetransfer is giving error code 1 which is file not found. I have alert the file path after capture which is same file to be uploaded. How is it throwing error code 1?

Upvotes: 3

Views: 659

Answers (2)

dev d
dev d

Reputation: 26

Try this, you might be able to use this

http://findnerd.com/list/view/Capturing-and-Uploading-Video-to-PHP-Server-in-Cordova/9398/

From the site:

If you want to send image as base64 string you can change destination type to Camera.DestinationType.DATA_URL and you can send imageData to server via ajax call. or, if you want to send as file array then keep the same destination type to camera.DestinationType.FILE_URI and use cordova file plugin to send file data in server:

var options = new FileUploadOptions();
options.fileKey="tickitFile";
options.fileName=imageData.substr(imageData.lastIndexOf('/')+1);
options.contentType = "multipart/form-data";
options.chunkedMode = false;
options.mimeType="image/jpeg";
options.httpMethod="POST";
options.headers =   {
    Connection: "close"
};    


var ft = new FileTransfer();


ft.upload(imageData, PHP&#95;URL, win, fail, options);
function win(r) {
    console.log("Response = " + r.response);
    console.log("Sent = " + r.bytesSent); 
}
function fail(error) { 
    console.log(JSON.stringify(error));
}

Upvotes: 1

Aomin&#233;
Aomin&#233;

Reputation: 500

you can try this below : 

function upload(file){

        var fd = new FormData();
        fd.append("dir", dir);
        fd.append("file", file);
        var xhr = new XMLHttpRequest();

        xhr.open('POST', 'upload.php', true);
        xhr.send(fd);


        xhr.onreadystatechange = function() {

                if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {

                        //alert(xhr.responseText);
                        var message = xhr.responseText;
                        message=message.trim();

                        if ( message != 0)
                        {
                            //alert(message);
                        }           
                }
        };
    }

and the php file : 

<?php
    if (isset($_FILES["file"]["name"])) {

        $destination = $_POST["dir"];

        $name = $_FILES["file"]["name"];
        $tmp_name = $_FILES['file']['tmp_name'];
        $error = $_FILES['file']['error'];



        //echo $name;
        //echo $tmp_name;
        //echo $error;

        move_uploaded_file($_FILES['file']['tmp_name'], $destination.$name);

    }

    echo "File transfer completed";
?>

XHR POST has no size limit, but you're sending data to PHP which has a size limit ;) Create the following php-file and open it in a browser:

Now search for the variable "post_max_size", this variable limits the maximum data that can be sent to PHP (but it can be changed in the php.ini)

My upload function and my php file works perfectly for an input file like :

var obj=document.getElementById("inputfile");

var len = obj.files.length;

for (i=0; i<=len; i++){

    upload( obj.files[i] );
}

for me the problem is the output type of your capturevideo() function or an error in captureSuccess(mediaFiles): try to change for smomething like this below :

 function captureSuccess(mediaFiles) {
    var i, len;
    for (i = 0, len = mediaFiles.length; i < len; i += 1) {
        uploadFile(mediaFiles[i].fullPath);
    }
  }

Upvotes: 0

Related Questions