Блог

Я использую API Google Picker (пакет npm). Этот API аутентифицирует пользователя, позволяет выбрать файл с Google Диска, и после его выбора он регистрирует данные в консоли.

Теперь я хочу получить этот файл из консоли и отобразить его в DOM. Сценарий заключается в отправке выбранного файла в чат. Код показан ниже Нужна помощь!

 import import React, {Component} from "react";
import ReactDOM from "react-dom";
import GooglePicker from "react-google-picker";
import "./App.css";

const CLIENT_ID =
"422770371323-385g839aqfra718os8gfjpts35gj7r4p.apps.googleusercontent.com";
const DEVELOPER_KEY = "AIzaSyBy60QkynXkhEJs6tmSgvayYASb5Tm0Fco";
const SCOPE = ["https://www.googleapis.com/auth/drive.readonly"];

function App() {
return (
    <div className="container">
        <GooglePicker
            clientId={CLIENT_ID}
            developerKey={DEVELOPER_KEY}
            scope={SCOPE}
            onChange={(data) => console.log("on change:", data)}
            onAuthFailed={(data) => console.log("on auth failed:", data)}
            multiselect={true}
            navHidden={true}
            authImmediate={false}
            mimeTypes={["image/png", "image/jpeg", "image/jpg"]}
            viewId={"DOCS"}
        >
            <button>Click here to select files</button>
            <div className="google"></div>
        </GooglePicker>
        <br />
        <hr />
        <br />
        <GooglePicker
            clientId={CLIENT_ID}
            developerKey={DEVELOPER_KEY}
            scope={SCOPE}
            onChange={(data) => console.log("on change:", Object.keys(data))}
            onAuthFailed={(data) => console.log("on auth failed:", data)}
            multiselect={true}
            navHidden={true}
            authImmediate={false}
            viewId={"FOLDERS"}
            createPicker={(google, oauthToken) => {
                const googleViewId = google.picker.ViewId.FOLDERS;
                const docsView = new google.picker.DocsView(googleViewId)
                    .setIncludeFolders(true)
                    .setMimeTypes("application/vnd.google-apps.folder")
                    .setSelectFolderEnabled(true);

                const picker = new window.google.picker.PickerBuilder()
                    .addView(docsView)
                    .setOAuthToken(oauthToken)
                    .setDeveloperKey(DEVELOPER_KEY)
                    .setCallback(() => {
                        console.log("Custom picker is ready!");
                    });

                picker.build().setVisible(true);
            }}
        >
            <span>
                Click to build a picker which shows folders and you can select folders
            </span>
            <div className="google"></div>
        </GooglePicker>
    </div>
    );
    }

    export default App;