ReactJS - open upload dialog from external library

问题

It is a specific upload functionality that I need from an external library.

What I want to achieve is: open this external upload dialog if I click a button that is rendered by my ReactJS app.

I got a few ideas in mind:

Solution: Perform a synthetic click event on the "BS_WIDGET_INITIATOR" element if I click my ReactJS button (Tried that, did not work)
Solution: Clone that element by using ReactJS and render it (ugly)
Solution: Build the equivalent HTML in ReactJS and execute the script afterwards

I started with solution 3.

Here is the original integration of the external script:

<script type="text/javascript" src="https://blabla.de/js/widget.js">
  BS.CONFIG = {
    "token": "546bc22e-d747-421f-b4bf-b19b5129816b",
    "hostname": "https://blabla.de/match",
    "redirectOnError": "ERROR_PAGE",
    "postOriginalDocument": true,
    "images": {
      "dropbox": "https://www.blabla.de/dropbox.svg",
      "googledrive": "https://www.blabla.de/googledrive.svg",
      "onedrive": "https://www.blabla.de/onedrive.svg",
      "cv": "https://www.blabla.de/cv.svg"
    },
    "postProfileUrl": "LANDING_PAGE",
    "gapiClientId": "GOOGLE_API_WEBCLIENT_ID",
    "oneDriveApiKey": "ONEDRIVE_APP_KEY"
  }
</script>

<button id="BS_WIDGET_INITIATOR">Apply now</button>
<div id="BS_WIDGET_CONTAINER" style="display:none">
  Apply with
  <hr/>
  <div class="BS_WIDGET" rel="dropbox"></div>
  <div class="BS_WIDGET" rel="googledrive"></div>
  <div class="BS_WIDGET" rel="onedrive"></div>
  <hr id="BS_WIDGET_HYBRID_SEPARATOR" />
  <div class="BS_WIDGET" rel="cv"></div>
</div>

<style type="text/css">
  #BS_WIDGET_CONTAINER {
    background-color: #fff;
    box-sizing: content-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 220px;
    text-align: center;
    color: #666;
    font-family: sans-serif;
    font-size: 12px;
  }
  
  .BS_WIDGET {
    display: inline-block;
    padding: 5px;
  }
  
  .BS_WIDGET[rel=cv],
  .BS_WIDGET[rel=form] {
    display: block;
    text-align: left;
  }
  
  hr {
    border: solid #ccc;
    border-width: 1px 0 0 0;
    margin: 5px 0;
  }
  
  .BS_WIDGET:hover {
    background-color: #ddd;
  }
  
  .BS_WIDGET img[src$=".svg"] {
    height: 32px;
    width: 32px;
  }
  
  .BS_WIDGET[rel=cv] img[src$=".svg"],
  .BS_WIDGET[rel=form] img[src$=".svg"] {
    width: auto;
  }
</style>

<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="DROP-INS_API_KEY"></script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=onGapiLoad"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('picker', '1');
</script>
<script type="text/javascript" src="https://js.live.net/v7.0/OneDrive.js" id="onedrive-js"></script>

Here is my ReactJS approach:

import { useEffect } from 'react';

const useScript = (url) => {
  useEffect(() => {
    const script = document.createElement('script');
    script.async = true;
    script.src = url;
    window.BS = {
      ...window.BS,
      CONFIG: {
            token: "546bc22e-d747-421f-b4bf-b19b5129816b",
            hostname: "https://blabla.de/match",
            redirectOnError: "ERROR_PAGE",
            postOriginalDocument: true,
            images: {
              dropbox: "https://www.blabla.de/dropbox.svg",
              googledrive: "https://www.blabla.de/googledrive.svg",
              onedrive: "https://www.blabla.de/onedrive.svg",
              cv: "https://www.blabla.de/cv.svg"
            },
            postProfileUrl: "LANDING_PAGE",
            gapiClientId: "GOOGLE_API_WEBCLIENT_ID",
            oneDriveApiKey: "ONEDRIVE_APP_KEY"
          }
      };
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [url]);
};

export default useScript;

import React from 'react';
import { Button } from 'antd';
import getTranslation from '../../utils/getTranslation';

import useScript from '../../utils/useScript';

const t = getTranslation;
const UploadButton = ({ uris, disabled }) => {
  if (uris && uris.BS) {
    useScript(uris.BS);
  }
  return (
    <>
      <div id="BS_WIDGET_CONTAINER" style={{ display: 'none' }}>
        Apply with
        <hr />
        <div className="BS_WIDGET" rel="dropbox" />
        <div className="BS_WIDGET" rel="googledrive" />
        <div className="BS_WIDGET" rel="onedrive" />
        <hr id="BS_WIDGET_HYBRID_SEPARATOR" />
        <div className="BS_WIDGET" rel="cv" />
      </div>
      <Button id="BS_WIDGET_INITIATOR" disabled={disabled} type="primary">{t('upload-cv')}</Button>
    </>
  );
};
export default UploadButton;

But it seems, that the BS.CONFIG is not set properly. Is my way bad ? How can I achieve it ?

来源：https://stackoverflow.com/questions/61731465/reactjs-open-upload-dialog-from-external-library

标签

javascript

reactjs

dom