v1.2.0 🧪 🚀 Improve uploading

🧪 🚀 Allow uploading files with different URLs

• Enhanced components to perform the upload operation with a different urls for each ExtFile.

  • ExtFile: Added a new property in ExtFile type: uploadUrl.
  • <Dropzone/> & <FileInputButton/>: There is a new sub-prop uploadConfig.customUrl() that is a fucntion that given an extFile object, obtains a custom url.

• The order of priority is as follows:

  • 1. ExtFile.uploadUrl
  • 2. DropzoneProps.UploadConfig.customUrl
  • 3. DropzoneProps.UploadConfig.url

• The setup can be as follows:

    ...
    return(
      <React.Fragment>
        <Dropzone
            uploadConfig={
              customUrl: (extFile)=> "https://urlfromserver/" + extFile.name
            }
        />
        <FileInputButton
            uploadConfig={
              customUrl: (extFile)=> "https://urlfromserver/" + extFile.name
            }
        />
        <Dropzone
          onChange={updateFiles}
          value={files}
        >
          {files.map((file) => (
              <FileMosaic key={file.id} {...file} uploadUrl={"https://urlfromserver/" + extFile.id}/>
            ))}
        </Dropzone>

      
      </React.Fragment>
    )

v1.1.0 Add new prop to Dropzone components and solve some bugs

🧪 New features and 🐛 🔨 Improvements

• <Dropzone/>:
  • There is a new prop groupUpload that allows to perform the upload operation of a group of files in a single request.
  • FIX: ActionButtonItem.label not working #26 #27: Pull request to solve issue on ActionButtonItem.label prop has been merged.
  • FIX: ActionButtonItem.disabled not working #28 #29: Pull request to solve issue on ActionButtonItem.disabled prop has been merged
  • FEAT: Gives the option to send all files in a single request #32 #34: Pull request to allow uploading a group of files in a single request.

Special thanks to @TimmFitschen and @Pooyahmti

v1.0.8 Add new components and features. Remove external dependencies

🧪 New features and 🐛 🔨 Improvements

• ExtFile: Data estructure that "extends" the File Object. This object is designed to allow the information exchange between components. This data type replaces the old "FileValidate" type from dropzone-ui.

• <FileMosaic/>: This new component replaces the old "FileItem" component.

  • Dark mode: Now this component can be adpted to a dark mode pages with the respective prop.
  • New icons: Icons for delete were changed.
  • For uploading, the loader can support to display the current progress.

• <FileCard/>: This new component is an alternative version of FileMosaic. It displays the file info in a card. Receives the same props as FileMosaic plus elevation.

• <FileInputButton/>: This component replaces the old "InputButton" component. The features are the same as the dropzone except the header and footer related features. That means that this component now can trigger the upload progress.
  Validation is optional, so non valid files can be uploaded.

• <Avatar/>: This new component is designed tohandle the selection of images for changing the avatar. Can recieve as source an string url or even a File.

• <FullScreen/>: The old components "FullScreenImage" and "FullScreenVideo" have been separated into FUllScreen, ImagePreview and VideoPreview.

  • FullScreen: component for display in a fullscreen backdrop other components.
  • ImagePreview: component is an <img/> tag enhanced to allow as src a string url or a ile object.
  • VideoPreview: component is an <video/> tag enhanced to allow as src a string url or a ile object.

• <Dropzone/>: This component has been refactored to improve the design, colors and internal components such us headeror footer.

  • Header and footer can be handled through 2 new props: headerConfig and footerConfig
  • Action buttons: these are external buttons thta can trigger the default operations in dropzone.
  • Uploading: The upload operation now is completele handled using pure javascript without external libraries wich means axios is no longer a dependency.

• smartImgFit: This is a special prop for FileMosaic, FileCard and Avatar components that makes someway "smart" the components to fit the images depeding on their orientation ("landscape" or protrait). Square images are hardly afected.

  • How it works?

    • If false, image width will be set to 100%.
      If present, image will be analized and displayed according to its heigh and width. Image with height greater than its width has a "portrait" orientation. Otherwise it has a "landscape" orientation. .

      - If value is "orientation", image will be displayed complete by giving 100% to width prop if the orientation is "landscape". When orientation is "portrait", height prop will be set to 100%. Some images will show an empty space.
      
      - If value is "center", image will be centered and will not be displayed complete. This the empty space is avoided. This is achived by giving 100% to width prop if the orientation is "portrait". When orientation is "landscape", height prop will be set to 100%.
      

• FilesUIProvider: Localization and darkMode are props that can be set globally by using the React context API. Also the new feature that comes wit this improvement is that now is possible to set custom file icons for every file type.

• Download Files: Both FileCard and FileMosaic components are able to perform download from same origin or external resources.

📚 Improved documentation.

• The complete documentation can be found in files-ui web page.

v0.0.1: Releases from dropzone-ui

Files-ui is is the legitimate successor dropzone-ui.
So you can see the previous releases here:
dropzone-ui releases.

The same applies for Changelog. All previous changes written for dropzone ui are linked to files-ui. ⚡