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

Hey! I know this is an old thread but I'm testing out some techniques in Hype and I'd like to connect the dots on this one.

I've got the HTML5 part set up in hype. User selects photo and the photo displays in DIV. I can't figure out how to call the JQuery formdata function and pass it the photo that the user uploaded.

I think I understand the PHP - I'll set that file up on my server and formData calls that function directly.

Any hints on how to call that form data correctly so it picks up the uploaded photo and sends it to the php script? thx!
photoupload.hype.zip (17.4 KB)

This might help… it allows uploads and usage in Hype, but doesn't require a server.

1 Like

I do not normally touch php but thought I would have a look.

and saying that:

With all php and server type code you should makes sure your code is safe and secure especially when it comes to uploads. The examples are here to help you to work out what you need to do in upload and do not take into account security of any sort. You use the examples at your own risk and should do further research to keep your data , server etc safe. There are plenty of explanations on the www of how to go about keeping safe with php.


Adapting this php example ( the full php code is included )

which you place in the same directory as you .html file on the server.

--

First thing don't use a widget to put the form in.
(took me a few mins to figure out you did that and why any code I was writing was not returning the elements )

Use a normal Rectangle Element for placing the form inside.

<form id="form" action="upload.php" method="post" enctype="multipart/form-data">

 <input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
<img id="output_image" height="100px" width="100px">

Note this will jump the page a results page, there probably are ways to stop that and get the results back into hype. Probably by having the action use a function to submit

You load the image to the scene in a Hype function that adds the onChagne.

 var select = document.querySelector("#fileToUpload")
	  
	select.addEventListener("change", function (event) {
		//hypeDocument.functions().thisAlert();
		
		 var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output_image');
      output.src = reader.result;
    }
    
    console.log(event.target.files[0])
    reader.readAsDataURL(event.target.files[0]);
    
	});

photoupload_mhv1 2.hype.zip (21.2 KB)

I did test this and it worked.


Version 2

UPDATE, this version does not redirect and gives the feed back. Mssg

Note it uses the Ajax type code from above to post and therefore uses JQuery.

photoupload_mhv2.hype.zip (56.0 KB)


3 Likes

Very cool! Works on my end too.
Also found this page to explain the php part well as well:

Thanks @MarkHunte !

1 Like