Web Connection
plUpload function
Gravatar is a globally recognized avatar based on your email address. plUpload function
  Rod
  All
  May 22, 2019 @ 12:58pm

Hi, Rick & All.

Being very limited with JavaSript, I've been using Rick's plUpload example verbatim in several apps I developed where there's a javascript "listener", as I understand, placed in the bottom of the page that's bound to Rick's example function:

// SIMPLE UPLOAD WITHOUT PRECONFIGURED UI USING BASE plUpload API
		$(document).ready(function() {

			var uploader = new plupload.Uploader({
				// these two are required
				browse_button: 'btnUploadImage', // you can pass in id...
				url: "plUpload.rf?refno=<<ALLT(m.rf_refno)>>",

etc...

This has worked great, but what I need to do is invoke this process in one click (same button) with a post back so I can update all the current page values to my DB BEFORE plupload is invoked. By triggering it in the listening mode from that button, I lose all other changes to the page. I can't figure out how to force a page submit as part of the process when the user clicks, and THEN upload the picture. (They are entering text and adding a picture. Currently I just have a message reminding them to click Submit before adding a picture, which is lame.)

I thought, for example, I might invoke it as a page "onload" function after the page is submited and I refresh it. But I cannot figure out how to do it. I also tried adding an onclick submit to the same button but that didn't work.

By any chance is there anyone out there with an example of this kind of approach? The good news is I am soon to have some in-house Javascript expertise to help me, but they do not understand the FoxPro/West-Wind model. Once I get a framework in place, then they can help me flesh it out on the Javascript end.

Thanks, Rod

Gravatar is a globally recognized avatar based on your email address. re: plUpload function
  Rick Strahl
  Rod
  May 23, 2019 @ 12:50am

If you're trying to submit a file with the rest of your form you don't really need plUpload (or another client side uploader). Just use regular form file fields. Using plUpload is good when you need to upload large files and you want to preview things like images before the rest of the form is submitted, but otherwise you can just upload.

Take a look at the new upload sample in Web Connection (wwDemo) it shows examples of both I believe.

https://west-wind.com/wconnect/wcscripts/fileupload.wwd

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: plUpload function
  Rod
  Rick Strahl
  May 23, 2019 @ 03:36am

Thanks. I'll check those out.
The thing I liked about plUpload the most was controlling the image size on the client side. When we roll out this app we will be taking in many thousands of images, hundreds of thousands over time, and with today's devices taking such hi-res pics I want to be able to control the flow. I'm sure there's different ways to think about it, but the main thing I wanted to overcome is having users click the upload button and lose the page update. I'm very UX oriented and also very minimalist and my users are non-technical. Will be contacting you soon for some consulting in any case. Rod

Gravatar is a globally recognized avatar based on your email address. re: plUpload function
  Rick Strahl
  Rod
  May 23, 2019 @ 02:27pm

plUpload still works, those classes and are still there as before just changed over to Uppy because it's much easier to set up and work with. I believe Uppy too is adding support for image sizing but not sure if that's there yet or not.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: plUpload function
  Rick Strahl
  Rod
  May 23, 2019 @ 02:29pm

plUpload still works, those classes and are still there as before just changed over to Uppy because it's much easier to set up and work with. I believe Uppy too is adding support for image sizing but not sure if that's there yet or not.

My personal feeling is, it's better to just let people upload images in whatever size they need and then handle the resizing on the server. You can use server side image optimization tools too. Here on the message board I use Pingo.exe which in max compression knocks most images - even very large ones down to a a couple of hundred kbytes which is reasonable. If you resize first to a max size (like say 1080p) it'll be much smaller than that yet.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: plUpload function
  Rod
  Rick Strahl
  May 24, 2019 @ 03:37am

I forgot to mention that I originally designed this app to run on the iPad as a point-and-shoot solution for cataloguing auctions. plUpload uses the iOS photo tools really well and that's essential. I have a little video on the help page of this prototype being used for charity auctions. http://www.rfc3auctions.com/rfc3info.htm
Every nav button does a postback before moving on to the next record so they don't have to click "Save".

Works great if the user follows my workflow. The workflow is reversed on the iPhone so they have to save the description before hitting the "Add a Photo" link, but that's clear. On the PC version I can't control the workflow as well and users can enter the description and click "add a photo". Whatever plUpload does, it reloads the page and all the other input gets lost, thus my pleading "Save changes first!" tip by the upload button.

So I'm back to my original question. Is there a way to use your classes with plUpload by just calling it directly in my FoxPro code after I've posted changes? I want to postback on the Add Photo button, just like I do on the Nav buttons, before invoking plUpload.

Uppy looks great if I can get it to work the same way on the iPad/iPhone.

I'll be in Boston next week speaking with developers at my company about upload options. I hope they can help me with Javascript but the WWC classes may throw them for a loop. I just re-did the entire UI implementing the Bootstrap classes that the company has standardized on, in preparation for releasing this as an app for the auction house industry next year (my third industry app in 30+ years). When I went to Bootstrap, I lost the plUpload functionality altogether. Maybe Bootstrap has a conflicting listener. I have no idea.

As I said I'll be reaching out in the near future on this project.

Thanks,
Rod

Gravatar is a globally recognized avatar based on your email address. re: plUpload function
  Rick Strahl
  Rod
  May 24, 2019 @ 12:45pm

Yes you can use script code to initiate the upload. At minimum you can just trigger the click of the button:

$(document).ready(function() {
   $("#btnUpload").trigger("click");
});

Which should trigger the button as if it was clicked.

So you build the page, make sure the button works, then trigger the button to upload.

To upload with the rest of your stuff is trickier, because plUpload is async while the post back is not. The only way to do a proper single submit is to use standard file upload instead of plUpload.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: plUpload function
  Rod
  Rick Strahl
  May 28, 2019 @ 01:29pm

Thanks, Rick. This approach will work I think. But I can't get it to trigger the click. I've tried moving it around on a test page, but no luck.

Here's the test page, which won't complete obviously, but I just need to see the file dialog pop up, which it will on the button, but won't on load.

My next question would be can I eliminate the button and "browse_button:" entirely and just have it fire when the page loads? I'm happy to build the page just for that purpose. My onUploadComplete function then reloads the page without the script.

<!DOCTYPE html>
<html lang="en">
<head>

	     <link href="../scripts/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css" 
	          rel="stylesheet"
	          type="text/css" />

	    <script src="../scripts/jquery.js" type="text/javascript"></script>
	    <script src="../scripts/ww.jquery.js" type="text/javascript"></script>

	    <script src="../scripts/plupload/plupload.full.js"></script>    
	    <script src="../scripts/plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
	
</head>
<body  >

<h3>plUpload Test</h3>

<button class="btn btn-link" id="btnUploadImage">Add One Photo</button>

</body>

<script>
$(document).ready(function() {
   $("#btnUploadImage").trigger("click");
});
</script>


<script>

 showStatus({ autoClose: true });

 // SIMPLE UPLOAD WITHOUT PRECONFIGURED UI USING BASE plUpload API
$(document).ready(function() {

	var uploader = new plupload.Uploader({
		// these two are required
		browse_button: 'btnUploadImage', // you can pass in id...
		url: "plUpload.r3?refno=90000000",

		multi_selection: false,  // you can also pick multiple files at once here
		runtimes: 'html5,flash,html4',            
		chunk_size: '64kb',
		
		// Resize (downsize really) images on clientside if we can
		resize: { width: 1024, height: 768, quality: 85 },

		filters: {
			max_file_size: '8mb',
			mime_types: [
				{ title: "Image files", extensions: "jpg,jpeg,gif,png" }
			]
		},
		// Flash settings
		flash_swf_url: 'scripts/plupload/plupload.flash.swf',

		init: {
			PostInit: function () {
			},

			FilesAdded: function (up, files) {
				// start uploading - we only accept one file
				uploader.start();
			},

			UploadProgress: function (up, file) {
				showStatus("Upload Progress: " + file.percent + "% complete", 3000);
			},

			Error: function (up, err) {
				showStatus("Upload failed: " + err.code + ": " + err.message);
			},


			FileUploaded: function (up, file, response) {
				uploader.removeFile(file);
			},
			
			UploadComplete: function (up, files) {
				window.location.assign("plupload_one.r3")
			}
		}

			  
	});

	uploader.init();
	
	
});

</script>

</html>

Gravatar is a globally recognized avatar based on your email address. re: plUpload function
  Rick Strahl
  Rod
  May 28, 2019 @ 03:32pm

You can try:

document.getElementById("btnUploadImage").click();

As to the button you need that to trigger the file selection. You can make the button invisible with display:none or opacity: 0 but i think it has to be there for plUplaod to work at least in that particular mode.

Honestly I don't remember all the details about plUpload. You're best off checking the plUpload site for examples - they have plenty of them to show different ways to hook up the upload sequence.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: plUpload function
  Harvey Mushman
  Rod
  Jun 9, 2019 @ 07:45am

I think I'm coming into this conversation late, but I can offer that button without a type="button" attribute acts like a type="submit". This might be an issue if submit is trapped elsewhere in ulUpload or causing conflict in your code. Only a guess on my part but would be interested in hearing your final solution or result.

Best...

© 1996-2019