Jump to content
pconkie

File Uploader

Recommended Posts

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.

1.PNG.25ee67b40c223102636dbdf5cb6d0192.PNG

 

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 -

Capture.PNG.194904f8d8544c8c7feaea809c80d110.PNG

So hoping there is just a quick option to set to get this to work properly!

Thanks.

Share this post


Link to post
Share on other sites

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;

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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...  

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
6 minutes ago, pconkie said:

@adamw I think you deserve a pay rise! 

I assume that worked then?

😛

 

 

Share this post


Link to post
Share on other sites

Time lapse...

1. form in a modal opens

2. Upload button pressed

1.PNG.ec85c1835733a430d60f267cfdf2b4f2.PNG

3. Why does frog think i;m trying to leave?  This pop-up appears for some reason.

4. Press the cancel button

2.PNG.b91a5451b0d736cd5d66f80daddb964b.PNG

5. Up-loader appears above the modal - thanks!

3.PNG.a8fcf0a55fa297d3ef4801fede502b5c.PNG

6. file(s) uploaded

5.PNG.cbe308b9d4120bf30f43695deca4936a.PNG

7. And attached.

6.PNG.6e7df0bbc5daec2759433e35f352f9b0.PNG

 

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>&nbsp;"+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));
        }
      }
    }
  });

 

Share this post


Link to post
Share on other sites
4 minutes ago, adamw said:

I assume that worked then?

😛

 

 

Yes it did - thanks!

Sorry though, just resulted in another question!

Share this post


Link to post
Share on other sites
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.

 

Share this post


Link to post
Share on other sites
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....

Share this post


Link to post
Share on other sites
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.

  • Thanks 1

Share this post


Link to post
Share on other sites
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!

  • Thanks 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...