Git Product home page Git Product logo

vue.js-script-to-use-google-api's Introduction

Vue.js-Script-to-use-Google-API

Script to use one simple Vue.Js plugin and do google sign-in and insert files in google drive

Getting started

Prerequisites

First you will need to install the vue-google-api plugin from https://www.npmjs.com/package/vue-google-api

To do the Google Sign-in

 signin: function() {
     this.$gapi
        .signIn()
        .then(user => {
          console.log("Signed in as %s", user.name);
          
        })
        .catch(err => {
          console.error("Not signed in: %s", err.error);
        });
    }

To do the Google Sign-out

 signout: function() {
      this.$gapi.signOut().then(() => {
        console.log("User disconnected.");
      });
    }

See all Files in Google Drive of that google accoutn already signed-in

seeFiles: function file() {
      this.$gapi
        .request({
          path: "drive/v3/files",
          method: "GET",
          params: { maxResults: "1" }
        })
        .then(response => {
          var i = 0;

          console.log("File names:");

          response.result.files.forEach(function(file) {
            console.log(file.name);
          });
        })
        .catch(err => {
          console.error("Request error: " + err);
          //console.log(err);
        });
    }

New File (with content)

Check if a file with that name already exists if it does, update it with new content, if not, create new.

 create: function() {
      this.checkIfFileExists("configs.txt");
    },
    
 checkIfFileExists: function(name) {
      this.$gapi
        .request({
          path: "drive/v3/files",
          method: "GET",
          params: { maxResults: "1" }
        })
        .then(response => {
          response.result.files.forEach(function(file) {
            if (file.name == name) {
              console.log("Already exists file with that name");
              file_id = file.id;
              found = 1;
            }
          });
          if (found == 1) this.updateFile(file_id, "Edit");
          else this.newFile(name, "Config Builder");
        });
    },
     updateFile: function(id, text) {
      this.$gapi
        .request({
          path: "upload/drive/v3/files/" + id,
          method: "PATCH",
          params: { uploadType: "media" },
          body: text
        })
        .then(response => {
          console.log(response);
          console.log("File deleted");
        })
        .catch(err => {
          console.error("Request error: %s");
          console.log(err);
        });
    },
    newFile: function insertFile(name, text) {
      const boundary = "-------314159265358979323846";
      //const boundary = "--------53170215682661314146";
      const delimiter = "\r\n--" + boundary + "\r\n";
      const close_delim = "\r\n--" + boundary + "--";

      var mimeType = "text/plain";
      var metadata = {
        name: name,
        mimeType: "text/plain\r\n\r\n"
      };

      var multipartRequestBody =
        delimiter +
        "Content-Type: application/json\r\n\r\n" +
        JSON.stringify(metadata) +
        delimiter +
        "Content-Type: application/json\r\n\r\n" +
        text +
        close_delim;

      this.$gapi
        .request({
          path: "upload/drive/v3/files",
          method: "POST",
          params: { uploadType: "multipart" },
          headers: {
            "Content-Type": 'multipart/related; boundary="' + boundary + '"'
          },
          body: multipartRequestBody
        })
        .then(response => {
          console.log(response);
          console.log("Created new file in your google drive");
        })
        .catch(err => {
          console.error("Request error: %s");
          console.log(err);
        });
    },
    

Examples

o see some work examples go to Login.vue and main.js

License

This project is licensed under the MIT License - see the LICENSE.md file for details

vue.js-script-to-use-google-api's People

Contributors

saraferreirascf avatar

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.