Dropzone-ui(7.0.2) = Files-ui(1.0.5)

Dropzone UI has grown very fast and has exceeded its original scope. That's why we find it reasonable to rebrand it and create a new package taking the best of this one and adding more features and new components. This new package is here and its name is Files UI ⚡
In an very near future we'll stop giving support to dropzone-ui, so we enforce you to upgrade to the new package.

In the meanwhile dropzone-ui package will become a wrapper for files-ui.

👀 📚 ⚡ Live demos and full documentation : files-ui.com

🧪 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.

v6.7.20: Add headerClassName and footerClassName

🧪 New features

<Dropzone/>: Added new props to override css styles in footer and header. The style rules must be added in a css or sass file like so:

.dz-ui-footer.footer-extra-styles {
  overflow-y: auto;
  height: 35px;
}

.dz-ui-header.header-extra-styles {
  justify-content: center;
}

📚 Improved documentation.

• Added documentation about new props on Dropzone component.

v6.7.12

🐛 Fixes:

• Fixed TS support on React 18

v6.7.10: Improvements on "children" prop and fix "replace" behaviour bug

🐛 Fixes or improvements

• Fixed bug that shows files as non valid when Dropzone props are set behaviour="replace" and user drops more files than the maxFiles prop.
• Improved children prop behaviour: Since version 6.7.10 children prop has the highest priority and will show the children content if present even when thee is no dropped files.
• Package now can be used in react 17 and 18 ⚛️ 🚀

v6.4.2: Add video previews

🐛 Fixes or improvements

• <FullScreenPreview/>: Improved media query style.

📚 Improved documentation.

• Added documentation about new prop on FileItem.
• Added documentation about new component VideoPreview.

🧪 New features

• <FileItem/>: Added onWatch prop. This prop provides an event handler for allowing full screen video previews. It works like onSee prop. It returns as first parameter the file object. If onWatch is present, file is valid and file type is video, FileItem will display the play button.
• <VideoPreview/>: 🎥 Added new componentVideoPreview. This component is quite similar to FullScreenPreview. As the name sugests, this component is meant to be used to show video previews. Supported videos are the default supported videos by a <video/> tag (mp4, ogg, webm). First prop videoSource can be a File object or a URI string representation. Works in the same way as FullScreenPreview, it rcieves a onClose prop and an open prop.
  It also recieves autoplay and controls props like classic html <video/> tag.
  
  

v6.3.6: Add result on Tooltip functionality for File Item and other fixes

🧪 New features

<FileItem/>:

Added resultOnToolip prop. This prop provides another hover interaction. If present or true, FileItem will show the file validation status and the upload status on a nice tooltip.

Otherwhise, if not present, false or undefined, FileItem will display the result on the InfoLayer.

Special thanks to @mateusmx, 👏 who suggested this feature🧪.

<Dropzone/>:

Added disableScroll prop. This prop disables the css property overflow: auto in FileItemContainer inside Dropzone, when it displays the FileItem list inside of it. It also disables the maxHeight property and forces the view prop to be "grid". The purpose of this special prop is to allow FileItemContainer to grow at the same time FileItem list increases and prevent triggering scrollbars.

When disableScroll is not present:

When disableScroll is present or true:

🐛 Fixes or improvements

<Dropzone/>: Fixed issue in FileItemContainer that made it to overflow the size of Dropzone.

📚 Improved documentation.

• Added documentation about this new features

v6.2.0: Add hover interaction on File Item and other fixes

🧪 New features

• Webpage in beta version was released. You can visit dropzone-ui.com. In there you can find a nice code generator.
• <FileItem/>: Added alwaysActive prop. This prop provides hover interaction. If false (by default), FileItem will hide the main layer with all the buttons except the file validation status and the upload status. If true, main layer will be visible all the time.
• <FileItem/>: Added elevation prop. This prop provides the user to decide about the shadow and border on the FileItem container.

🐛 Fixes or improvements

• <Dropzone/>: Fixed Spanish translation on footer.
• <Dropzone/>: Hide "view" button when view prop is provided.
• <Dropzone/>: Fix issue that hides dropzone label when FileItems are outside.
• <Dropzone/>: Fixed minor issues on minHeight.
• <FileItem/>: Hide "delete" button when onDelete prop is not provided
• <FileItem/>: Change word-break css propertie from break-all to break-word;

📚 Improved documentation.

v5.3.0: [FEAT]: Add Russian and Chinese translation

• 🧪 Added Localization support for ✨ Russian and Chinese ✨.
• 🐛 Fixed small bugs.
• 📚 Improved documentation.

v3.0.1: [FEAT]: Add Portuguese translation

• 🧪 Created the Localization support for ✨ English, Spanish, French and Portuguese ✨.
• 🐛 Fixed small bugs.
• 📚 Improved documentation.