We do this quite easily using an iframe. The iframe shows the image that’s already uploaded (if any) and contains a small form to upload an image … basically, an <input type=‘file’> field, as with your example below. You can also include instructions about what’s supposed to be uploaded in the iframe page, rather than in the surrounding page, if you wish.
Once uploaded, the server returns a refreshed iframe page showing the uploaded image, and optionally redisplaying the same form if you want to give users the option of replacing or adding to the uploaded image. This updates a portion of the viewable window without refreshing the entire page. You can store the uploaded image in a BLOB field or as an external file, depending on what makes the most sense for your application …. i.e. do you want to do a database lookup every time the image is redisplayed, or would it be better to provide an <img src=> link to the image. There’s no “right” answer on that … it depends on how the image is going to be used. I hope this helps! Ron Rosell __ Ron Rosell President StreamLMS > On Aug 15, 2021, at 12:17 PM, eachilgers via 4D_Tech <[email protected]> > wrote: > > Hi All, > > I am looking everywhere to find an example how to “upload” an image from a > webpage served by 4D webserver without using a POST because the current > webpage is NOT ready for POSTING. > > So I need to take a picture with a smart device, either get it from Picture > library or pasteboard, that I can do, (see below) > the next step is to ‘upload’ that image thru 4D webserver, then call it back > to show it in a pict field on that webpage on the smart device. > some browsers display it in a thumbnail some don’t. > > Then the user can decide to “POST’ the WEBPAGE that is filled with other > required data (text & dates) (the purpose of that webpage being used). > > Uploading that picture using Javascript / 4D code is my biggest hurdle on the > 4D side. > > Is there anyone out there that can give me some pointers. > > note: I have tested something like this with Wakanda many years ago (around > 2008 I think) and it worked. > > —————— > for now I have created the following code in my html file that gets send to a > webbrowser: > > <html> > <head> > — some std code here > > <script> > async function saveFile() { > let formData = new FormData(); > formData.append("file", fileupload.files[0]); > await fetch('/uploadTo4D', {method: "POST", body: formData}); > } > </script> > </head> > <body> > — some code here > > <!— HERE THE UPLOAD BUTTON —> > > <input id="fileupload" type="file" name="myImage" accept="image/*" /> > <button id="upload-button" onclick="saveFile()">Upload</button> > <!— ACTIVATES THE SCRIPT ON CLICK —> > > </body> > <html> > - - - - - - - - - > The POST in the script gets executed and I can see it in the debugger in the > method: On Web Connection > > I have an entry in the On Web Connection in a case statement that is conform > the “await fetch” /uploadTo4D > in the $1 the url = " /uploadTo4D” > in the $2 the body of the message I see this: > > POST /uploadTo4D HTTP/1.1 > Accept: */* > Accept-Encoding: gzip, deflate > Accept-Language: en-US,en;q=0.5 > Connection: keep-alive > Content-Length: 7986 > Content-Type: multipart/form-data; > boundary=---------------------------246322575641979756791562813784 > Cookie: 4DSID=A6D57C212C084E339037273910510C15 > DNT: 1 > Host: 192.168.1.4:8085 > Origin: http://192.168.1.4:8085 > Referer: http://192.168.1.4:8085/Create%20Job > User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:91.0) > Gecko/20100101 Firefox/91.0 > > > > What in this message must I identify as the picture file that I selected and > “posted” ??? > something with base36 or Blob in the Content-Type ???? > > Can anybody give me any hints, plse. > > > ernie hilgers(aruba) > ********************************************************************** 4D Internet Users Group (4D iNUG) New Forum: https://discuss.4D.com Archive: http://lists.4d.com/archives.html Options: https://lists.4d.com/mailman/options/4d_tech Unsub: mailto:[email protected] **********************************************************************
