All notable changes to this project will be documented in this file. See standard-version for commit guidelines.
Dropzone-ui(7.0.0) = Files-ui(1.0.0) (2023-03-28)
-
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.
- Darkmode: Now 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
andfooterConfig
- 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.
- Header and footer can be handled through 2 new props:
-
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%.
-
-
- The complete documentation can be found in files-ui web page.
6.4.0 (2021-12-12)
- <FileItem/>: Added
onWatch
prop. This prop provides an event handler for allowing full screen video previews. It works likeonSee
prop. It returns as first parameter the file object. IfonWatch
is present, file isvalid
and file type isvideo
,FileItem
will display theplay
button. - <VideoPreview/>: Added new component
VideoPreview
. This component is quite similar toFullScreenPreview
. 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 propvideoSource
can be aFile
object or aURI string
representation. Works in the same way asFullScreenPreview
, it rcieves aonClose
prop and anopen
prop. It also recievesautoplay
andcontrols
props like classic html<video/>
tag.
- <FullScreenPreview/>: Improved media query style.
- Added documentation about new prop on
FileItem
. - Added documentation about new component
VideoPreview
.
6.3.6 (2021-07-12)
-
<FileItem/>: Added
resultOnToolip
prop. This prop provides another hover interaction. If present ortrue
, 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 propertyoverflow: auto
in FileItemContainer inside Dropzone, when it displays the FileItem list inside of it. It also disables themaxHeight
property and forces theview
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.
- <Dropzone/>: Fixed issue in FileItemContainer that made it to overflow the size of Dropzone.
- Added documentation about this new features
6.2.0 (2021-26-11)
- <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 theFileItem
container. Webpage
in beta version was released. You can visit dropzone-ui.com. In there you can find a nice code generator.
- <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 frombreak-all
tobreak-word
;
- <FileItem/>: Show
upload status
on hover event.
5.5.6 (2021-26-11)
- 🧪 Added Localization support for ✨ Russian and Chinese ✨.
- 🐛 Fixed small bugs.
- 📚 Improved documentation.
3.0.1 (2021-10-11)
- Translation support for
Russian
🇷🇺 and also simplified and traditionalChinese
🇨🇳 . - File Item component can show image directly from url.
- Minor bugs on Dropzone useStyle hook fixed.
3.0.1 (2021-10-11)
2.8.1 (2021-10-08)
- Translation support for
French
.
2.1.1 (2021-10-01)
- Fixed issue on tsconfig.json that affected build process
2.1.0 (2021-09-28)
- Add preventDefault function on InputButton component
- Improve Readme.md
- Add Openbase badge
- Improve description
2.0.0 (2021-09-21)
- Improve Readme.md
- Add localization for
Spanish
andEnglish
- Add Readme_es.md file
1.2.10 (2021-09-21)
1.2.9 (2021-09-12)
- Release Input File Button
- Release FileItemContainer Compnent
- Improve API doc for all components (now arranged alphabetically)
1.1.28 (2021-09-09)
- Minor bug fixed, upload status not hiding on info open fixed
1.0.28 (2021-09-08)
-
added readme status badges
-
Add Travis ci and coveralls integration
-
update README description
-
Dropzone, FileItem and FullScreenImage components released
1.0.1 (2021-08-28)
- README improvements