<!-- 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, useEffect } = React

​

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

// Configuration

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

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

const options = {

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

  maxFileCount: 1,

​

  // When `showFinishButton: false` (default) combined with `multi: false` (default) or `maxFileCount: 1`: 

  // - Modals will close immediately after the upload completes.

  // - Dropzones will allow the user to keep removing/re-uploading the file. 

  //   Use `onUpdate` for dropzones to handle each upload, and to close the dropzone if required.

  showFinishButton: true,

  styles: {

    colors: {

      primary: "#377dff"

    }

  }

}

​

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

// Create a dropzone...

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

​

const MyDropzone = ({setFiles}) => 

  <UploadDropzone options={options}

                  onUpdate={({ uploadedFiles }) => 

                    console.log(`Files: ${uploadedFiles

                           .map(x => x.fileUrl)

                           .join("\n")}`)

                  }

                  onComplete={setFiles}

                  width="600px"

                  height="375px" />

​

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

// 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} /> 

         : <MyDropzone 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')

);