Mobile file upload a solution CGI

[Simon]

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 647 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? ).

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

[Simon]

Here is an addition

uploadHTML.zip

(412 Bytes) Downloaded 602 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

[splash21]

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.

[splash21]

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

[Simon]

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

Simon

[splash21]

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 702 times

[Simon]

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

Simon

[splash21]

Well then - don't put spaces in filenames! Or modify it so that it does like spaces...

[splash21]

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!

[Simon]

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.

Simon
Edit; You Rock!

[cbarnhart]

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]

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

[ddunston2014]

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]

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]

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