Upload photo by clicking it in web browser window

Question

I've been searching everywhere and can't seem to find an answer to this:

I'm currently working with the Instagram API. I have that all set so users can login and see all their photos. But, I'm creating a type of photo printing service for instagram so I want it so that when the user clicks the photo it uploads that photo to my server. I know how to do a PHP upload with an html form, but this is a strange case in which an html form is of no use to me. I guess I basically need the image to be selected and also act as the submit button at the same time? I'm not really sure, any help would be appreciated!

Answer 1

I'm not familiar with Instagram API, but have the fallowing suggestion. As I understastand, by the Instagram API, the photos are displayed in your page - so you need some javascript to get there urls, and the image got to act as submit button '<input type="image" src="...the image source here.." alt="Submit button" name="i1">' ... . The PHP code would be something like that:

<?php



//original image

$img = $_GET["i1"];



//directory to copy to (must be CHMOD to 777)

$copydir = "/home/user/public_html/directory/";



$data = file_get_contents($img);

$file = fopen($copydir . "blah.gif", "w+");

fputs($file, $data);

fclose($file);



?>

Answer 2

Have the link they click ping your server with the image's url so it can be downloaded

Answer 3

Similar answer to Mike B, but more flushed out:

You could render an invisible form for each image on the page. In each form, have an input field populated with the image URL you want to submit to your system. Use the image click event to submit the form it belongs to.

On the PHP server-side your script should receive the URL of the image and make a request to download it to the server. You can then do what you want with it.

That's one way. I can think of at least two more.

Update: There is simpler solution. See Mike's comment below.

Answer 4

Can you show us some code to help us get an idea of how you're currently displaying the images? I suppose you can always do something like <input type="submit" style="visibility: hidden;" /> and then add something like onClick=document.forms['NameOfThisForm'].submit(); to the <img> tag containing that particular image. This way, you'd have one form per image, and you could add additional hidden elements to pass on any further information to the server, e.g. the ID of the image that the user clicked.