Fileupload element loses file after failed validation

[p38]

Hi All, using the file upload element in non-ajax way, I find that if a form fails any element validation, then all the files previously marked for upload are lost.

Now I have a form with 8 file uploads, and my customers are getting pretty peeved off because they forgot to fill in an invoice no, and have to re upload all 8 files again after the validation fails.

Anyone got any ideas how to get around this?

Paul

 

[troester]

As far as I know this is a HTML thing with non-ajax fileuploads (there should be a thread somewhere).
Can you switch to ajax fileupload? You can set max to 1 if you need multiple single uploads.

 

[p38]

thanks troester, I will try that, altho once changed, all the 100's of files images already uploaded will not show in the list, as it changes the way the files are stored.

However, if this solves the problem, then perhaps I can backdate all the old files

 

[troester]

I think with filemax=1 ajax-fileupload is handled without repeat table (like the non-ajax one).
But I didn't test, so yes, be careful and maybe post results here (and/or add to WIKI).

There's a remark in the WIKI "NOTE! Until a good solution is found the fileupload element in ajax mode doesn't work within any joined group, repeated or not."
I don't know if this is still valid.
And there have been issue with ajax or non-ajax in popup forms (I never can remember which one and I don't know if this was fixed...).
So just try...

 

[troester]

Seems with filemax=1 it's not using a repeat table but storing a JSON
[{"file":"\\images\\stories\\Lighthouse.jpg","params":"{\"rotation\":0,\"scale\":261,\"imagedim\":{\"x\":200,\"y\":200,\"w\":469.79999999999995,\"h\":352.34999999999997},\"cropdim\":{\"x\":310,\"y\":206,\"w\":180,\"h\":150},\"crop\":true,\"quality\":0.9,\"mainimagedim\":{\"x\":200,\"y\":200,\"w\":180,\"h\":135}}"}]

instead of non-ajax
/images/stories/Lighthouse.jpg
So I think you can switch but have do run some phpmyAdmin to create this format with some default values.

 

[p38]

Hi Troester, I have done some tests using AJAX uploads.Here are my findings.....

1) If a validation fails, the filename is retained, so this solves the validation problem
2) The AJAX file upload does NOT work in an AJAXIFied form, which is not an issue for me as I never use them, they are too temperamental.
3) After upload, an unwanted preview modal pops up, and there is no setting to disable this. No trainsmash, altho on mobile it was set to 440px so it went off screen. It took me a while working through the source code to figure out that it uses the crop width and crop height setting, even though I had switched the crop off. This tells me that after upload, a check is not done to see if crop is switched off before previewing the cropped image
4) Once uploaded on the form, in the mobile app, sometimes the image is not shown if I press the preview button, altho the preview fabrik modal window does popup. It looks like a refresh issue,
5) When the preview works, I notice it does not scale the image to the modal window size, so if you have a large image, it is rather useless
6) Finally, here is a major issue I discovered which is kinda a deal breaker...... If I start uploading an image and save the form BEFORE it had uploaded fully, then the images is lost. So it looks like there is no check to see if an AJAX call in in progress before saving the form.

Perhaps one can play around with an element validation to prevent this, but the thing is the upload elements on my form are optional uploads, so I cant even put an isempty validation. To get around this I need to set a flag as soon as the AJAX starts, and then I can do a validation isempty condition to determine if the file name exists in the element or on the server

Have you perhaps any ideas?

Paul

PS: I can backdate all my old single filenames using teh format, so no problem here

 

[cheesegrits]

Yup, the issue with non-AJAX uploads being removed after a failed validation is an HTML thing. It's a security issue, to prevent malicious forms pre-filling a file input field with (say) '/etc/passwd', or any other sensitive local file, hiding that input on the form, and silently hardvesting your private files. There is no way of working round it, other than using AJAX uploading.

2 - that's a browser thing. It is possible with some modern browsers to upload when the form is submitted with AJAX, but unfortunately it doesn't work on some fairly major browsers (like IE and Safari). I did add some code earlier this year in the form JS submission method that does it, but I've disabled it for the moment, till I figure out a reliable way of knowing if the browser supports it, as otherwise uploaded files just get lost with no trace and no feedback.

3 - yeah, preventing that automatic preview opening is fairly high on my priority list to fix. I'll try and get it done this weekend.

4 - haven't experienced that but then, I don't do much testing on mobile for uploads, as it's not something our clients have needed as of yet. As with most Fabrik features, we put most of our effort into stuff we need, when developing for the clients who pay our bills.

5 - I'll take a look at that when I work on 3

6 - we definitely do have extensive code that should prevent the form being submitted until all uploads are complete. Our form JS has a "submit broker" ...

https://github.com/Fabrik/fabrik/blob/master/media/com_fabrik/js/form.js#L1370

... called during submit. The submit broker then calls 'onsubmit' for all elements, and in the fileupload JS, that checks to see if all files are uploaded:

https://github.com/Fabrik/fabrik/blob/master/plugins/fabrik_element/fileupload/fileupload.js#L763

... and if not, the submit broker will keep trying every 500ms ...

https://github.com/Fabrik/fabrik/blob/master/media/com_fabrik/js/form-submit.js#L58

If that isn't working, it usually means some other error is short circuiting the submission process.

However, it is of course possible that there's a problem with the way the upload element confirms that files are uploaded, so I'll test that. But take a look at the console in your browser's dev tools, see if there are any JS errors being reported during form load or submission.

-- hugh