react images uploading Download - react images uploading Download do código-fonte

react images uploading

Outro código-fonte

3.1.7

Baixar

upload de imagens de reação

Instalação
Uso
Adereços
- Observação
Opções exportadas
Colaboradores

Instalação

npm

npm install --save react-images-uploading

fio

yarn add react-images-uploading

Uso

Você pode conferir a demonstração básica aqui:

Javascript: https://codesandbox.io/s/react-images-uploading-demo-u0khz
Texto digitado: https://codesandbox.io/s/react-images-uploading-demo-typescript-fr2zm
Renderização do lado do servidor (NextJS): https://codesandbox.io/s/react-images-uploading-ssr-j1qq2

Básico

 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 >
            &nbsp;
            < 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 >
  ) ;
}

Validação

...
  { ( { 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 >
  ) }
...

Arrastar e soltar

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

Adereços

parâmetro	tipo	opções	padrão	descrição
valor	variedade		[]	Lista de imagens
onChange	função	(imageList, addUpdateIndex) => vazio		Chamado quando a ação de adicionar, atualizar ou excluir é chamada
dataURLKey	corda		dataURL	Nome do campo personalizado ao qual a base64 da imagem selecionada é atribuída
múltiplo	booleano		falso	Definir `true` para várias escolhas
número máximo	número		1000	Número de imagens que o usuário pode selecionar se modo = `multiple`
onError	função	(erros, arquivos) => void		Chamado quando tem erros
aceitarTipo	variedade	['jpg', 'gif', 'png']	[]	As extensões de arquivo a serem carregadas
maxFileSize	número			Tamanho máximo da imagem (Byte) e é usado na validação
tipo de resolução	corda	'absoluto' \| 'menos' \| 'mais' \| 'razão'		Usando para validação de imagem com largura e altura fornecidas
resoluçãoLargura	número	> 0
resoluçãoAltura	número	> 0
inputProps	React.HTMLProps<HTMLInputElement>
permitirNonImageType	booleano		falso	Usando para upload para finalidades que não sejam de imagem (por exemplo, txt, pdf, heic, ...)

Observação

tipo de resolução

valor	descrição
absoluto	largura da imagem === resoluçãoLargura && altura da imagem === resoluçãoAltura
razão	(resolutionWidth/resolutionHeight) === (largura da imagem/altura da imagem)
menos	largura da imagem <resoluçãoWidth && altura da imagem <resoluçãoHeight
mais	largura da imagem> resoluçãoWidth && altura da imagem> resoluçãoHeight

Opções exportadas

parâmetro	tipo	descrição
lista de imagens	variedade	Lista de imagens a serem renderizadas.
onImageUpload	função	Chamado quando um elemento é clicado e acionado para abrir uma caixa de diálogo de arquivo
onImageRemoveAll	função	Chamado ao remover todas as imagens
onImageUpdate	(updateIndex: número) => vazio	Chamado ao atualizar uma imagem em `updateIndex` .
onImageRemove	(deleteIndex: número \| número[]) => vazio	Chamado ao remover uma imagem ou uma imagem de lista.
erros	objeto	Objeto de validação exportado
arrastarProps	objeto	Adereços de elemento nativo para recurso de arrastar e soltar
está arrastando	booleano	"true" se uma imagem estiver sendo arrastada