pconkie Posted July 25, 2019 Share Posted July 25, 2019 I've put a non frog form inside a modal to turn it into a custom pop-up form. We have decided we need the ability to upload files to the form, so I have added a button which opens the file up-loader. The problem is the file up-loader opens beneath the modal and can not be interacted with. Here is the code i'm using: obj.modal.find("[data-name=file-upload]").click(function() { $('.os_core:first').trigger('os.app.upload', { "data": { "upload_type": "asset", "site_uuid": "62D4442D2002520CF7345F0960EDDD095847DB4C186723A6", "focusApp": $('.modal'), "callback": function(result) { if (result.files && result.files.length) { $.each(result.files, function(i, file) { console.log(file.attachment.name); }); } } } }); I've tried playing around with the focusApp option, but no luck. How do I get the file up-loader above the modal. The data-viewer app manages this - So hoping there is just a quick option to set to get this to work properly! Thanks. Link to comment Share on other sites More sharing options...
Graham Quince Posted July 25, 2019 Share Posted July 25, 2019 The modal is set to z-index: 10000; There's probably a better way, but I'd be tempted to hack it with CSS to set the file uploader to be z-index: 10001 !important; Link to comment Share on other sites More sharing options...
pconkie Posted July 25, 2019 Author Share Posted July 25, 2019 Good idea and where I started but... All of the windows inside frog seem to be managed by a library which continually updates z values as sites and apps are opened, closed, resized and dragged. This is why sites appear on top of each other in the correct order etc While I can change the z-index for a moment it quickly reverts back.... Link to comment Share on other sites More sharing options...
pconkie Posted July 26, 2019 Author Share Posted July 26, 2019 @adamw any ideas? Link to comment Share on other sites More sharing options...
adamw Posted July 26, 2019 Share Posted July 26, 2019 2 hours ago, pconkie said: @adamw any ideas? Hmmm, is this a custom modal, or using our built in modal? If it's our built-in one then it should work. If not, you could convert it to using our bsmodal stuff maybe? I don't have the exact syntax on hand at the moment, but when I get a chance I'll drop something here. Link to comment Share on other sites More sharing options...
pconkie Posted July 26, 2019 Author Share Posted July 26, 2019 obj.modal = this.modal(title, this.view(body+'.ejs', frm_data), "modal-4FDC8814200489BB58471FBB81DE9B03CD461BECB489AFEC", null, false); This is the line i should have included to show that it is the built in modal, The uploader app called from the data-viewer app modals has some custom classes which presumably put it above the modal overlay. It doesn't work when i add the same classes though... Link to comment Share on other sites More sharing options...
pconkie Posted July 31, 2019 Author Share Posted July 31, 2019 I’ve still not found a way around this. @adamw any luck? Link to comment Share on other sites More sharing options...
adamw Posted July 31, 2019 Share Posted July 31, 2019 38 minutes ago, pconkie said: I’ve still not found a way around this. @adamw any luck? Try this perhaps? obj.modal.find("[data-name=file-upload]").click(function() { $('.os_core:first').trigger('os.app.upload', { "data": { "upload_type": "asset", "site_uuid": "62D4442D2002520CF7345F0960EDDD095847DB4C186723A6", "focusApp": $('.modal'), "callback": function(result) { if (result.files && result.files.length) { $.each(result.files, function(i, file) { console.log(file.attachment.name); }); } }, launchAboveModal: true } }); notice the: launchAboveModal: true param. It looks like we use that param in a few places, so I'm hoping it does what you need it to do. Link to comment Share on other sites More sharing options...
pconkie Posted July 31, 2019 Author Share Posted July 31, 2019 @adamw I think you deserve a pay rise! Link to comment Share on other sites More sharing options...
adamw Posted July 31, 2019 Share Posted July 31, 2019 6 minutes ago, pconkie said: @adamw I think you deserve a pay rise! I assume that worked then? ? Link to comment Share on other sites More sharing options...
pconkie Posted July 31, 2019 Author Share Posted July 31, 2019 Time lapse... 1. form in a modal opens 2. Upload button pressed 3. Why does frog think i;m trying to leave? This pop-up appears for some reason. 4. Press the cancel button 5. Up-loader appears above the modal - thanks! 6. file(s) uploaded 7. And attached. So how can i get rid of steps 3 & 4? Looking in the consoles network panel for clues about what is triggering the page redirect, I can see that there is a call to preferences.profile.get (which I assume the up-loader makes, because i'm not). Is this because i'm in an app when calling the uploader, but telling it to store the files in an unopened site? In which case is it better (and I think I would prefer it) to store the documents in a shared folder - would that prevent the page navigation warning pop-up? If so, what do i need to change to have the files upload to a folder? Full code... obj.modal = this.modal(title, this.view(body+'.ejs', frm_data), "modal-4FDC8814200489BB58471FBB81DE9B03CD461BECB489AFEC", null, false); obj.modal.find(".modal-footer").append("<button data-action='modal-save' class='btn btn-success'>Save</button>") if (edit == true) { obj.modal.find(".modal-footer").append("<button class='btn btn-danger' data-action='modal-delete'>Delete</button>"); } obj.modal.find(".modal-footer").append("<button class='btn btn-default' data-action='modal-close'>Cancel</button>"); obj.modal.find("[data-action=modal-delete]").click(function() { var rec = obj.modal.find("input[name=uuid]").val(); this.deleteInt(rec); this.hideModal(obj.modal); }.bind(this)); obj.modal.find("[data-action=modal-close]").click(function() { this.hideModal(obj.modal); }.bind(this)); obj.modal.find("[data-name=file-upload]").click(function() { $('.os_core:first').trigger('os.app.upload', { "data": { "upload_type": "asset", "site_uuid": "62D4442D2002520CF7345F0960EDDD095847DB4C186723A6", "focusApp": this.element.closest('div.app_dialog'), "launchAboveModal": true, "callback": function(result) { if (result.files && result.files.length) { var $docholder = obj.modal.find("input[name=docs]"); var docs = JSON.parse($docholder.val()); $.each(result.files, function(i, file) { obj.modal.find("div[data-name=uploads]").append("<div style='clear:both'><div style='float:left' class='os-icon-ext os-icon-ext-"+file.attachment.file.mime.ext+" small'></div> "+file.attachment.name+"."+file.attachment.file.mime.ext+"</div>"); docs.push({name:file.attachment.name,ext:file.attachment.file.mime.ext,url:file.external_url,uuid:file.uuid}); }); $docholder.val(JSON.stringify(docs)); } } } }); Link to comment Share on other sites More sharing options...
pconkie Posted July 31, 2019 Author Share Posted July 31, 2019 4 minutes ago, adamw said: I assume that worked then? ? Yes it did - thanks! Sorry though, just resulted in another question! Link to comment Share on other sites More sharing options...
adamw Posted July 31, 2019 Share Posted July 31, 2019 8 minutes ago, pconkie said: obj.modal.find("[data-name=file-upload]").click(function() { Right, honest answer - at the moment, I don't know! It could be that the upload button press is performing some default html form-like action, which may be trying to submit the form. I'd need to see the code for the upload button. However, you could try changing the above bit of code to this: obj.modal.find("[data-name=file-upload]").click(function(el) { el.preventDefault(); Disclaimer - this is a wild-stab-in-the-dark-with-no-research-whatsoever-type-guess. Link to comment Share on other sites More sharing options...
pconkie Posted July 31, 2019 Author Share Posted July 31, 2019 3 minutes ago, adamw said: Right, honest answer - at the moment, I don't know! It could be that the upload button press is performing some default html form-like action, which may be trying to submit the form. I'd need to see the code for the upload button. However, you could try changing the above bit of code to this: obj.modal.find("[data-name=file-upload]").click(function(el) { el.preventDefault(); Disclaimer - this is a wild-stab-in-the-dark-with-no-research-whatsoever-type-guess. Your guesses tend to be on the money though.... Link to comment Share on other sites More sharing options...
pconkie Posted July 31, 2019 Author Share Posted July 31, 2019 4 minutes ago, adamw said: Right, honest answer - at the moment, I don't know! It could be that the upload button press is performing some default html form-like action, which may be trying to submit the form. I'd need to see the code for the upload button. However, you could try changing the above bit of code to this: obj.modal.find("[data-name=file-upload]").click(function(el) { el.preventDefault(); Disclaimer - this is a wild-stab-in-the-dark-with-no-research-whatsoever-type-guess. And now you need a big bonus too - next time I speak to Gareth i'll mention it! It's working! Would still be interested to know how you would adapt this to save the docs elsewhere...at some point.... Cheers. 1 Link to comment Share on other sites More sharing options...
adamw Posted July 31, 2019 Share Posted July 31, 2019 1 minute ago, pconkie said: And now you need a big bonus too - next time I speak to Gareth i'll mention it! It's working! Would still be interested to know how you would adapt this to save the docs elsewhere...at some point.... Cheers. Next time I have a performance review, I'll be sure to point out this thread ?? The other things are going to take more thinking! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now