react images uploading

反応-画像-アップロード

• インストール
• 使用法
• 小道具
  • 注記
• エクスポートされたオプション
• 貢献者

インストール

npm

npm install --save react-images-uploading

糸

yarn add react-images-uploading

使用法

ここで基本的なデモをチェックアウトできます。

• JavaScript: https://codesandbox.io/s/react-images-uploading-demo-u0khz
• タイプスクリプト: https://codesandbox.io/s/react-images-uploading-demo-typescript-fr2zm
• サーバーサイドレンダリング (NextJS): https://codesandbox.io/s/react-images-uploading-ssr-j1qq2

基本

{({ imageList, onImageUpload, onImageRemoveAll, onImageUpdate, onImageRemove, isDragging, dragProps, }) => ( // write your building UI

Click or Drop here   Remove all images {imageList.map((image, index) => (

onImageUpdate(index)}>Update onImageRemove(index)}>Remove

))}

)}

); }">

 import React from 'react' ;
import ImageUploading from 'react-images-uploading' ;

export function App ( ) {
  const [ images , setImages ] = React . useState ( [ ] ) ;
  const maxNumber = 69 ;

  const onChange = ( imageList , addUpdateIndex ) => {
    // data for submit
    console . log ( imageList , addUpdateIndex ) ;
    setImages ( imageList ) ;
  } ;

  return (
    < div className = "App" >
      < ImageUploading
        multiple
        value = { images }
        onChange = { onChange }
        maxNumber = { maxNumber }
        dataURLKey = "data_url"
      >
        { ( {
          imageList ,
          onImageUpload ,
          onImageRemoveAll ,
          onImageUpdate ,
          onImageRemove ,
          isDragging ,
          dragProps ,
        } ) => (
          // write your building UI
          < div className = "upload__image-wrapper" >
            < button
              style = { isDragging ? { color : 'red' } : undefined }
              onClick = { onImageUpload }
              { ... dragProps }
            >
              Click or Drop here
            < / button >
             
            < button onClick = { onImageRemoveAll } > Remove all images < / button >
            { imageList . map ( ( image , index ) => (
              < div key = { index } className = "image-item" >
                < img src = { image [ 'data_url' ] } alt = "" width = "100" / >
                < div className = "image-item__btn-wrapper" >
                  < button onClick = { ( ) => onImageUpdate ( index ) } > Update < / button >
                  < button onClick = { ( ) => onImageRemove ( index ) } > Remove < / button >
                < / div >
              < / div >
            ) ) }
          < / div >
        ) }
      < / ImageUploading >
    < / div >
  ) ;
}

検証

...
  { ( { imageList , onImageUpload , onImageRemoveAll , errors } ) => (
    errors && < div >
      { errors . maxNumber && < span > Number of selected images exceed maxNumber < / span>}
      { errors . acceptType && < span > Your selected file type is not allow < / span>}
      { errors . maxFileSize && < span > Selected file size exceed maxFileSize < / span>}
      { errors . resolution && < span > Selected file is not match your desired resolution < / span>}
    < / div >
  ) }
...

ドラッグアンドドロップ

( ))}

)} ...">

...
  { ( { imageList , dragProps , isDragging } ) => (
    < div { ... dragProps } >
      { isDragging ? "Drop here please" : "Upload space" }
      { imageList . map ( ( image , index ) => (
        < img key = { index } src = { image . data_url } / >
      ) ) }
    < / div >
  ) }
...