Mobile file upload a solution CGI

LiveCode is the premier environment for creating multi-platform solutions for all major operating systems - Windows, Mac OS X, Linux, the Web, Server environments and Mobile platforms. Brand new to LiveCode? Welcome!

Moderators: Klaus, FourthWorld, heatherlaine, robinmiller, kevinmiller

Simon
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3901
Joined: Sat Mar 24, 2007 2:54 am
Location: Palo Alto

Mobile file upload a solution CGI

Post by Simon » Sat Feb 15, 2014 5:15 am

Hello All,
Until runRev get there networking sorted out here is a way.

Prerequisite;
Access to a server that runs CGI verison 2.47 or higher (I don't even know what that means)
upload.zip
unzip and upload to your cgi-bin
(1.54 KiB) Downloaded 265 times
unzip and upload to your cgi-bin folder
there are a couple of lines in there that need changing, upload folder and the url to your site.
I see I have the permissions set to 755

New stack with one button and one field on it
In the button put

Code: Select all

local tData,tPic,tName

on mouseUp
   put "" into fld 1
   if the environment is "mobile" then
      set the vis of the templateImage to false
      mobilePickPhoto "library"
      put the last image into tPic
      put "mobUp.jpg" into tName --someone fix this so the user can put there own filename in
   else --desktop testing
      answer file "Select a file to upload:" with filter "JPEGs,*.jpg"
      put url ("binfile:"& it) into tPic
      set itemDel to "/"
      put the last item of it into tName
   end if
   put buildIt() into tData 
   post tData to URL "http://www.yourSite.com/cgi-bin/upload.pl" --where did you put the file?
   put it into fld 1
   set the httpHeaders to empty
   set  the vscroll of fld 1 to 1000
end mouseUp
Followed by

Code: Select all

function buildIt
   put "--__Part__" & crlf into tData
   put "Content-Disposition: form-data; name=" & quote & "photo" & quote & "; filename=" & quote & tName & quote & crlf after tData
   put "Content-Type: image/jpg" & crlf after tData
   put "Content-Transfer-Encoding: binary" & crlf & crlf after tData
   put tPic & crlf after tData
   put "--__Part__--" after tData
   put "Content-Type: multipart/form-data; boundary=" & quote & "__Part__" & quote into theHeader
   set the httpHeaders to theHeader
   return tData
end buildIt
Now that uploads a jpg file, I'll let you figure out other text/binfiles :)
Tested this on Android and iPad. I managed a 3.8 MB upload.
I'm using my on-rev sever but I don't think that should make a difference.

If the upload is successful "1 files successfully uploaded:" with the url to the file will be in the field down at the bottom (make it scrollable).

Warning: There is no security on this upload... I think there are bad people who can figure out how to abuse the CGI, fair warning. Maybe someone who knows more about CGI's will figure this out (Richard? :wink: ).

Oh Oh Oh... Be very careful if you mess with the buildIt function, mobile is very strict, just changing lowercase to capital letters finally made it work for me.

built using liveCode ver 6.5

Hope that it works for you.

Simon
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

Simon
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3901
Joined: Sat Mar 24, 2007 2:54 am
Location: Palo Alto

Re: Mobile file upload a solution CGI

Post by Simon » Sat Feb 15, 2014 5:20 am

Here is an addition
uploadHTML.zip
(412 Bytes) Downloaded 238 times
Use that file on your server to test if the CGI upload is working before you spend time trying to get a stack to do it.
It's just an html form... you know choose/submit stuff.

Yeah, do this in steps making sure it works before moving to the next.
1 the html file attached
2 desktop
3 mobile device

Simon
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

splash21
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 369
Joined: Sun Dec 19, 2010 1:10 am
Location: UK
Contact:

Re: Mobile file upload a solution CGI

Post by splash21 » Tue Feb 18, 2014 3:53 pm

Here's a 32Mb file being uploaded in the background on iOS to an on-rev server. I just need to add some password protection and do some more real device testing - then it's available if anyone is interested. I thought it was worth posting as the receiver script is a .lc server script, so everything is coded with LC.

http://youtu.be/y0PftMRKVSg

Carousel shows that upload is in the background + mid section of video chopped out due to extreme boredom (upload took a while!)
It's configurable - set to upload at 1Mb per chunk in the video. Each chunk is verified when uploaded and chunks can be re-uploaded if a problem is detected.
LiveCode Development & Training : http://splash21.com

splash21
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 369
Joined: Sun Dec 19, 2010 1:10 am
Location: UK
Contact:

Re: Mobile file upload a solution CGI

Post by splash21 » Tue Feb 18, 2014 7:13 pm

After a couple of improvements - here's a 4.5Mb jpg image being uploaded to an on-rev server with final verification when the upload is complete and authentication. The receiving .lc script is very small - I'll create a php version as well.

http://youtu.be/SfDoF8r2wVQ

Just tested on an android tablet and everything looks good :)
LiveCode Development & Training : http://splash21.com

Simon
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3901
Joined: Sat Mar 24, 2007 2:54 am
Location: Palo Alto

Re: Mobile file upload a solution CGI

Post by Simon » Tue Feb 18, 2014 9:04 pm

Great!
I really have to learn more about liveCode server.

Simon
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

splash21
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 369
Joined: Sun Dec 19, 2010 1:10 am
Location: UK
Contact:

Re: Mobile file upload a solution CGI

Post by splash21 » Tue Feb 18, 2014 11:30 pm

Here's the mobile test stack and the receiver .lc file for the server. Set the password, receiver URL and chunk size (currently 0.5 Mb) in the 'uploadTest' handler in the card. Set the same password in the upload.lc file. The security works by creating a token with a life of 10 seconds (configurable) containing a hash of the time code and other data posted in the request. Seems to work OK for everything I've tried so far (>30Mb). I've been testing on an on-rev server and another external server.
MobileUploader.zip
(65.47 KiB) Downloaded 324 times
LiveCode Development & Training : http://splash21.com

Simon
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3901
Joined: Sat Mar 24, 2007 2:54 am
Location: Palo Alto

Re: Mobile file upload a solution CGI

Post by Simon » Tue Feb 18, 2014 11:57 pm

Hi John,
Working great here!
It doesn't like spaces in filenames.

Simon
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

splash21
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 369
Joined: Sun Dec 19, 2010 1:10 am
Location: UK
Contact:

Re: Mobile file upload a solution CGI

Post by splash21 » Tue Feb 18, 2014 11:59 pm

Well then - don't put spaces in filenames! :D Or modify it so that it does like spaces...
LiveCode Development & Training : http://splash21.com

splash21
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 369
Joined: Sun Dec 19, 2010 1:10 am
Location: UK
Contact:

Re: Mobile file upload a solution CGI

Post by splash21 » Wed Feb 19, 2014 12:01 am

In button S21-Uploader, change..

Code: Select all

put "&F=" & sUploadA[pFile]["RemoteFile"] & \
to

Code: Select all

put "&F=" & urlEncode(sUploadA[pFile]["RemoteFile"]) & \
and it should be good!
LiveCode Development & Training : http://splash21.com

Simon
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3901
Joined: Sat Mar 24, 2007 2:54 am
Location: Palo Alto

Re: Mobile file upload a solution CGI

Post by Simon » Wed Feb 19, 2014 12:17 am

I was so on the tail of where to put that urlEncode.
You beat me to it... it's almost as if you developed the code. :D

Simon
Edit; You Rock!
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

cbarnhart
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 48
Joined: Mon May 07, 2012 2:10 pm

Re: Mobile file upload a solution CGI

Post by cbarnhart » Wed Mar 26, 2014 2:48 pm

I am posting to a PHP page I created and I assumed the LiveCode App portion would be not different. The PHP page works with a test html page but I can not get the post to work from my desktop app. What am I doing wrong...

Code: Select all

local tData,tPic,tName

on mouseUp
   put "" into fld 1
   if the environment is "mobile" then
      set the vis of the templateImage to false
      mobilePickPhoto "library"
      put the last image into tPic
      put "mobUp.jpg" into tName --someone fix this so the user can put there own filename in
   else --desktop testing
      answer file "Select a file to upload:"
      put url ("binfile:"& it) into tPic

      put tPic into field "bin" --just for me - errorchecking
      
      set itemDel to "/"
      put the last item of it into tName
      
   end if
   put buildIt() into tData 
   put tData into field "build" --just for me - errorchecking
   post tData to URL "http://www.MyWebSite.net/upload_file.php" 
   put it into fld 1 
   set the httpHeaders to empty
   set  the vscroll of fld 1 to 1000
end mouseUp

function buildIt
   put "--__Part__" & crlf into tData
   put "Content-Disposition: form-data; name=" & quote & "photo" & quote & "; filename=" & quote & tName & quote & crlf after tData
   put "Content-Type: image/png" & crlf after tData
   put "Content-Transfer-Encoding: binary" & crlf & crlf after tData
   put tPic & crlf after tData
   put "--__Part__--" after tData
   put "Content-Type: multipart/form-data; boundary=" & quote & "__Part__" & quote into theHeader
   --put "enctype: multipart/form-data; boundary=" & quote & "__Part__" & quote into theHeader
   set the httpHeaders to theHeader
   put theHeader into field "Header"--just for me - errorchecking
   return tData
end buildIt

Simon
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3901
Joined: Sat Mar 24, 2007 2:54 am
Location: Palo Alto

Re: Mobile file upload a solution CGI

Post by Simon » Thu Mar 27, 2014 6:50 am

Hi cbarnhart,
I spent quite a bit of time on this yesterday.
Sorry but it beat me this time :(

Got past "invalid file" but got stuck on "Server Hangup (502)"

Simon
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

ddunston2014
Posts: 1
Joined: Fri Mar 28, 2014 1:23 pm

Re: Mobile file upload a solution CGI

Post by ddunston2014 » Fri Mar 28, 2014 1:40 pm

Hey Guys,

I have this working with PHP. Can I see your code for PHP?

In this line in the buildIt function:

Code: Select all

put "Content-Disposition: form-data; name=" & quote & "photo" & quote & "; filename=" & quote & tName & quote & crlf after tData
You need to change "photo" to the value your PHP script is expecting. The text:

Code: Select all

name=" & quote & photo & quote"
translates to: name="photo"

which is what you'd put in an HTML form for the name of the HTML form object.

ie.

Code: Select all

<input type="file" name="photo">
In your php script be sure the superglobal is $_FILE['photo']. Otherwise, you need to change "photo" in the above line in the livecode script editor to whatever your PHP script is expecting the "name" of the upload variable to be.

Other than that, ensure permissions are set on the directory where it is being uploaded so that the web server user has read, write, execute permissions on it.

cbarnhart
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 48
Joined: Mon May 07, 2012 2:10 pm

Re: Mobile file upload a solution CGI

Post by cbarnhart » Fri Mar 28, 2014 4:40 pm

Thank you for the feedback. ddunston2014 had it right. it was all in the header. I changed it to this and it worked like a dream

Code: Select all

   put "Content-Disposition: form-data; name=" & quote &"file"& quote & "; fileName=" & quote & tName & quote & crlf after tData
Thank you again for all the help

bohmgyorgy1990
Posts: 23
Joined: Wed Feb 19, 2014 2:33 am

Re: Mobile file upload a solution CGI

Post by bohmgyorgy1990 » Thu Apr 24, 2014 4:43 am

Hy!

I do these things step by step and it works correctly, but how can i handle if i have an own browser ( mobileControlCreate "browser" ). If hit the choose button (uploadHTML.html) is nothing happens. So how can i handle any button in my own browser, can you help me?

Kind Regards

George

Post Reply

Return to “Getting Started with LiveCode - Experienced Developers”