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

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

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

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

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

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

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

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>

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

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...

Hi Rick,

So back to some questions about the plUpload implementation.

With the help of a Javascript developer here that I now have the privilege of working with, I was able to get plUpload to perform the way I wanted - Click a button with id="btnUploadImage" to trigger the $(document).ready(function(), the onUploadComplete happens and the picture is where I need it, then, at the end, the function now $clicks my "save" id'd control, which posts back the other contents of the page and reloads the form, picture included. That's exactly the way I wanted it to work. One click. My users can upload a picture in the process of adding other data to the form and I make sure everything is saved and the form is re-loaded with the picture and their other changes. I even have a YouTube video of the workflow on the Pad and iPhone.

Now, I am trying to add a very basic javascript Rich Text control but my JS developer says the problem is I have too many jquery libs. Here's the comment he gave me to relay to you:

Rick:
Rich Text has requirement of JQuery 3+
PLUpload is currently using JQuery 1
Find way to upgrade PLUpload to JQuery 3 - maybe even load JQuery 3 one time for the entire project Could consider using jquery-migrate tools to do so

Hope that makes sense. What he is referring to are the libraries I still load from your original implementation. If I load theirs last, it works, if I load yours last yours works, not both.

He's helped me upgrade to plUpload's current stable release (2.3.6) and got it all working, bless him, and this is what I now load for plpUpload.

<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-2.3.6/js/plupload.full.min.js"></script>
<script src="../scripts/plupload-2.3.6/js/jquery.plupload.queue/jquery.plupload.queue.min.js"></script>  

So can we make it work? Or do I need to bail out on plUPload and start over with Uppy? Need to move fast. I have improved my knowledge of Javascript quite a bit since this started, plus I have help now, but the idea of starting over is daunting. I could set up meeting with my guy and ask you to provide some consulting services if that's a possibility.

Thanks, Rod

I don't think it should be a problem running plUpload with jQuery 3, but even if not maybe a more recent version would work?

+++ Rick ---

That would be good. So maybe I can use your help getting the libraries sorted out. Can I get an hour scheduled with you and Dan, my JavaScript guy, sometime soon? I'm in the office in Boston tomorrow (Wednesday) 1-4pm EST, but it could be any time that works for you and EST for Dan.

Hey, Rick.
Worked with my Javascript guy today and we got it resolved. As far as I understand we copied a few script functions out of ww.jquery.js into my page builder and then eliminated that libarary in favor of 3.3.1 provided by Bootstrap. FYI.
Everything works now, so no help needed.

Hey, Rick. (Sorry, looks like I replied to myself before)
Worked with my Javascript guy today and we got it resolved. As far as I understand we copied a few script functions out of ww.jquery.js into my page builder and then eliminated that libarary in favor of 3.3.1 provided by Bootstrap. FYI. Everything works now, so no help needed.