1

Files on google drive

In looking for other topics on this I have not quite found what i want on the forum.

So at the moment I am storing images of files (customer Order Acknowledgement/ Delivery Note etc) within 6 set image fields within each job record. Which is great 

But my data space is taking a hit and I am nearing the upper limit of my combined users storage.

I have Google Drive (GD) and it might make sense to store these images on GD and have one or more URL fields in my table/form.

As I see it I would have to put the image onto google first then copy the url and past it into a given URL field.

But that is backwards to what I what to do.

Ideally I want to place the image into the image field then run a script to copy that image onto the google drive (say under a common folder) and then auto make the url link back to ninox url field that way. (ie do all this without going to GD) then remove the original image I put into the image field in Ninox (either then or later ( i can do this part).

Has anyone either achieved this or know if it can be done this way (or in dropbox or whatever)

thanks

Mel

11 replies

null
    • Ninox partner
    • RoSoft_Steven.1
    • 1 yr ago
    • Reported - view

    Maybe with the google drive API? or with make (integromat)

    • Haavard_Hjorteland
    • 1 yr ago
    • Reported - view

    Hi Mel,

    Please tak a look at this recent topic: https://forum.ninox.com/t/m1hv4zm/import-an-image-from-web

    This was invented by francesco.stefanello and enhanced by Sean

    I have partly done what you want, regarding Ninox storage space. For the next part regarding auto copy from Ninox to GD , I have no clue.

    I'm using Onedrive. With Google drive it includes one extra step. Sorry if the exact wording in the steps are not 100%, I'm using Norwegian language in GD. So I hope the code works I you want to try.

    1: In a TAB, create 6 Text fields named IURL1, IURL2 etc. to IURL6

    2: 1: In the same TAB, create 6 Image fields named eg. Image1, Image2 etc.

    3: Insert a FX script in the same TAB with ths code:

    html("
    <script>
        var object = document.querySelectorAll('.component.editor.editor-file');
        object[0].children[2].style.backgroundImage = 'url(" +
        IURL1 +
        ")';
        object[1].children[2].style.backgroundImage = 'url(" +
        IURL2 +
        ")';
        object[2].children[2].style.backgroundImage = 'url(" +
        IURL3 +
        ")';
        object[3].children[2].style.backgroundImage = 'url(" +
        IURL4 +
        ")';
        object[4].children[2].style.backgroundImage = 'url(" +
        IURL5 +
        ")';
        object[5].children[2].style.backgroundImage = 'url(" +
        IURL6 +
        ")';
       </script>
    ")

     

    4: Go to Google Drive, selct your image, click the "Share" icon and copy link (first select sharing options You/General.)

    5: Go to this link: https://www.labnol.org/embed/google/drive/

    Copy your link to "Google Drive Link + Generate Embed code. Copy the "!Deirct Image Link"

    6: Paste this link into your IURL1 Text field, etc.

    Then the image should hopefully show in your Image1 field.

    7: OPTIONAL: Insert a URL field under each Image field to allow clich and open image in Fullscreen from Google Drive. Copy the link from step 4 in here.

    My example:

      • Ninox developper
      • Jacques_TUR
      • 1 yr ago
      • Reported - view

       ChatGPT gave me a simple solution for displaying a file from GoogleDrive :

       

      To embed a Google Drive file into an HTML page using an `iframe`, you can follow these steps:

      ### Steps to Share the File from Google Drive:
      1. **Go to Google Drive and locate the file you want to share.**
      2. **Right-click on the file and choose "Share."**
      3. **In the dialog that pops up, click "Change" next to "Anyone with the link."**
      4. **Change the access to "Anyone with the link can view" or according to your preferences.**
      5. **Click "Copy Link" to copy the sharing link.**

      ### Steps to Embed in an `iframe` Tag:
      After obtaining the link, you'll need to slightly modify it to use it in an `iframe`. Let's say your link looks like this:
      ```
      https://drive.google.com/file/d/FILE_ID/view?usp=sharing
      ```
      Modify it to look like this:
      ```
      https://drive.google.com/file/d/FILE_ID/preview
      ```
      Then, you can use this link in an `iframe` tag as follows:

      <iframe src="https://drive.google.com/file/d/FILE_ID/preview" width="640" height="480"></iframe>

      And there you go, the file should now be embedded in your HTML page. Don't forget to replace `FILE_ID` with the actual ID of your file. The `width` and `height` values can also be adjusted as needed.

      A quick reminder: make sure the sharing permissions allow visitors to view the file, otherwise it won't work.

    • Haavard_Hjorteland
    • 1 yr ago
    • Reported - view

    Thank's Jacques,

    I actually managed to do the same in my post above, but "With Google drive it includes one extra step"

    As I didn't find a easyer way inside GD, I fond this iframe generator: https://www.labnol.org/embed/google/drive/

    Onedrive have a "Build in" choice that not require any iframe generator or editing of the URL.

    Anyway, eighter way to do it includes some steps to make (that Mel and all of us might not like)

    • Haavard_Hjorteland
    • 1 yr ago
    • Reported - view

    Aha, I found out what yo ment, by putting the iframe code in a Formula field (instead of Image fields option above)

    I had to modyfy this from GD:  html("<iframe src='https://drive.google.com/file/d/1NggmxREHprUhcPSTcchqu2EnripzKFjA/preview' width='640' height='480'></iframe>")

    to: html("<iframe src='https://drive.google.com/file/d/1NggmxREHprUhcPSTcchqu2EnripzKFjA/preview' width='640' height='480'></iframe>") 

    I added some  ' characters in between to make it acceptable in the FX.

    thanks, this was yet another "Photo album" option I have to explore. I have used FX Iframe before, but that did not scale the image to fit. Your solution seems very good, with zoom and everything 👍

    I will try to make a script that  converts the link from GD automatically.

    • Mel_Charles
    • 1 yr ago
    • Reported - view

    Oh Cheers guys 

    That gives me something to work on and with.

    Will keep you posted as to how i get on

    • Haavard_Hjorteland
    • 1 yr ago
    • Reported - view

    I came up with this solution. It might be done easyer, but it works.

    In a TAB, create the desired number of Text fields named e.g.  GoogleCode1, GoogleCode2 etc.

    Copy/Paste the links from OD (as Jascques described above) into GoogleCode1 , GoogleCode2  etc. 

    Use Formula fields for how many embedded images you want, using this code in the FX's.

    if GoogleCode1 > "" then
        let gc := GoogleCode1;
        let i1 := index(gc, "/d/");
        let i2 := index(gc, "/view");
        let fid := substring(gc, i1 + 3, i2);
        let iframe := html("<iframe src='https://drive.google.com/file/d/" + fid +
            "/preview' width='480' height='360'></iframe>");
        iframe
    end

    The script extracts the the Filde_Id, and replace some doubble "" quotes with singe ' quotes.

    In the other FX's adjust  "if GoogleCode1 > "" then     and let gc := GoogleCode1;  to GoogleCode2 etc.

    I found that width=480 and hight= 360  fits best for me, leaving space for three Images pr. row in Ninox when adjusted to fit. Using lower reolutions may result in "zoom" function gone. It even works with videos from OD, with audio and all.

    I found the process a little bit easyer when I "Shared" the whole GD folder in witch I have the desired photos. Then the 'sharing permissions ' choice is not neccesary for each individual photos.  Just 'Copy Link'

    I use Windows, not Mac. To simlify further I just installed "Google Drive" for Windows, giving me "Google Drive (G)" as a folder in "This PC". When set up to sync with GD on the web, it is just drag and drop images with Windows Explorer from you Computer into the desired OD Folder. 

      • Ninox developper
      • Jacques_TUR
      • 1 yr ago
      • Reported - view

      Haavard Hjorteland 

      Good idea to share the directory directly 👍. With this, you can also display documents, videos, or spreadsheets. I think I'm going to use this to share some documents. I'll also try to create a link using the file ID.

      And coming back to your code, you can simplify the extraction of the file ID by using the 'extractx' function:

      var GoogleCode := "https://docs.google.com/document/d/THE-FILE-ID/edit?usp=sharing";
      var fid := extractx(GDLink,"(.*/d/)([^/]*)","$2")
    • Haavard_Hjorteland
    • 1 yr ago
    • Reported - view

    tnx, the extractx modification worked when editing my script like below.

    I used Regex a bit myself som years ago, in my IT Telecom and A/V job. Creating dial rules for Cisco Call Manager and VCS (Videoconferencing Gatekeeper). But I'm too lazy to deep-dive into that simple, but yet complicated syntax right now, if I dont have to 😅

    Yes, it seems like most files supported by the browser is previewing OK, like PDF, mp3, , Word, Excel etc.

    if GoogleCode1 > "" then
        let gc := GoogleCode1;
        var GoogleCode := "https://docs.google.com/document/d/THE-FILE-ID/edit?usp=sharing";
        var fid := extractx(gc, "(.*/d/)([^/]*)", "$2");
        let iframe := html("<iframe src='https://drive.google.com/file/d/" + fid +
            "/preview' width='480' height='360'></iframe>");
        iframe
    end

    • Mel_Charles
    • 1 yr ago
    • Reported - view

    Hmmm interesting reading though. (not yet tried to emulate it as a bit busy this week now) butam I right in thinks that you nned to put the file in GD/DB first?

    Just to be clear I want to do the following steps :-

    1. Create a master fold on Google Drive (GD) /drop box(DB) or whatever (let's call it Proofs)

    2. Put an image into the proof Field in Ninox from my desktop (easy drag and drop)

    3. Have that image copy from Ninox into GD under the Proof folder

    4. Once image is a dropped. Bring back a url link to a url link field on the form underneath the image field.

    5. Delete the image field (set it to null). Just keeping the url link that was auto created in in my nenox form....

    OR if it can't be done that way then.....

    1. Have GD drive sitting open under the Proofs folder

    2. Have the current job record open

    3. Drop the image into the GD Folder

    Have that last image dropped auto create a link back to the URL field on the current record that is open in Ninox.  if not by auto means then maybe by a button script to grab it from GD?

    Ideally, I don't want to drop in GD then manually have to copy the links back to Ninox. (Being idle? - Yes, most definitely. I am looking for the most simplest solution that means my team members do not have to think about remembering to copy paste.

    My other option is to pay for the extra GB's that ninox want to simply have the images held with the DB but this ciauses all sorts of issues . Ie one job might images of quote, upto 5 proofs. order ack,/ delivery notes images etc and all this really bloats the DB! and having test this over the last year i can only hold a couple of months worth of images before I run out of room. great for Ninox but.... the costs really spiral

Content aside

  • 1 Likes
  • 1 yr agoLast active
  • 11Replies
  • 513Views
  • 5 Following