falmesino/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>

    <!-- SUMBER MASALAH : https://web.facebook.com/groups/35688476100/permalink/10155582769201101/ -->

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <title>Mukhlis</title>

</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">

                <h1>File Upload</h1>

                <form id="formUploadVideoLocal" action="http://localhost/playground/mukhlis/proses.php" enctype="multipart/form-data" method="post">
                    <div class="form-group">
                        <label>File</label>
                        <input type="file" name="linkVideo" id="linkVideo" accept=".mp4" class="form-control" />
                    </div><!--/ .form-group -->
                    <div class="form-group">
                        <input type="submit" class="btn btn-primary btn-block" value="Upload">
                    </div><!--/ .form-group -->
                    <div class="form-group">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                                0%
                            </div><!--/ .progress-bar -->
                        </div><!--/ .progress -->
                    </div><!--/ .form-group -->
                </form>

            </div><!--/ .col-xs-12 -->
        </div><!--/ .row -->
    </div><!--/ .container -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- Functionality JavaScript -->
    <script>

        $('#formUploadVideoLocal').submit(function(e){
            e.preventDefault();
            console.log('Submit button clicked');

            var el = $(this);
            var inputURI = el.attr('action');
            var inputFile = el.find('input[type="file"]');
            var progressBar = el.find('.progress-bar');
            var fileToUpload = inputFile[0].files[0];
            var formData = new FormData(this);

            console.log('FileToUpload');
            console.log(fileToUpload);

            if(fileToUpload !== undefined){

                console.log('FormData');
                console.log(formData);

                console.log('Preparing to send request to ' + inputURI);

                $.ajax({
                    type: 'POST',
                    url: inputURI,
                    data: formData,
                    contentType: false,
                    processData: false,
                    cache: false,
                    dataType: 'json',
                    encode: true,
                    beforeSend: function(jqXHR){
                        console.log('Sending request to ' + inputURI);
                    },
                    complete: function(jqXHR){
                        console.log('Request completed');
                    },
                    success: function(response){
                        console.log('Success!');
                        console.log(response);
                    },
                    xhr: function(){
                        var xhr = new XMLHttpRequest();
                        xhr.upload.addEventListener('progress', function(e){
                            if(e.lengthComputable){
                                var percentComplete = Math.round((e.loaded / e.total) * 100);
                                console.log(percentComplete + '%');

                                progressBar.css({
                                    width: percentComplete + '%'
                                });

                                progressBar.text(percentComplete + '%');

                            }
                        }, false);

                        return xhr;
                    }
                }).done(function(data){
                    console.log('AJAX request done');
                });

            }else{
                alert('Videonya pilih dulu, tot!');
            }

            return false;
        });
    </script>

</body>

</html>

## proses.php
<?php

    /**
     * ./proses.php
     */

    $output = array();
    $output['status']   = 'FAIL';
    $output['msg']      = '';
    $output['data']     = array();

    if(isset($_FILES)){
        $output['status']   = 'SUCCESS';
        $output['msg']      = 'Ada datanya';
        $output['data']     = $_FILES;
    }

    echo json_encode($output, true);

    /*
    echo '<pre>';
    print_r($_FILES);
    echo '</pre>';
    */

    exit();

?>
	<!DOCTYPE html>
	<html lang="en">

	<head>

	<!-- SUMBER MASALAH : https://web.facebook.com/groups/35688476100/permalink/10155582769201101/ -->

	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<title>Mukhlis</title>

	</head>

	<body>

	<div class="container">
	<div class="row">
	<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">

	<h1>File Upload</h1>

	<form id="formUploadVideoLocal" action="http://localhost/playground/mukhlis/proses.php" enctype="multipart/form-data" method="post">
	<div class="form-group">
	<label>File</label>
	<input type="file" name="linkVideo" id="linkVideo" accept=".mp4" class="form-control" />
	</div><!--/ .form-group -->
	<div class="form-group">
	<input type="submit" class="btn btn-primary btn-block" value="Upload">
	</div><!--/ .form-group -->
	<div class="form-group">
	<div class="progress">
	<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
	0%
	</div><!--/ .progress-bar -->
	</div><!--/ .progress -->
	</div><!--/ .form-group -->
	</form>

	</div><!--/ .col-xs-12 -->
	</div><!--/ .row -->
	</div><!--/ .container -->

	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

	<!-- Functionality JavaScript -->
	<script>

	$('#formUploadVideoLocal').submit(function(e){
	e.preventDefault();
	console.log('Submit button clicked');

	var el = $(this);
	var inputURI = el.attr('action');
	var inputFile = el.find('input[type="file"]');
	var progressBar = el.find('.progress-bar');
	var fileToUpload = inputFile[0].files[0];
	var formData = new FormData(this);

	console.log('FileToUpload');
	console.log(fileToUpload);

	if(fileToUpload !== undefined){

	console.log('FormData');
	console.log(formData);

	console.log('Preparing to send request to ' + inputURI);

	$.ajax({
	type: 'POST',
	url: inputURI,
	data: formData,
	contentType: false,
	processData: false,
	cache: false,
	dataType: 'json',
	encode: true,
	beforeSend: function(jqXHR){
	console.log('Sending request to ' + inputURI);
	},
	complete: function(jqXHR){
	console.log('Request completed');
	},
	success: function(response){
	console.log('Success!');
	console.log(response);
	},
	xhr: function(){
	var xhr = new XMLHttpRequest();
	xhr.upload.addEventListener('progress', function(e){
	if(e.lengthComputable){
	var percentComplete = Math.round((e.loaded / e.total) * 100);
	console.log(percentComplete + '%');

	progressBar.css({
	width: percentComplete + '%'
	});

	progressBar.text(percentComplete + '%');

	}
	}, false);

	return xhr;
	}
	}).done(function(data){
	console.log('AJAX request done');
	});

	}else{
	alert('Videonya pilih dulu, tot!');
	}

	return false;
	});
	</script>

	</body>

	</html>
	<?php

	/**
	* ./proses.php
	*/

	$output = array();
	$output['status'] = 'FAIL';
	$output['msg'] = '';
	$output['data'] = array();

	if(isset($_FILES)){
	$output['status'] = 'SUCCESS';
	$output['msg'] = 'Ada datanya';
	$output['data'] = $_FILES;
	}

	echo json_encode($output, true);

	/*
	echo '<pre>';
	print_r($_FILES);
	echo '</pre>';
	*/

	exit();

	?>