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!
Have the link they click ping your server with the image's url so it can be downloaded
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.
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);
?>
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.
Related
I'm new to using the FB share buttons terminology so forgive me if I use the wrong syntax in describing this.
My site is setup to load pages based on the passed parameters in the URL (...?page=somepage&imageid=idnum).
So I have my index file which contains my head, as well as sidebar, etc. Then my main body is generated according to the passed parameter. Simple Enough.
On the homepage, the main body is a gallery of images. When they click on one of those images it takes them to a page that just displays that one image. The page is loaded with parameters of ?page=detail&image_id=1 /*or whatever the id of that image is */
So when they click on the share on FB button on those individual images page, I would like it to populate with the image that is displayed on that page. What I have done is included a php file in my head tag. The php script included gets the page info and passed parameters and then fills out the image url based on the imageid.
echo '<meta property="og:image" content="http://www.chiseledimages.com/clients/vote/'.$imgurl.'"/>';
This works in that when displaying the page source, the meta tag with og:image shows perfectly, also in that when I run it through the FB Object debugger, it gets the correct image and doesn't show me any errors. It even posts the correct image when the users shares on their wall. What is does not do, is show the correct image in the pop window after the uses presses the share button on my site. So even though the result is what I want, the problem with the user not seeing the correct image in the share pop-up, may lead them not to want to share on their wall.
Current location of site: http://www.chiseledimages.com/clients/vote/
Example of a specific pages: http://chiseledimages.com/clients/vote/?page=detail&angel_id=1
Screenshots of pop-up with wrong image, but final posted story having correct image.
How can I make the image in the pop-up match the image that is going to be shared. Thanks.
Edit: I forgot to mention and I'm sure it matters that I'm using Addthis to implement the FB share.
Check https://developers.facebook.com/docs/reference/dialogs/feed/ - look for the 'picture' parameter description
I suggest to you use this http://support.addthis.com/customer/portal/articles/1365475-attribute-based-configuration#.UwPQB6LW6So. just follow their example and you good to go.
I have built a blog system where each entry has an associated image file. I have created a php upload for this system and can get everything onto the server. When I write each blog post I have a row in my database which stores the filename of the image, so I could, if I knew the filename already, just type it in.
What I want to do is on my blog post form, instead of being able to type the file name, I want a button to click on which opens a window with all my images in it, then I can click on one and have that filename sent back to the form.
I suppose I could use AJAX to do this but it seems over complicated. Does anyone know of a good way to achieve this.
I needed to ask, what is the way when a user selects an image from input type='file' , file start uploaing via ajax, and display the image in a div. User dont need to press a submit button to intiate uploading.
Thanks -
Vivek Mishra
A View Source of one such site reveals
<input type="file" id="fileupload" onchange="uploadfile(this);">
Does that help?
this file will help you to do as you want: http://malsup.github.com/jquery.form.js on the other form you want instant image upload.. the examples you will found on http://jquery.malsup.com/form/#ajaxForm
You need a flash/silverlight/java based uploader which does it. There are several:
SWFUpload, Plupload, etc. They have pretty good documentation, with examples.
the basic method for an "ajax" upload, without using flash / silverlight is using a hidden iframe. just set the form's target to the name of the iframe.
I am trying to build a "demo" website for a client who wishes to show the template to their customers. One feature they are really looking for is to allow the user to upload their logo (jpg, png) and have that replace the placeholder logo image in real-time. It should also only be temporary until the site is refreshed.
The sample site is going to be be only the homepage, and its a complete PHP/HTML site with no database.
Is this possible? I've spent the better part of the morning looking over Google and haven't really found anything.
Any help is appreciated. Thanks.
If it's one page only, you can save the page's output as HTML with all javascript/css/images statically linked.
You could then define a region inside the HTML which can can be replaced (e.g. with HTML comments <!-- edit:start -->...<!-- edit:end --> or CSS comments /* edit:start */.../* edit:end */) that can be dynamically changed, for example with the temporary image (-URL).
But your question is quite broad and there can be numerous ways on how to do that, so this is just one idea or probably only one aspect of it.
You could allow the user to upload an image, then after the image is uploaded, load it into a $_SESSION variable. When outputting the logo image, check for the existence of the $_SESSION variable you created on upload and if it exists, change the source of the logo to an output script that reads the $_SESSION variable and outputs its contents with the proper headers.
<?php
session_start();
if (isset($_FILES['logo_upload'])) {
$handle = fopen($_FILES['logo_upload']['tmp_name'], "r");
$cntnts = fread($handle, filesize($_FILES['logo_upload']['tmp_name']));
fclose($handle);
$_SESSION['logo_data'] = $cntnts;
}
?>
OK, so I've got it figured out, at least the basic concept of what I'm looking for.
So I used the ajaxupload.js from Valums for the uploader, then included the My Image Scale jQuery from Hermits to auto scale the image to the containing div.
I currently have the image being loaded into a li that the script creates, and then being moved using .replaceWith to replace the original logo. This works perfectly.
Now I am going to adjust the code to not require the creation of the li element before moving.
For anyone else looking to do this, here's a Pastebin link
Thanks to everyone for all your help and suggestions.
I have a page on my http://localhost/user/profile.php. I want the users to add a link of their photo from the desktop. I donot want them to upload. and display the same.
The image is not displayed.
What exactly am I doing wrong here?
Thanks
Jean
how are you planning to store the path to the image, in MySQL or other?
You should be able to simply ask the user via a post/get method in a form, the file path using <input type="file" name="user_photo_path" id="user_photo_path" /> and then embed that variable in an image tag as:
<img src="<?=$userPhotoPath;?>" />
This should then display the image locally, but be mindful that if another user goes to this page to see that photo, it won't show as they are not on the same host.