Jump to content

File Uploader


pconkie

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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...