Repository files navigation

A simple library that lets you create an image gallery, change the order of images, select the highlighted image, and customize it as you like.

npm install react-upload-gallery

or:

yarn add react-upload-gallery

CodeSandbox

importRUGfrom'react-upload-gallery'// Add style manuallyimport'react-upload-gallery/dist/style.css'// or scss<RUGaction="/api/upload"// upload routesource={response=>response.source}// response image source/>

React Upload Gallery Prepares your images for the gallery on a React-based application. You can change the user interface by using the features available on all topics. Like re-creating video cards or writing browser APi requests privately. You can carry these features wherever you want thanks to ready-made components.<DragArea /> and<DropArea /> componentsheader, footer andchildnode can use the features you can use.

With these you can determine the limit, size, maximum and minimum width and length of the images and prevent them from loading. You can display the appropriate message with two parameters,(key, rules), usingonWarning to warn the blocked images.

It can be used to inquire, display in modal, or display a message before it is deleted using features likeonConfirmDelete, onDeleted,onClick, onSuccess.

A library that will make things easier within the React framework for galleries used for an article, product or advertisement system in general. You can set rules, track errors, make a special request, and customize all features.

• Props

  • Sorting
  • Rules
  • CustomRequest
  • onChange
  • onClick
  • onConfirmDelete

• Components

  • <DragArea />
  • <DropArea />
  • <Card />
  • <List />
  • <Children />

Options for this feature can be found at this address.Sorting Props

<RUGsorting={false}/>// OR<RUGsorting={{lockAxis:'x'}}/>

Images that do not comply with the specified rules will be eliminated during loading. Eliminated images will be returned inFile format with the rules used in thetype parameter.

<RUGrules={{limit:10,size:20,width:{min:1280,max:1920,},height:{min:720,max:1080}}}accept={['jpg','jpeg']}onWarning={(type,rules)=>{switch(type){case'accept':console.log(`Only${rules.accept.join(', ')}`)case'limit':console.log('limit <= ',rules.limit)case'size':console.log('max size <= ',rules.size)case'minWidth':case'minHeight':console.log('Dimensions > ',`${rules.width.min}x${rules.height.min}`)case'maxWidth':case'maxHeight':console.log('Dimensions < ',`${rules.width.max}x${rules.height.max}`)default:}}}/>

With this feature, you can make the request more easily and how the values should be sent. The request in the package sends thedata object received withblob asContent-Type: Application / json. In some cases, APIs may request data as a file or as a blob. In the case of a font that must be returned, the first parameter must be fixed asuid.onError is fully optional.Axios Example

<RUGcustomRequest={({    uid,    file,    data,// blob    send,    action,    headers,    onProgress,    onSuccess,    onError})=>{constresponse={url:'...'}onProgress(uid,response)onSuccess(uid,response)onError(uid,{      action,      status,      response})return{abort(){// for cancels the request}}}source={response=>response.url}/>

With this feature, any changes work when a new image is added, deleted, or changed in order. The package will run once when it first starts.

<RUGonChange={(images)=>{this.setState({ images})// save current component}}/>

You can use it to hold clicks on the image. For example, you can save the sent parameter instate and use select,remove, abort,refresh functions.

<RUGonClick={(image)=>this.setState({ image})}/>

A nice solution to check the image one last time before it is deleted. Returnstrue 'by default. This confirms the deletion. You can returnPromise` data in the function.

<RUGonConfirmDelete={(currentImage,images)=>{returnwindow.confirm('Are you sure you want to delete?')}}/>

OR Promise alternative.

<RUGonConfirmDelete={(currentImage,images)=>{returnnewPromise(resolve=>{// For example, you can affect the loading screen herethis.setState({loading:true})setTimeout(()=>resolve(true),1000)})}}/>

importRUG,{DragArea,DropArea,Card,List}from'react-upload-gallery'

Thanks to theDragArea component you can import elements from thecallback if you want to create a special image. To use the features [here] (https://github.com/clauderic/react-sortable-hoc#prop-types) you can look.

<RUG><DragArea{...props}>{(image)=><div><imgsrc={image.source}alt={image.name}/></div>}</DragArea></RUG>

You can use theDropArea component inheader,footer orchildren properties. It will load the dropped images. You can check that the installation was attempted from the first parameter.

<RUGheader={({ openDialogue})=>(<DropArea>{(isDrag)=><divstyle={{background:isDrag ?'yellow' :'#fff'}}><buttononClick={openDialogue}>Open</button></div>}</DropArea>)}/>

Not many customizable features are available for theCard component. But if you want, you can add a few different features within adiv tag.

<RUG><DragArea>{(image)=>(<div><Cardimage={image}/><buttononClick={image.select}>Select Active</button></div>)}</DragArea></RUG>

<RUG><DragArea>{(image)=><Listimage={image}/>}</DragArea></RUG>

You can design images in different formats usingReactNode orFunction types. If you are usingDragArea the images will be returned withcallback already. But if you are not usingChildren for aFunction by turning back all the pictures you can get. It is also possible to reach several options with the second parameter.

<RUG>{(images)=>(<div>{images.map(image=>(<div><imgsrc={image.source}/></div>)})}</div>)}</RUG>

OR

<RUG><DropArea> // handle drop files on list of images{(isDrag)=>(<DragArea>{(image)=>(<div><imgsrc={image.source}/></div>)}</DragArea>)}</DropArea></RUG>

React Upload Gallery needsreact-sortable-hoc package.

If believe you've found an issue, pleasereport it along with any relevant details to reproduce it. The easiest way to do so is to fork the react-sortable-hoc basic setup sandbox onCodeSandbox:

Please do not use the issue tracker for personal support requests. Instead, use StackOverflow.

Yes please! Feature requests / pull requests are welcome.