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.

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

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.

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

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.

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));
        }
      }
    }
  });

 

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.

 

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

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