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
