Introduction
Dropzone UI is a complete set of react components that allows developers to spend less time in coding a drag and drop zone for file uploads.
In standard HTML5 you can perform file uploads through
<input type="file">. Additionally there are packages like dropzone and react-dropzone that can handle this task very well.
However, inspired in the last ones, there was created something new and more powerful: dropzone-ui.
With this new tool you can easily display previews and also restrict file types, file size and amount of files. Furthermore, you can change the view mode to see the files as an horizontal list or as a grid.
As I said before, you can change the view mode by clicking the button on the top next to the "remove all" button:
The last sample is important because you can also see 2 excellent functionalities:
- Info layer
- File status
Info Layer
The layer that shows all the relevant info about the file such as name, type and size.
File Status
The status of the file after being validated according to the validation criteria.
To make a Dropzone that supports the screenshots showed above you just need this code taken from CodesandBox:
import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";
export default function App() {
const [files, setFiles] = useState([]);
const [imageSrc, setImageSrc] = useState(undefined);
const updateFiles = (incommingFiles) => {
console.log("incomming files", incommingFiles);
setFiles(incommingFiles);
};
const onDelete = (id) => {
setFiles(files.filter((x) => x.id !== id));
};
const handleSee = (imageSource) => {
setImageSrc(imageSource);
};
return (
<Dropzone
onChange={updateFiles}
value={files}
maxFiles={10}
maxFileSize={2998000}
>
{files.map((file) => (
<FileItem
{...file}
onDelete={onDelete}
onSee={handleSee}
preview
info
hd
/>
))}
</Dropzone>
);
}
Full Screen preview
One killer feature is that, combined with other component called "FullScreenPreview" from the same package, you can see a full screen image preview of a file.
import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";
export default function App() {
const [files, setFiles] = useState([]);
const [imageSrc, setImageSrc] = useState(undefined);
const updateFiles = (incommingFiles) => {
console.log("incomming files", incommingFiles);
setFiles(incommingFiles);
};
const onDelete = (id) => {
setFiles(files.filter((x) => x.id !== id));
};
const handleSee = (imageSource) => {
setImageSrc(imageSource);
};
return (
<Dropzone
onChange={updateFiles}
value={files}
maxFiles={10}
maxFileSize={2998000}
>
{files.map((file) => (
<FileItem
{...file}
onDelete={onDelete}
onSee={handleSee}
preview
info
hd
/>
))}
<FullScreenPreview
imgSource={imageSrc}
openImage={imageSrc}
onClose={(e) => handleSee(undefined)}
/>
</Dropzone>
);
}
And this is the result after dropping files, and clicking on the view
button on the file item wanted:
Localization
Last but not least, dropzone ui is available in Spanish through the localization
prop:
import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";
export default function App() {
const [files, setFiles] = useState([]);
const [imageSrc, setImageSrc] = useState(undefined);
const updateFiles = (incommingFiles) => {
console.log("incomming files", incommingFiles);
setFiles(incommingFiles);
};
const onDelete = (id) => {
setFiles(files.filter((x) => x.id !== id));
};
const handleSee = (imageSource) => {
setImageSrc(imageSource);
};
return (
<Dropzone
onChange={updateFiles}
value={files}
maxFiles={10}
maxFileSize={2998000}
localization={"ES-es"}
>
{files.map((file) => (
<FileItem
{...file}
onDelete={onDelete}
onSee={handleSee}
localization={"ES-es"}
preview
info
hd
/>
))}
<FullScreenPreview
imgSource={imageSrc}
openImage={imageSrc}
onClose={(e) => handleSee(undefined)}
/>
</Dropzone>
);
}
Conclusion
In conclusion, this is an amazing library for drag and drop files with image previews. This post cannot show the complete potential of dropzone-ui, but a general overview was provided. In fact, the information here is enough for start developing with his amazing tool. You can find more info in the documentation https://www.npmjs.com/package/dropzone-ui. In next posts I will show this package in deep.
Top comments (2)
Looking forward to your continued updates
Good