<!-- react -->

<script src="https://unpkg.com/react@17.0.1/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js"></script>

​

<!-- bytescale-upload-widget (react) -->

<script src="https://js.bytescale.com/upload-widget-react/v4"></script>

​

<!-- react container -->

<div id="root" class="container"></div>

const { useState } = React

​

// ---------------------------

// Configuration

// See: https://www.bytescale.com/docs/upload-widget#configuration

// ---------------------------

const options = {

  apiKey: "free", // Get API keys from: www.bytescale.com

  maxFileCount: 1,

  styles: {

    colors: {

      primary: "#377dff"

    }

  }

}

​

// --------------------------

// Create an upload button...

// --------------------------

​

const MyUploadButton = ({setFiles}) =>

  <UploadButton options={options}

                onComplete={setFiles}>

    {({onClick}) =>

      <button onClick={onClick}>

        Upload a file...

      </button>

    }

  </UploadButton>

​

​

// -----------------------------

// Display the uploaded files...

// -----------------------------

​

const MyUploadedFiles = ({files}) => files.map(file => {

  // Save 'filePath' to your DB, and construct URLs using UrlBuilder:

  const { filePath, accountId } = file;

  // Build an image transformation URL for the uploaded file. 

  // Remove 'options' to get the URL to the original file:

  const fileUrl = UrlBuilder.url({ 

    filePath, 

    accountId, 

    options: { 

      transformation: "preset", 

      transformationPreset: "thumbnail"

    }

  });

  return (

    <p key={fileUrl}>

      <a href={fileUrl} target="_blank">{fileUrl}</a>

    </p>

  );

})

​

// ----------------------

// Run the application...

// ----------------------

​

const MyApp = () => {

  const [files, setFiles] = useState([])

  return (

    <>

      {files.length 

         ? <MyUploadedFiles files={files} /> 

         : <MyUploadButton setFiles={setFiles} />

      }

      <a className="developed_by" href="https://www.bytescale.com/docs/upload-widget/react" target="_blank">

        Powered by Bytescale

      </a>

    </>

  );

}

​

ReactDOM.render(

  <MyApp />,

  document.getElementById('root')

);