How to make a photo upload web app using HYPE3

I need to make a game using the photo taken by the user and upload the photo to the server. Need help. thx!!

Try exploring some of the jQuery options out there to help with Camera control.
The biggest hurdle is your users devices and if their browsers will allow camera control.

http://www.jqueryrain.com/2013/10/best-jquery-webcam-plugin-example/

There are several jQuery scripts to help with file upload as well

http://designscrazed.org/html5-jquery-file-upload-scripts/

2 Likes

You could use HTML5 to take the picture, and then using jQuery and ajax upload it to a site with this code:

<style>
#yourimage {
	width:100%;	
}
</style>

<input type="file" capture="camera" accept="image/*" id="takePictureField">
    
<img id="yourimage">
	
<script>

$("#takePictureField").on("change",gotPic);       
	
function gotPic(event) {
        if(event.target.files.length == 1 && 
           event.target.files[0].type.indexOf("image/") == 0) {
           $("#yourimage").attr("src",URL.createObjectURL(event.target.files[0]));
        }
}	
    
</script>  

The above will capture a image, or on a device like Tablet or Phone you can also take a photo.

Below is the code to upload it, again using JQuery:

var formData = new FormData($('#NewUserPic')[0]);

        $.ajax({
            url: 'handleImage.php',  //Server script to process data
            type: 'POST',
            data: formData,
            //Options to tell jQuery not to process data or worry about content-type.
            cache: false,
            contentType: false,
            processData: false,
            //Ajax events
            success: function (data) {
                   data = URL to image
            }
});

This below code is the PHP to handle (handleImage.php) the image (very basic)

$sourcePath = $_FILES['file']['tmp_name'];       // Storing source path of the file in a variable
$targetPath = "../PathToStorage/".$_FILES['file']['name']; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ;    // Moving Uploaded file

echo '../PathToStorage/' . $_FILES['file']['name'];

Hope this helps and gives you some ideas :slight_smile:

4 Likes

This is really of great help! thx very much.

Hi iching,
Did you manage to get it to work?

I’m struggling to make a small web app where the user can take a picture, display and upload it…It sounds like what you where working on.

thanks