react images uploading Télécharger - react images uploading du code source

react images uploading

Autre code source

3.1.7

Télécharger

réagir-images-téléchargement

Installation
Usage
Accessoires
- Note
Options exportées
Contributeurs

Installation

npm

npm install --save react-images-uploading

fil

yarn add react-images-uploading

Usage

Vous pouvez consulter la démo de base ici :

Javascript : https://codesandbox.io/s/react-images-uploading-demo-u0khz
Tapuscrit : https://codesandbox.io/s/react-images-uploading-demo-typescript-fr2zm
Rendu côté serveur (NextJS) : https://codesandbox.io/s/react-images-uploading-ssr-j1qq2

Basique

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

Validation

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

Glisser-déposer

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

Accessoires

paramètre	taper	choix	défaut	description
valeur	tableau		[]	Liste des images
surChange	fonction	(imageList, addUpdateIndex) => vide		Appelé lorsqu'une action d'ajout, de mise à jour ou de suppression est appelée
cléURLdedonnées	chaîne		URL de données	Nom de champ personnalisé auquel la base64 de l'image sélectionnée est attribuée
multiple	booléen		FAUX	Définir `true` pour plusieurs choix
nombremax	nombre		1000	Nombre d'images que l'utilisateur peut sélectionner si mode = `multiple`
surErreur	fonction	(erreurs, fichiers) => nul		Appelé lorsqu'il contient des erreurs
accepterType	tableau	['jpg', 'gif', 'png']	[]	La ou les extensions de fichier à télécharger
taille de fichier max	nombre			Taille maximale de l'image (octet) et elle est utilisée lors de la validation
Type de résolution	chaîne	'absolu' \| 'moins' \| 'plus' \| 'rapport'		Utilisation pour la validation d'image avec la largeur et la hauteur fournies
résolutionLargeur	nombre	> 0
résolutionHauteur	nombre	> 0
inputProps	React.HTMLProps<HTMLInputElement>
autoriserNonImageType	booléen		FAUX	Utilisation pour le téléchargement à des fins de type non-image (par exemple txt, pdf, heic, ...)

Note

Type de résolution

valeur	description
absolu	largeur de l'image === résolutionLargeur && hauteur de l'image === résolutionHauteur
rapport	(resolutionWidth / résolutionHeight) === (largeur de l'image / hauteur de l'image)
moins	largeur de l'image < résolutionLargeur && hauteur de l'image < résolutionHauteur
plus	largeur de l'image > résolutionLargeur et& hauteur de l'image > résolutionHauteur

Options exportées

paramètre	taper	description
Liste d'images	tableau	Liste des images à restituer.
surImageUpload	fonction	Appelé lorsqu'un élément clique et se déclenche pour ouvrir une boîte de dialogue de fichier
surImageSupprimerTout	fonction	Appelé lors de la suppression de toutes les images
surImageUpdate	(updateIndex : numéro) => vide	Appelé lors de la mise à jour d'une image à `updateIndex` .
surImageSupprimer	(deleteIndex : nombre \| nombre[]) => vide	Appelé lors de la suppression d’une ou d’une image de liste.
erreurs	objet	Objet de validation exporté
glisserProps	objet	Accessoires d'éléments natifs pour la fonction glisser-déposer
estDragging	booléen	"true" si une image est déplacée