Sometime back I developed a mobile app, where image was to be submitted with the entry form in some competition. It worked on all major phones except for Apple’s wonderful devices such as iPod, iPhone and iPad. The reason for this was Mobile Safari browser that won’t let you upload images from your iPad/iPhone and iPad. File input field is disabled and you can’t really select anything to upload.
There’s no way you can enable Mobile Safari’s disabled file input field to upload files but I did find a way to upload images by using free Picup App with php script. Picup app must be installed on user device(iPhone/iPad) for the uploading script to work.
Following is the process that will help you understand what needs to be done in your web page to use Picup app for uploading images and giving control back to the web page.
Detecting Mobile Safari using PHP
Before you do anything, you need to detect Mobile Safari as the user lands on yor web page so that you could include the required code:
function checkMobileSafari() {
if( preg_match( '/(iPod|iPhone|iPad)/', $_SERVER[ 'HTTP_USER_AGENT' ] ) ) {
return true;
} else {
return false;
}
}
Now on your form page, check for the user browser and if it’s Mobile Safari, include the Picup js files like this:
if( checkMobileSafari() ) {
echo '
‘; echo ‘ ‘; }
You can download both of the above js files from Picup App website.
UPDATE: Some users complained that they could not find the above mentioned js files on Picup.com website, you can download them from here they if you can’t find them there.
Add following javascript code to set the starter parameters to launch the Picup app for image uploading.
var currentParams = {}
document.observe('dom:loaded', function(){
$(document.body).addClassName('iphone');
// We'll check the hash when the page loads in-case it was opened in a new page
// due to memory constraints
Picup.checkHash();
// Set some starter params
currentParams = {
'callbackURL' : 'http://your-website.com/image-process.php',
'referrername' : escape('App Name'),
'referrerfavicon' : escape('http://your-website.com/favicon.ico'),
'purpose' : escape('Select your photo for the our App.'),
'debug' : 'false',
'returnThumbnailDataURL': 'true',
'thumbnailSize' : '80'
};
Picup.convertFileInput($('photo'), currentParams);
});
Make sure your favicon file exists on the path above otherwise Picup app will not work properly and stop uploading image.
On the image uploading form, add file type input field like this and make sure you give it ‘photo’ id:
Once you open the page, your form should launch the Picup app on clicking “Choose Photo” button, and Picup will return control back to the url you defined above as “callbackURL” in js starter parameters.
From url, you can easily parse the “remoteImageURL” and “thumbnailDataURL” values and pass to your form and complete the submission process.
You can view this article I posted earlier for parsing hash values from URL that Picup app will return and those you can pass on to your form. You can also view another article how you can copy remote image using PHP script to your server.
Hope that helps.
Cheers!
UPDATE: Since I published this blog post, I have put together these two following versions which will make it easy for those who need the working complete example of the above article. I have integrated those options in forms which were routinely asked and requested by users. Please check and test the demos both in normal browsers and Mobile Safari.
| Minimal Code version | Session & User ID version |
| This simple minimal code returns the path of uploaded image to your php script in addition to other form fields. This demo shows how you can incorporate other form fields in addition to image uploading both in normal browser and Mobile Safari. In this script, file is directly uploaded to your server using POST method. | This simple minimal code returns the path of uploaded image with user id and session data to your php script in addition to other form fields. This demo shows how you can incorporate session data and pass user id with form fields in addition to image uploading both in normal browser and Mobile Safari. In this script, file is directly uploaded to your server with session data. |
| $15.00 | $25.00 |
| Demo Here | Demo Here |
| jQuery Mobile version | Multiple Images jQuery Mobile version |
| This demo also uses Picup app and post image to your own server along side other form fields. Once the image is uploaded successfully, it’s shown to user and the user clicks and returns to the form to fill other fields and submit it. This demo uses jQuery Mobile framework for consistent look and feel across all platforms. This also shows how you can incorporate other form fields in addition to image uploading with normal browser and using Mobile Safari. All you have to do is to add your own fields and that’s it. | This demo also uses Picup app and allows you to upload multiple images to your own server along side other form fields. Once the image is uploaded successfully, it’s shown to user and the user clicks and returns to the form to upload other images and then fill other fields and submit it. This demo uses jQuery Mobile framework for consistent look and feel across all platforms. This also shows how you can incorporate other form fields in addition to image uploading with normal browser and using Mobile Safari. All you have to do is to add your own fields and that’s it. |
| $35.00 | $55.00 |
| Demo Here | Demo Here |
the images are inverted sometimes..is there a fix for this?
Hi Ali,
Any posts regarding version 2 of picup??
I check the documentation and above version 1 demos will work just fine for Picup version 2. Please try above demos yourself with Picup2.
Thanks Ali
Looking forward to updates soon
Hi,
R u sure tht it will wrk fine with Picup app version 2.0
Hi Kanishk,
The above demos are for Picup version 1. Picup version 2 has just recently been released & I will post new version demos in few days. Two people rated on AppStore that they could not upload images using ver 2. I will thoroughly test with Picup version 2 before posting updates.
I figured it out, need to add
window.focus();
before
window.close();
“javascript:window.open(url, ‘iPhoneForm’); window.focus(); window.close()”>Return to Form
Thanks.
It seems that IOS5 has disabled multiple windows in mobile safari, and now everything gets done in tabs.
So this line in image-process.php does not work on my ipad retina:
Do you have a solution?
is this supports Video files?? if yes which formats??
Picup supports only image files.
I tried but not working e.g Response.Write(“Test”)
but not working .. can you please provide me any example in asp.net… because nothing working i just need extension of that file…
I don’t have any working example in asp.net nor my server supports asp.net.
i already tried it is returning “Previous Uploads” where is file in it … there is no other way to get image name or image extension ??
Please check your postURL code. Picup simply return whatever you print yourself in that file.
Yes but how can i extract values from that parameter
file[0][fileSource]?
see this post parsing hash values
Hello Sir,
I am not getting Image URL in Callback url when i am using posturl
how can i get Image url in callback url??
Thanks
Rina
Picup should return image info on the callback url. Please see the demos above.
Thanks for Reply…
i m getting this file[0][status]=Complete&file[0][debug]=true&file[0][fileSource]=Previous Uploads&file[0][picID]=p79 in Callback URL
my code is as below
‘callbackURL’: escape(‘http://xyz.com/up2.aspx?id=3&pname=guest&pic=3&c=3’),
‘callbackParamType’: ‘query’,
‘referrername’: escape(‘xyz Photo Upload’),
‘referrerfavicon’: escape(‘http://picupapp.com/favicon.ico’),
‘purpose’: escape(‘Select a Picture for the xyz.com’),
‘debug’: ‘true’,
‘posturl’: ‘http://xyz.com/iupload.aspx’,
‘postvalues’: escape(‘pic=123’ ),
‘postimagefilename’: ‘imgparam’,
‘imageFormat’ : ‘imgformat’
Please help
Your asp server must respond with the uploaded image name and most probably it will be posted in this variable file[0][fileSource]=Previous Uploads
but how can i get it, its value is already set to Previous Uploads. FYI i m using asp.net
Picup does that for you. It waits for the postURL to post the value and it catches it and add other variable values like status and debug and then take all to callback url where you further process them.
Hi,
I am using same url for Callback and posturl means it will fire twice now problem is that i m getting postvalues in posturl not in callback url , i want to redirect to other page with this postvalues is it Possible??
regards,
samir
Do not use same url for postURl and Callback URL. It’s not a good idea. Why don;t you use separate callback URL?
Can you be sent me the url for image upload to my own server.
Please check the above demo of minimal code.
To upload the images to our own server, i used the postURL as http://domain-name.com/ (note saving in the root folder), but the application is not uploading the images to postURL path and it’s returning to the callbackurl successfully.
yes, that’s correct. But I can’t really say why image is not uploading. It must be something in your code.
Hi,
How do I delay the call to hashUrlVars()[“remoteImageURL”] until after Picup has passed control back to the calling page, so that I can extract the URL?
Thanks.
As soon as Picup uploads the image, it will pass control back to the callbackURL page itself and then you can extract the url and other info. You don’t need to delay the call and can’t do it anyway.
I’m sorry..I’m still struggling with this.
I have this to trigger the picup portion –
When picup passes pack the URL, I’d like to pass that URL on via a form post action. Do I need to do something like –
<input type="file" id="tfa_17" name="picupurl" size="" class="" value=
getHashUrlVars()[“remoteImageURL”];
>
?
Hi David,
Once you have reached the callbackURL, just parse the remote image url from the hash value and then take the user back to your form page with the values in query string. You can then parse the query string on your form easily using routine $_REQUEST. Check the above demos, they do exactly this.
Hi,
Is there a way to check if an iPhone user already has Picup installed? If it’s not installed, I want to give them the iTunes link.
Thanks.
No. this is not possible. App developer also suggested that provide the link. if the user has already installed the app, he will ignore the message. User has to install the app at least and once it’s done, he will ignore the message anyway.
Hi
My picup worked perfect on my local xamp. But now i changed to my online hosting and suddenly it doesn(t work anymore. The picup app fires up, i select a pic and then it just died.
Did you allready head this problem? Do you know the solutions?
greets
Make sure that all the urls are correct, especially the fav-icon exists on the url you provide. This usually happens when the callback url or favicon url are not correct.
I’m having issues with passing postValues any tips or samples to get those working?
Thanks in advance.
Please check the demos above.
Hey Ali.
You have a code sample for purchasing stating, that with it, I can upload to my own server.
Does this mean, that the image won’t also be uploaded to imgur.com?
This is important since my client does not want the photo anywere else but on their own server.
Thanks in advance
Yes, that’s exactly what it does. It uploads script directly to your own server.
Sounds good.
Are there any requirements for the script. Server wise etc.?
Is it only php/javascript?
yes, it’s just simple php & js code.
So the only requirement is, that the server can run php?
yes.
From my web page, when I click on Choose Photo. Picup is fired up, but immediately shuts down and leaves me at the home screen. Any ideas? Thanks.
Most probably, your callback_url has some issue. or some other variable value is not correct or missing. Please make sure you have not made any mistake in defining paths or values for initialization of Picup. cjheck favicon path too.
I’m calling Picup from an ASP.NET page. Does Picup play nicely with .aspx pages? Here’s my script:
window.name = ‘ref_fileupload’;
Picup.checkHash();
currentParams = {
‘callbackURL’: escape(‘http://portal.cprplus.com/WebPortalTrain/Referral/ref_fileuploadsave.aspx’),
‘referrername’: escape(‘Web Portal’),
‘purpose’: escape(‘Select your photo for the referral.’),
‘referrerfavicon’: escape(‘http://portal.cprplus.com/WebPortalTrain/Images/Blue Plus 16 h i32.ico’),
‘returnThumbnailDataURL’ : ‘true’,
‘thumbnailSize’ : ’80’
};
Picup.convertFileInput(‘fileupload1’, currentParams);
I’ve double checked the parameters. It should work…
Yes, aspx should not be a problem. Your favicon file name has spaces. Please remove them and try again.
Removing spaces worked. Thanks.
Question: Your jQuery Mobile demo version. Would I be able to work that into my aspx page? I also need to avoid using imgur.com. Specifically, I need to get the file image into memory for posting into a SQL table. Can do?
yes, you can upload directly to your own server. the above all three demos do exactly that.
jQuery Mobile Framework demo should work with aspx without any issue. You can replace all php code with c# and that will do.
So, I purchased the other demo which uses the upload.php for handling the upload. Does the jQuery Mobile demo use the same class library? If I cannot require my customers web sites to support php, is there an alternative .net upload method? Thanks
Here’s the file uploading code in c# and (save it in upload.aspx.cs file):
using System; using System.Configuration; using System.Data; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btn_upload_Click(object sender, EventArgs e) { Response.Write(uploadMyFile()); } private string uploadMyFile() { HttpFileCollection file_collection = HttpContext.Current.Request.Files; string rootpath = HttpContext.Current.Server.MapPath(""); string filepath = string.Empty; for (int i = 0; i < file_collection.Count; i++) { HttpPostedFile posted_file = file_collection[i]; Array filename = posted_file.FileName.Split('\\'); if (posted_file.ContentLength > 0) { posted_file.SaveAs(rootpath + "\\upload\\" + filename.GetValue(filename.Length - 1).ToString()); filepath = GetRootPath() + "/upload/" + filename.GetValue(filename.Length - 1).ToString(); uploadform.Visible = false; } } return filepath; } public static string GetRootPath() { string host_url = System.Web.HttpContext.Current.Request.Url.Host; string root_path = System.Web.HttpContext.Current.Request.ApplicationPath; if (root_path.Equals("/")) return "http://" + host_url; else return "http://" + host_url + root_path; } }It will return the file path. I will try to build a complete .aspx version too of the demo but above code is enough for uploading file.
Hey Ali, i have bought the demo, but i need a example in asp.net in the other hand i’m trying to do by myself but i can’t still do because i don’t understand the upload example that you post.
here the asp.net’s example that you have post
using System;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btn_upload_Click(object sender, EventArgs e)
{
Response.Write(uploadMyFile());
}
private string uploadMyFile()
{
HttpFileCollection file_collection = HttpContext.Current.Request.Files;
string rootpath = HttpContext.Current.Server.MapPath(“”);
string filepath = string.Empty;
for (int i = 0; i 0)
{
posted_file.SaveAs(rootpath + “\\upload\\” + filename.GetValue(filename.Length – 1).ToString());
filepath = GetRootPath() + “/upload/” + filename.GetValue(filename.Length – 1).ToString();
uploadform.Visible = false;
}
}
return filepath;
}
public static string GetRootPath()
{
string host_url = System.Web.HttpContext.Current.Request.Url.Host;
string root_path = System.Web.HttpContext.Current.Request.ApplicationPath;
if (root_path.Equals(“/”))
return “http://” + host_url;
else
return “http://” + host_url + root_path;
}
}
Hi Geronimo
Use this asp code to upload the file. Demo files are in php. You can easily convert the form page in asp and post the images to this asp file which will upload the image and return the uploaded image name. Just follow the php example and you should be able to do that in asp.
Hi,
You can ignore my second question – that was a brainfart. I finally figured it out and got it to work. Thanks for the tutorial.
No worries, 🙂
I had provided the link in the article above for that too, parsing the hash variables in the url.
Hi,
Thanks for this cool work-around, but unfortunately my hosting company doesn’t support PHP. Is there a way of doing the “checkMobileSafari” function (and its checking) in JavaScript?
Thanks.
function isMobileSafari(){ return navigator.userAgent.match(/(iPod|iPhone|iPad)/); }Here’s how you can use:
if( isMobileSafari() ) { document.write( "You are using Mobile Safari." ) } else { document.write( "It is another browser." ) }You can use js for detection but you can;t use it for image uploading. you have to use php or some other server side language.
Hi Guys,
This has, so far, been a real life saver and I applaud the awesome post with the super awesome solution.
I am building a system for a client that should be able to run offline and on a seperate server and system. In other words – there will be no internet access to the clients or to the system.
Because of this, I need to use the postURL function of picup in my Javascript, but I am having trouble figuring out how to build this so that it will function correctly in my application.
The system I’m building is built on DRUPAL 7, but that is not the issue to me. I need to know what variables to parse for the server, how the JSON looks so that I can use it and so on?
Anyone done this that can give me a hand?
Anyone know where I can find the documentation for this? I’ve been looking for some time now, and I’m totally lost.
Regards,
Please check the first and possibly second demo above. That shows how you can post image to your own server in $_FILES variable. The second demo shows how you can get and pass along user_id and session info from the Picup app image uploading.
Hi Ali,
Thanks for the help. I’m having the same problem that Robin described a few days ago: my webpage recognises that Mobile Safari is running and allows me to take a pic with Picup, but after the Picup “loading” page comes up my device returns to the home screen and no file was uploaded to the php form on the webpage.
I’ve checked that the favicon.ico file exists in the correct path, and have tried this on both my iPad and iPhone (which both have up to date software), without luck. Any advice? Thanks a mil.
R
Does Picup return browser to callback url with the image path in the hash and ‘upload successful’ status message? Are you using default server to posting image to your own?
There are too many things which can cause image not to upload successfully.
Hey,
I tried this but the program doesn’t seem to work well. It should call the page tmp.php with all the hash tags, from this page I forward it to upload.php where it copies the image to the server. When I try this with picupapp it doesn’t seem to upload it to the server, but when I copy the callback URL it shows me and paste it on my desktop browser, then it works just fine, where could my problem be?
Without any error message or the code, it’s almost impossible to guess what could be the reason. You should review your code and will find the issue.
That is the weird part, in picup it gives me succes, if I copy that callback url and paste it in a desktop browser it works fine, but it somehow doesnt from the picup app :/
You know why it doesn’t work, picup can’t access webpages with an htaccess setup, which is my case. My code works perfect on a browser where I have already logged in 😉
Usually the problem is with our custom setup or coding.
Thanks for the reply. I had originally published the code as you wrote it, with an equal sign between the name and value. I was just trying different things before I posted it to this thread. I just tried it again, with the equal sign, with the same result. I am not getting the pair in the hash. When I copy and paste the hash from the postback page URL, I get:
http://xxx.com/test/upload_confirm.asp#status=Complete&picID=p59&thumbnailDataURL=data%3Aimage%2Fpng . The rest of the URL is the thumbnail data, no mention of the “postvalues” pair.
Also, in case it is somehow related, each time I select the image from picup on the iPad, it uploads, but then returns an “Upload Incomplete” error dialog. The image DOES upload fine, and when I hit “Retry” your app fires postback page and displays thumbnail perfectly. But I do get the incomplete error each time. Maybe it is connected to the missing pair in hash problem, maybe not.
Any other insight greatly appreciated. I feel I am very close to a viable solution for my web application.
Thanks!
Most probably the ‘Upload incomplete’ status message is the culprit and it;s difficult to guess what is causing this. May be try with the smaller size images or change server.
Hey
Very nice work. Excellent indeed. This may be exactly the solution I have been looking for to solve my upload woes.
I have it working pretty well. I can select an image, it uploads to my server perfectly, and it is firing my call back page. On the call back page I have been able to extract the thumbnail URL from the hash and present the thumbnail. Perfect so far.
I am failing at getting anything else through the hash. I need to pass at least one parm, ANYTHING, to identify the user, session, whatever. Building off your sample code above, I inserted another parm in the currentParams line, (as suggested by the scratchpad, I used “postvalues”), but for the life of me I cannot figure out why the postvalues pair is not included in the hash. I am probably missing something simple-stupid-obvious. But if I can get a discreet name/value pair through the hash, I think I have found our solution.
Thanks for any insight!
// Set some starter params
currentParams = {
‘postvalues’ : escape(‘user_id666’),
‘referrername’ : escape(‘App Name’),
‘referrerfavicon’ : escape(‘http://xxx.com/test/favicon.ico’),
‘purpose’ : escape(‘Select your photo for the our App.’),
‘debug’ : ‘false’,
‘returnThumbnailDataURL’: ‘true’,
‘thumbnailSize’ : ’80’
};
Indeed, you are making a small mistake. your postvalues should be:
‘postvalues’ : escape(‘user_id=666’)
Hi Alli
Thanks for sharing!
I only have one problem.
I copied your code and looked at every note you’ve given (like check if the icon exists).
When i push the “upload” button on my ipod it opens picup like it should be and it seems to upload the image but after that it doesnt do the callback. It just opens the home menu of the ipod and no browser is opened..
Did you had this issue before?
Oké nevermind. The ipod is system is just too old i guess. I tried it on an ipad and it works fine!
Ali i also require one suggestion from you can i also upload videos using this ?
Yes, you can also upload videos but I think the default third party server that Picup uses only uploads images.
Hi Ali,
I have the same issue as Magoo. I just bought your demo for uploading to my own server but I actually need this code to use JQuery and not Prototype.
Any information if greatly appreciated.
Thanks for this demo!!!
Hi Felipe,
The code works with Prototype. In the past, I tried briefly but could not make it work with jQuery. BTW, you can use both Prototype and jQuery side by side. See my this other post for this.
Thanks.
Hey Ali,
I have been trying to make prototype work along side jQuery mobile. I tried your suggestion on using var myJq = jQuery.noConflict(); and then leaving your JS code as is. But I get an error saying document.observe is not a function.
Any help is greatly appreciated,
Felipe Diep
As you can see in this demo here https://www.parorrey.com/downloads/Picup-demo/, this script works both with jQuery and Prototype. I ahev also sent the sample code to get an idea.
Hi Ali,Thanks again for your reply. Yes I already have both of those .js files on my severr and pointed correctly. I found it strange that it’s not recognizing the document.observe function. That’s just prototype, correct? At first, I thought it may have been something wrong with my file set up, but it didn’t even work calling externally from google. I’m trying to upload images to my severr and am using wordpress. However, I’ll use any image service if it’s easier. Could it be that I need to change my setting with the currentParams = { ?Best,mscappa
Hi Mike,
Uploading to WordPress from iPhone and integrating Picup is a bit more complicated. But I have successfully implemented it with Gravity Forms here on this demo page. If you open the url in a normal browser, it will work fine and upload the image using one form and on detecting Mobile Safari, it will redirect the user to another Gravity form. both forms are submitted as an entry in gravity form that you can later publish as a post or whatever way you have setup your Gravity forms.
Hi Ali,
i am new in development i am trying to use your code in my asp.net web app.how i can use
function checkMobileSafari() {
if( preg_match( ‘/(iPod|iPhone|iPad)/’, $_SERVER[ ‘HTTP_USER_AGENT’ ] ) ) {
return true;
} else {
return false;
}
}
and
if( checkMobileSafari() ) {
echo ‘It\’s Mobile Safari.’;
echo ‘
‘;
}
in my app.I try to use it in javascript on page load is this right ?
Second thing i try to use this code without detecting browser could it work on IOS or not ?
here’s the aspx version.
public bool checkMobileSafari() { bool b; if(Regex.IsMatch(Request.UserAgent.ToString(),"/(iPod|iPhone|iPad)/", RegexOptions.IgnoreCase)Request.UserAgent) b = true; else b=false; return b; } if(checkMobileSafari() ) { Response.Write("'It\'s Mobile Safari."); Response.Write(""); }Yes, you can use it without detecting the Mobile Safari. You only need to detech the iOS devices in case you are serving the other normal browsers version on the same page.
Done.
Ali thanks.I was loosing one point there i did not install picup app in my IPhone now it works for me.
Hi Ali!
First thanks a lot for sharing!
I would like to take a look at your code for “uploading to own server”.
Is it possible to use it without prototype but with jquery mobile?
Please send me information about donation.
Thanks a lot in advance!
I have sent you information.
Hi Ali,
Thanks alot for your code… it helps me alot in my member registration module. However, i need few hints from you.
How does it applies for more than 1 file input cause I have a form that requires member to upload 2 photos in a form… is it possible to do it? and can i pass parameter on ‘callbackURL’ param?
Repeat the process for multiple images.
Hi. So I was able to get the code to work. However, I have run into two issues. First, if I put in this line of code Picup.openFilewithId(‘p12’); then the picup app won’t crash after selecting the photo. However, that is the only way the app doesn’t crash. And it automatically goes to the app before a person does anything on my form. And after the photo is chosen it won’t take me back to my callback url. But if I don’t add in that line of code then once my form loads, I click the select photo button it takes me to my picup app as soon as I select a photo in my library the app crashes. Any suggestions on what I am doing wrong?
Make sure that favicon path is correct and it exists on that location or else it won’t work.
Hi Ali,
I was curious if you could send me how to upload the photo to your own server. I would appreciate it.
Thx!
I have sent you the information of demo link.
Hi Ali
Could you please send me the demo url for the image uploading by posting to your own server.
The issue is not with browser, if you open the page in mobile safari on the iPhone, the button to add to favourites or home screen is greyed out. It I had the pickup code to a page I’ve already got on my home screen i get an error as above – all still on the iPhone
Hi, Ive used your tutorial – its really good one problem i have is if you run the page from mobile safari on the iPhone its works fine, but if i add the page to my home screen i get “Cannot Open master menu” The error was “Url can’t be shown”. but it works fine if I revert back to mobile safari? any Ideas???
If you check demo url here, you will see it;s working both from PC and other mobile browsers and also from Mobile Safari. The trick is that you need to detect the mobile safari and display different version of form for it. The overall consistent look and feel for every browser, I’m using jQuery Mobile to render page.
In a couple of weeks I have working with a upload function with PicUp App and my own simple php code! I try and try, a little bit longer for every time but now I´m lost.
* First I load the two js files!
* Then I take the Javascript you use in this tutorial! But I also take this line;
‘postURL’ : ‘http://www.myown.com/blog/iphoneupload.php’,
Then I use this php in the iphoneupload.php file:
This upload works fine with my computer web-browser if I use a form on both my own server or another! In my Iphone I get the picup App start, choose file and Upload the file. Everything goes good! I get the callback_status.php#status=Complete&picID=p16 on my callback page!
But when I look on the server, no picture! What´s wrong? Someone here see any problem? When I use my computer and a form it post the file on the server!
Hi Steven,
I have sent you a demo url for the image uploading by posting to your own server.
HI, Ali:
I refer your demo example, https://www.parorrey.com/downloads/Picup-demo/
and see the source, when I tested in IPAD. it works, but I don’t know when cilck “Choose Photo” button,
what function be called? in any js file?
I tried to apply in my jsp file, file input field is converted to button, but when I click it , there’s response. Do yu have any idea? thanks a lot!
ace2000, Please make sure you include all the required js files. Sometimes your other js files or code might not be compatible with Picup js code. So start with a simple example with just absolute minimum the way I explained it in the post above.
Hi Ali
Can you please contact me? In short words.. I need help to get this to work on a Joomla-site I have and I’m not a php-guru 😉
Thx in advanced
Anki
I don’t know if I’m clear what I need. I already copy the image from imgur.com to my own database. I want to use my server on ‘postURL’ picup parameter.
I’m also interested to sent the files to my own server using php. Could my mail me the donation detail.
THX!
Information sent.
How do you get the image from the URL into the PHP on the callback page?
Thanks.
Please check this post Get URL Hash Parameters & Values using JavaScript for PHP $_REQUEST. It explains how you can get the hash parameters and values from the url.
Hi Ali
I am interested in the source code.
Please let me know how to get it and the cost
Could you please send me the donation info, I’m interested in the other PHP method of uploading
Thanks
Hi There,
I’m also interested in the source files of the PHP files sending the photo to your own server. Please send me more details.
Ali, I’m also interested in the php form that you can provide, for uploading files via mobile safari on i-devices. Can you provide me donation information? Thanks
Code works great for me. But i have one problem. I want to display a message “Please install Picup APP” when picup is not installed. How do we do this? Please help. Thanks
Your form includes a link to download Picup app on app store. If the user doesn’t have Picup and they press a button that calls the custom URL (fileupload://), they will get a ambiguous alert.
I usually add the following paragraph above the file upload field:
Hi,
I’m struggling to upload the image to my own server. I’m not able to get the data yet. SERVER[CONTENT_LENGHT] is set, but I have no idea how to access the data.
Is there any news on “another demo to upload the image to your own server using php $_POST method. I’ll share both versions’ source files for a small donation.”?
I’m willing to donate 😉
Ralf
I have sent you email with the details.
Thanks for the great article! I’m trying to use this method with my wordpress site. I’m able to get the image upload button to appear, but it’s still greyed out? In using firebug, it says this line is undefined: var currentParams = {}
Can you advise?
Make sure you have included all the js files and also have included following code on the page you are trying to launch Picup app.
var currentParams = {} document.observe('dom:loaded', function(){ $(document.body).addClassName('iphone'); // We'll check the hash when the page loads in-case it was opened in a new page // due to memory constraints Picup.checkHash(); // Set some starter params currentParams = { 'callbackURL' : 'http://your-website.com/image-process.php', 'referrername' : escape('App Name'), 'referrerfavicon' : escape('http://your-website.com/favicon.ico'), 'purpose' : escape('Select your photo for the our App.'), 'debug' : 'false', 'returnThumbnailDataURL': 'true', 'thumbnailSize' : '80' }; Picup.convertFileInput($('photo'), currentParams); });Hi Ali,
Thanks for the reply! Yes, I have this code added in the page. The new error I receive in firebug is:
document.observe is not a function
document.observe(‘dom:loaded’, function(){
I even tried linking the .js from google directly, still have a grey button. Any other ideas? Your help is much appreciated!
Thanks again!
Make sure you have included these required two js files and you can download them from here they if you can’t find them on Picupapp,com
If you still can’t make it work, or even want to upload the image to your own server rather than uploading it to third part free service, let me know.
HI Ali,
Please can you get in touch with me about how to load the image to my own server and not have it pass through a third party.
I can currently get the image to be loaded to Imgur, but cannot seem to reference it in my php code so as to upload to my server. Ideally I would prefer for the image to not go by way of a third party. Thanks.
Hi Ali,
Thanks again for your reply. Yes I already have both of those .js files on my server and pointed correctly. I found it strange that it’s not recognizing the document.observe function. That’s just prototype, correct? At first, I thought it may have been something wrong with my file set up, but it didn’t even work calling externally from google.
I’m trying to upload images to my server and am using wordpress. However, I’ll use any image service if it’s easier.
Could it be that I need to change my setting with the currentParams = { ?
Best,
mscappa
First you should try to upload using single php script file outside of WordPress. If it works, then you can try to integrate it in WP.
No, the above given currentParams are all that you need to make it work.
Here’s the functional demo link.
Hi Ali,
How can I contact you to request the source files for this tutorial, including the POST method (Which I am guessing is to another server other than imgur?)? If you would like a donation, how much?!
Thanks.
Hi Stephen,
I have sent you email with the details.
Hi ! I’m really interested in the php form that you can provide, for uploading files via safari on i-devices.
How much is the donation ?
Cheers!
I have sent you email with details.
Hi! As a matter of fact, iCab Mobile browser app is able to upload any file via a web form, not only pictures. But some per-requisites are required.
1. Get a cloud file storage of some kind that you can access via a web interface. I use Dropbox.com and box.net.
2. Upload your file(s) to the cloud file storage account.
3. Get iCab (of course…)
4. In iCab, press the settings icon (small gear wheel icon on top right) and change browser ID to “Safari 5(Mac). This might not be required but I don’t like the hassle to get redirected to functionally limited mobile site versions.
5. Open your cloud storage web interface and browse to your file. Tap and hold till the menu pops up, then choose “download file”. There, now you have the file within the iCab’s file structure, which makes it available for iCab to work with.
6. Go to the web site that wants you to upload file, and then upload the file as usual, selecting it from iCab’s own “Download list”
Prototype.js is the framework Prototype? which version i have to include?
yes but I’m not sure about the version. I’ll later put the Prototyoe.js file too download.
I could take the pic with my iphone and picup is sending to the server, but I don’t know where to get it. the callbackURL is launched in my iphone with status=Completed. I’m using php and I don’t know where the image is comming, in the callbackURL file or in the postURL file?, in the $_POST or in the $_FILES variable?
I’m desperate after 2 days of trials. Any help would be welcome.
And an example of a php file saving the image to the server would be amazing 🙂
It does not POST and it’s not available via ($_FILES) the values rather upload the image and return the remoteURL and other info in the hash variables in the url. I’ll post the example in a day or two.
I’m also utterly confused about this – how does Picup manage to save anything to my FTP server when it doesn’t have the username/password for it?
Ali, did you ever get that example up, that you mentioned? I’m sure it would’ve been a huge helper!
Thanks!
Hi Thomas,
I had been trying to put together a working and useful demo for Image uploading using Picup for sometime now. I had been getting requests every day for such demo and finally invested enough hours to make it useful.
About your question, Picup app does not upload the image on your server. It rather uploads the image to a free image hosting website and returns the remotely hosted Image URL to your call back url.. You can then copy that remote image using the php script to your own server. I have already explained all that process above in the post and you can view this demo as well. This demo will work for both standard browsers and Mobile Safari. For consistent look and feel across all mobile, tablets and standard browsers, I have used jQuery Mobile Framework..
Also, I’m working on another demo to upload the image to your own server using php $_POST method. I’ll share both versions’ source files for a small donation.
Hi Ali Qureshi,
Came across your thread and found it very useful for my current project but as mentioned above i was able to download the “picup.js” from Picup website but wasn’t able to find the “prototype.js”, is there any other alternative to obtain the file?
and when u be able to post a demo version so i can have it as a reference.
Thank You.
You can try to use Prototype.js library from prototyp websit e. I think any version should work but if it does not, I’ll make one available here.
Ali,
Thank you for the response. Yes, when we swap our PostULR for the default picuapp.com, the upload is complete. When you use a sub-directory on our server the upload is incomplete. The server is windows 2008 and ii7 and does not have an event handler for *.html (assuming iOS apps use this handler to POST files to a server). We are back working on Server settings and iis to resolve. When we find a solution (there is confidence for you), I will post what we did. Thanks again.
This is a great post and I have a similar situation in adapting for an ASP.NET site. All seems to work on the default server (imgur.com), but on the production server I am receiving 405 errors. Googled a million sites and looked at iis, handlers etc. Still not luck. Everything I do results in no uploaded image, Status Incomplete, and a Response status of ‘405 – http:// verb used to access this page is not allowed”. Driving me mad, any ideas?
You said all seems to work on default server, I assume you are talking about picupapp.com server.
If you get the status = incomplete message, it means your image is not uploaded successfully. if you are using the default setting by uploading the image to imgur.com. You should get back the remoteImageURL on your callbackURL page in the hash variables.
You may want to look at this thread
I recieve image undefined error while status = success on my callback using imgur.. Please send me the PHP sample code, I don;t want to upload the image on 3rd party site.
I have made two demos available above. You can get whichever you want.
Thanks very much for this helpful post! I am trying to integrate it into an ASP.NET site. I have adapted the first code block (checkMobileSafari), but am having trouble with the other two. Can you tell me where they go? For example, the 2nd code block – does it go within a jscript function or in code behind, and how is it called? (Sorry, I have limited jscript experience.)
Both of these following code blocks will go in the code behind file.
<% if(checkMobileSafari() ) { %>It's Mobile Safari.
<% } %>
Awesome workaround! Any way we can get the source files for this?
Hi Tom,
All the relevant source code (html, js, php) is already posted above. Please follow and put it inside your php code and it will work. I’ll try to put together a demo version and post the functional sample files soon.
I am also interested in uploading to my server. Can you please send me the information Via email? Love the app.