Enable Photo Upload timeout

[bsaiken]

@WebDevJL @damirius

Jeremie and Damir - I would like you to both weigh in on these comments.

During a photo upload, sometimes the screen locks up, or it is taking so long that the FT couldn't realistically wait. Can we have a progress bar, or a timeout, or something in cases of marginal connectivity? I say that, but in this case my connectivity was decent, so I don't think it was a slow connection.

The way the button disabling was implemented is not what I wanted. Right now, as soon as the upload starts, the Upload and cancel buttons are disabled until the file is uploaded. First of all, the cancel but should not b disabled at any time. As far as the upload button is concerned, I want the FT to be able to press the upload button as soon as they have selected their photo, but, the button won't execute the function until the photo finishes uploading. This way, the FT can select the photo they want, depress upload, and during the time it takes for the photo to upload and complete the save process they an move to the next location.

Check the code to see how the functions execute. There are different scenarios that I am encountering in the field. For example, let's say I am at the Location, I click on the dropzone box, and I then realize I haven't even taken the picture, so, I open the photo app on my phone, take the picture, then go back to my browser to select the photo. Is that a problem with the current code?

[FWAJL]

@bsaiken @damirius

I think it is easy enough to enable the Cancel button. Do you agree @damirius ? A loading div displayed while the photo is being uploaded is also possible to do. However, we need to know:

• the definition of timeout: do you want to cancel automatically the upload if it takes to long?
• the timeout value, e.g. when do we consider the action timed out.
• what shall we do if the upload takes a lot of time? does the FT just stops the process and moves on?

@bsaiken First of all, the cancel but should not b disabled at any time. As far as the upload button is concerned, I want the FT to be able to press the upload button as soon as they have selected their photo, _but, the button won't execute the function until the photo finishes uploading._

I understand the first sentence but what do you mean in the second sentence?

@bsaiken Check the code to see how the functions execute. There are different scenarios that I am encountering in the field. For example, let's say I am at the Location, I click on the dropzone box, and I then realize I haven't even taken the picture, so, I open the photo app on my phone, take the picture, then go back to my browser to select the photo. Is that a problem with the current code?

I see it does and doesn't work for me on a Samsung S4 Mini. Depending on the app I use to select the photo, I get this:

And sometimes, the upload works using another Gallery app.

It works every time I use the Photo app though. However I don't know if it is possible to force the phone through the website to load a specific native app...

I will try to help by looking in the code however, we need @damirius's input since he built the document upload.

A side comment: when I upload several picture to a location, I can view them all, I only see the first one. I think the slide show is not working on the mobile UI.

[bsaiken]

@FWAJL @damirius

FWAJL wrote: the definition of timeout: do you want to cancel automatically the upload if it takes to long? the timeout value, e.g. when do we consider the action timed out. what shall we do if the upload takes a lot of time? does the FT just stops the process and moves on?

If the upload takes too long we need a way out and to notify the FT. I don't care what time we pick, we can always adjust that. For now, let's pick 60 seconds. After 60 seconds we need to stop the upload and have a popup saying "Upload not successful".

FWAJL wrote: what do you mean in the sentence, "the button won't execute the function until the photo finishes uploading."?

I think this is fixed now. And if we implement the process above, it will satisfy this condition.

As far as handling photos that did not successfully upload, I have some ideas. I need to do more unit testing before presenting my idea. Let's get the timeout feature working, then continue from there.

[WebDevJL]

@bsaiken @damirius

Clear to me.

@damirius : A plus would be to implement the timeout in the dataservice js file as a default parameter so we can use it for any ajax call. Can you do that and have you got all the info to proceed?

Thank you.

[bsaiken]

@WebDevJL @damirius I'm not sure I understand the comment. We wouldn't want a timeout to be the default in all cases, but if it were an option for all cases, that would be OK.

[FWAJL]

@bsaiken @damirius

Yes, it would be an option that can be specified as an extra parameter from method in a controller.js file to the dataservice.post method. By default, this parameter is undefined so that no timeout happens.

[damirius]

@bsaiken @FWAJL

We don't use datacx for photo uploads, we use dropzone class which uses it's own ajax call wrapper function to make the upload. That said we can add timeout for that too, but just wanted to clear some things up here. For the upload progress, dropzone already has it's own upload progress bar for each file. Maybe I can display it somehow even when infowindow is closed.

[bsaiken]

@damirius The dropzone progress bar is not progressing when I try to upload a file with my iPhone.

[damirius]

@bsaiken

Does that happen only on your iPhone or it happens on your desktop computer too? I tested it with my android: https://drive.google.com/file/d/0B7Laiv0PjSvDbFdOUlpTa1JOT2M/view First photo is from camera, second one is selected from file storage on phone.

Also I've found some bug in DocumentDal manager which prevents removing photos. Do you want to open new task for that or should I commit it as the part of this Issue?

[bsaiken]

@damirius Testing on a laptop, or even a mobile device connected to WiFi, is not sufficient. Field tests are required.

In this first example, the file does eventually upload, but the progress bar does not move until the end, so it really is not showing "progress".

https://drive.google.com/file/d/0B0NK6kSZhZ2BcWtFUS11aHpuMVU/view?usp=sharing

In the second video, the photo never uploads. I cut the video short to save space, but the file did not upload after 5 minutes.

https://drive.google.com/file/d/0B0NK6kSZhZ2BRkUzTGxESENKMGc/view?usp=sharing

Also, you see the buttons are disabled, and the way this is done is incorrect, although I think that is getting fixed...

[damirius]

@bsaiken

I'll open my ip for external connections and I'll see that I test it out over mobile connection. I'll get back to you with some videos.

Also we can enable buttons easily, that's not a problem.

[damirius]

@bsaiken @WebDevJL

I pushed new commit for this issue regarding that fix for DocumentDal which prevented file removal. Since selectOne method was bugged, there was a possibility that some other stuff wasn't working as well (anything that uses document table).

[damirius]

@bsaiken

OK here's the video from my phone, opened my server's ip for external connections and tested it outside. Internet connection is OK, but not great, somewhere around 400KBps.

https://drive.google.com/file/d/0B7Laiv0PjSvDazZGdGxiaEd6ekE/view

I'll see that I run some more tests on slower connections to see if that causes some problems.

[bsaiken]

@damirius How are you capturing a video on your phone?

[damirius]

@bsaiken

It's some app for android called "Rec.", you can see it at the end of the video when I switch to it to stop recording.

[damirius]

@bsaiken @WebDevJL

OK, so since this one is the biggest issue, let's see what we can do.

So we want to let FT select photos that he wants to upload in the location infowindow even when he closes location infowindow by pressing update. We need to delay ajax call untill the photos are uploaded and we need to show him progress bar somewhere on the map? What should we show if he selects multiple images, multiple progress bars?

What happens if that FT opens up another location infowindow and uploads photos while photos for the previous location are uploading?

[bsaiken]

@damirius All good questions. Let's make this simple to start with. I really just need the most basic behavior, then see it field work demands something more complex.

Question: Is it possible to limit the photo uploads to just one image? If that is easy, then it's an obvious first step. If you think about it, it does not make sense to upload more than one photo because each photo may have a caption, and we can only input one caption. It seems like we could set the uploadMultiple=false or maxFiles=1 in order to accomplish this.

Now, what happens when the FT pushes the "Update" button, which could just as easily be renamed "Upload". We know it will take a few seconds to upload the photo. In fact, we are going to set a timeout so that if the photo does not upload within a certain time, the action is stopped. For now, let's set the upload timeout to 60 seconds, as I suggested previously. So, if the photo is not uploaded within 60 seconds, the the action stops and a popup appears that says "Upload not successful". There are If the FT acknowledges the the popup (by clicking "OK"), all popup windows, including the info window, are closed.

During the 60 second timeout period, the FT is not likely to wait around, but will move on to other work. Obviously, the other work cannot be navigating to some other url on the website, but they could do something else with their phone, like accept a phone call, take a photo, or maybe even open a new url in a new window. In other words, the upload is happening "in the background". Most likely, though, the FT will not be using their device at all during the timeout period.

Currently, if I press "Drop files here to load" (which should be singular) and choose a photo, the "Update" and "Cancel" buttons are disabled. This is NOT what should happen. First, the "Cancel" button should never be disabled. The FT should be able to cancel an upload at any time. Second, the "Update" button should not be disabled. The FT should be able to click the "Update" button as soon as they have selected the photo. If the photo uploads really quickly, before the FT clicks the "Upload" button, then the "Upload" can take place immediately. But, if the "Upload" button is clicked some time within the 60 second timeout period, and the photo is not yet uploaded, that is OK, it's just that the function called by pressing the "Upload" button will not execute until the photo has been uploaded.

The FT would not be able to open a second info window while one photo is uploading because they would need to cancel or complete the current upload to close the current info window and navigate somewhere else.

Here is another question - I was not able to discern this reading the dropzone documentation. Is it possible to save information about the file while uploading the file using dropzone. For example, it would be useful to be able to save the photo time stamp and file name (not the file name we create, but the file name on the mobile device).

[damirius]

@bsaiken @WebDevJL

All changes are made on mobile/map and mobile/loc_list. Buttons are always enabled again. I can't change "update" button to "upload" button because pressing update submits all fields to the php controller and saves them in the db, not just photos. So location description, coordinates etc.

Document upload was already independent of other fields, when you drop the image in the dropzone, uploads starts immediately and when uploaded it will be linked to that location, other changes are submitted only on "update" button click. Also pressing update will refresh the page so that markers get new coordinates on the map and what not. That said I added "Upload" button which will only dismiss the infowindow, selected photo will continue uploading. Clicking on other markers will bring up the alert box with message "Photo upload in progress.", so user will not be able to edit other locations. If infowindow is open when photo successfully uploads, infowindow will be closed. Cancel button will also dismiss the modal, but now it will also cancel photo upload. Dropzone didn't have a timeout option so I had to edit their class to add xhr.timeout. Timeout can be specified in init options when creating new dropzone with the keyword timeout in ms. I left default at 0, but added 60000ms (60s) timeout for both map and loc_list dropzones. If timeout happens it will show alert box with the message "Upload timeout.", clicking OK will dismiss all open infowindows. Jeremie mentioned also that you can't use previous ("<") and next (">") buttons on lightbox from tablet/phone. In fact you could but they show by default only on hover, so I changed that in css for mobile theme, they should always show now. Removing images also no longer refreshes the page, it just closes the infowindow after image is deleted.

That said, biggest problem here is "Update" button, because pressing it FT will submit description/coordinates and after that page will be refreshed, this will break all current uploads (because refresh). That was the main reason why I disabled update button on upload.

Also I think that we should add confirmation box (alert) when photo is successfully uploaded because if FT closes up the infowindow (by pressing "Upload") before upload finishes he will not get any confirmation.

Tell me what do you think about that so I can see how we can solve that part.

EDIT: I've added alert box on successful photo upload, it will only show if infowindow is closed (by pressing "Upload" button), if it is open FT will see that image is uploaded in the dropzone.

[bsaiken]

@damirius Unfortunately, due to my internet situation, I cannot test unless the code is live on the server. However, I did some tests using my laptop, and I am confused. The "Upload" button did not do anything - the file uploaded on its own as soon as I selected the files.

Also, if the FT were to press the "Update" button, while the file is in the process of uploading, the upload is interrupted and file does not upload. Does this fix address that particular problem?

[damirius]

@bsaiken

Are you sure that you read my whole comment? Like I said, photos always start uploading as soon as you drop them in the dropzone, upload in fact does nothing special it just hide infowindow without breaking the upload process. Cancel button now cancels uploads process. Also as I said Update button makes ajax call to the php controller that saves description and coordinates of that location, after that it refreshes the page and that breaks current upload of course.

In any case to cut this story short, I'll see that I combine those two together and to remove page refresh.

[bsaiken]

@damirius I read your comment, but i may have misunderstood, and I was responding more to what I saw during testing than anything. It is a bit of a handicap that I can't properly test unless the code is on the server and I can use my mobile device in a live situation.

[damirius]

@bsaiken

OK, no worries. I've combined upload/update buttons in one button. We no longer refresh the page after edit, which caused upload breaks. Markers should be moved on the map after edit. I'll see that I test it out later more to check if there are some problems with it.

[bsaiken]

@damirius OK. I do want to clarify one thing. You say that the markers should be moved after edit. That assumes that the lat and long coordinates have changed. The lat/long will only change if one of two things occur: the FT manually changes the numbers (which is almost never going to happen - I am even thinking of removing these fields), or if the FT clicks the "Mark" button. Retrieving the coordinates does not happen automatically.

[FWAJL]

@bsaiken does your assignment means that it's ready for code review/release?

[bsaiken]

@FWAJL @damirius I posed a question to Damir, so I am waiting on his response. If you know the answer, you could chime in.

[FWAJL]

@bsaiken I'lll need to review all the comments since my last comment here. I'll catch up the details soon.

[bsaiken]

@FWAJL @damirius Depending on Damir's response to #1250, I may change the way we upload photos altogether.
Not only am I having trouble in the field uploading photos, it is an obvious flaw to have FTs upload photos in the field. This is for several reasons. First, if they have a poor connection, the upload may take a long time, so long it would timeout. Second, FTs with mobile phones are paying for a (limited) data plan. If I ask the FTs to use up all their data uploading photos for work, that is not going to go over. People just won't do it.

So, my current thinking is that the FT uploads only the following while in the field: file name (mobile device file name) date and time stamp thumbnail

and, the date and time stamp and thumbnail could be optional if we are still having problems.

Then, as part of their task assignment, they must find a WiFi hotspot. Once they are connected to a WiFi hotspot, the FT opens a new webpage that handles the photo uploads by matching the already uploaded file names with the file names on their smartphone. We could also possibly adapt this method to upload completed pdf forms. I just need to know if what I am asking can actually be done.

[damirius]

@bsaiken @FWAJL

If FTs can't upload date and timestamp because of connection problems then they for sure can't upload thumbnail. That said why are they uploading file name and thumbnail at all? Can't they just upload images when they are on WiFi and that's it?

I'll answer the thumbnail question on appropriate Issue.