ASD Media File Uploader for React

A wrapper around @uploadcare/react-widget

This component helps you integrate Uploadcare Widget into your React app natively; props management and lazy loading are bundled.

The component allows users to upload files from their devices, social media, cloud storage, and more. All that without any backend code that’s usually required to handle uploads.

Install

npm install --save @alliance-software-development/asd-media-react

OR

yarn add @alliance-software-development/asd-media-react

Usage

import React, { Component } from 'react'
import { ASDMedia } from '@alliance-software-development/asd-media-react'

const App = ()=> {
  const [image, setImage] = React.useState('')
  const asdMediaRef = React.useRef();

  const translation = {
    buttons: {
      choose: {
        images: {
          one: '<div className="image"><img src="/assets/images/camera.svg" alt="camera" /><br/>Upload photo</div>'
        }
      }
    }
  }

  return(
    <div>
      <div className='image' onClick={() => asdMediaRef.current?.openDialog()}>
        <img src={image} alt='uploaded' />
      </div>
    <ASDMedia
      ref={asdMediaRef}
      publicKey='UPLOAD_CARE_PUBLIC_KEY'
      onChange={console.log}
      localeTranslations={translation}
      imagesOnly
      previewStep
      onFileSelect={(file) => {
        if (!file) {
          console.log('File removed from widget')
          return
        }
        file.done((fileInfo) => {
          setImage(fileInfo.cdnUrl)
        })
      }}
      clearable
    />
    </div>
  )
}

Props

To know more about the available props check here

To run the example

Run the following commands to install dependencies and run the app in the browser

cd example && npm install
npm start