I’m attempting to implement a google drive picker in my django + react project:
import React from 'react';
import { Button, Card, Image } from 'antd';
import useDrivePicker from 'react-google-drive-picker';
import { useState, useEffect } from 'react';
const { REACT_APP_GOOGLE_CLIENT_ID, REACT_APP_GOOGLE_API_KEY } = process.env;
const Upload = () => {
const [openPicker, data, authResponsive] = useDrivePicker();
const upload = (data) => {
console.log("uploading")
};
const handleOpenPicker = () => {
try {
openPicker({
clientId: REACT_APP_GOOGLE_CLIENT_ID,
developerKey: REACT_APP_GOOGLE_API_KEY,
viewId: 'DOCS_VIDEOS',
showUploadView: true,
showUploadFolders: true,
supportDrives: true,
multiselect: true,
callbackFunction: (data) => {
upload(data)
},
});
} catch (error) {
console.log(error);
}
};
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px' }}>
<h2>Select Videos from Google Drive</h2>
<Button type="primary" onClick={() => handleOpenPicker()} style={{ marginBottom: '20px' }}>
Open Drive Picker
</Button>
</div>
);
};
export default Upload;I’m serving this using django, while running this in development (by running npm run start and opening http://localhost:3000) the google-picker works as expected. However when running running in in django by collecting static and serving it from http://localhost:8000, suddenly the popup will not open. Can anyone help me with what I’m missing here ? This is some of my django cors + csrf settings :
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = env.list(
'http://localhost:8000',
'DJANGO_CORS_ORIGIN_WHITELIST',
default=[BASE_FRONTEND_URL]
)
CSRF_TRUSTED_ORIGINS = ['http://localhost:3000', 'http://localhost:8000']