|
| 1 | +# Introduction |
| 2 | + |
| 3 | +As we've seen in the last [post](https://dev.to/jinssj3/dropzone-ui-the-new-way-of-providing-drag-and-drop-file-uploads-in-react-app-5djd), [Dropzone UI](https://www.npmjs.com/package/@dropzone-ui/react) is a complete set of react components that allows developers to spend less time in coding a drag and drop component for file uploads on React apps. |
| 4 | + |
| 5 | +In this post we'll check the File life cicly process and how powerful is one of the components that come inside this amazing library: `<FileItem/>` |
| 6 | + |
| 7 | +# High-level file life cycle process |
| 8 | + |
| 9 | +To work with [`dropzone-ui`](https://www.npmjs.com/package/@dropzone-ui/react) we can summarize the file life cycle in 5 main activities: |
| 10 | + |
| 11 | +1. Create react app (however you can also start with next.js) |
| 12 | + |
| 13 | +2. Install Dropzone-ui |
| 14 | + |
| 15 | +3. Configure Components |
| 16 | + |
| 17 | +4. Drop Files |
| 18 | + |
| 19 | +5. Validate Files |
| 20 | + |
| 21 | +6. Show validated files |
| 22 | + |
| 23 | +7. Clean File List |
| 24 | + |
| 25 | +8. Upload files |
| 26 | + |
| 27 | +9. Get result of upload process |
| 28 | + |
| 29 | +In this post we'll focus on activity number 3, since it´s more related with `FileItem` component. The validation activity will be covered in other post, but we can assume that we want to validate files to have as valid only image files. This is set in `accept`, a `Dropzone` component prop. |
| 30 | + |
| 31 | +## Validated files |
| 32 | + |
| 33 | +First, it is necesary to understand what kind of props are reqires in `FileItem` component: |
| 34 | + |
| 35 | +## Beautiful by default |
| 36 | + |
| 37 | +FileItem is beautiful by default since it was built following Material Design guidelines and all the icons comes from [Google's Material Icons](https://fonts.google.com/icons). |
| 38 | + |
| 39 | +## Default file type preview |
| 40 | + |
| 41 | +Another aspect that stands out, is that `FileItem` provides a default file preview when file type is not an image. |
| 42 | + |
| 43 | +## Image file preview |
| 44 | + |
| 45 | +Of course, it also provides image previews when the given file is an image. |
| 46 | + |
| 47 | +The default image file type previews were made checking the file `mime type`. |
| 48 | + |
| 49 | + |
| 50 | + |
| 51 | +Acording to [MDN](https://developer.mozilla.org/en-US/docs/Glossary/MIME_type), _MIME type_ (now properly called "media type", but also sometimes "content type") is a string sent along with a file indicating the type of the file (describing the content format, for example, a sound file might be labeled `audio/ogg`, or an image file `image/png`). |
| 52 | + |
| 53 | +It serves the same purpose as filename extensions traditionally do on Windows. The name originates from the MIME standard originally used in E-Mail. |
| 54 | + |
| 55 | +In a nutshell, the `mime type` an attrribute that describes the file content. In node.js the `File`object has an attribute called `type` that returns the mime type of a file. The full list considered for this task comes from the Common MIME types list from [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types): |
| 56 | +imagennn |
| 57 | + |
| 58 | +## Multilanguage support |
| 59 | + |
| 60 | +In this library, both `<Dropzone/>` and `<FileItem/>` provides a way to translate all the possible labels into other languages. Currently, the supported languages are: `Spanish`,`Portuguese`,`French`, `Chinese`, `Russian` and, of course, `English`. |
| 61 | + |
| 62 | +## Installation |
| 63 | + |
| 64 | +The installation processis quite easy, once you created a react app, you just need to install @dropzone-ui/react as an [npm dependency](https://www.npmjs.com/package/@dropzone-ui/react). |
| 65 | + |
| 66 | +For uploading files, peer dependency [axios](https://www.npmjs.com/package/axios) must be also installed together with `dropzone-ui`. |
| 67 | + |
| 68 | +```sh |
| 69 | +// with npm |
| 70 | +npm i @dropzone-ui/react axios |
| 71 | +``` |
| 72 | + |
| 73 | +```sh |
| 74 | +// with yarn |
| 75 | +yarn add @dropzone-ui/react axios |
| 76 | +``` |
| 77 | + |
| 78 | +# Usage and examples |
| 79 | + |
| 80 | +In order to understand properly how to work with dropzone-ui `FileItem`, let's check the process in high level. |
| 81 | + |
| 82 | +We will check how to use this component and how its behavior change due to its props in simple samples. |
| 83 | + |
| 84 | +## 1) Basic example with no image preview |
| 85 | + |
| 86 | +In this sample code (taken from [`codesandbox`](https://codesandbox.io/s/dropzone-ui-file-item-with-no-image-preview-14i2m)) we are telling the component that we don´t want it to provide the image preview in case of image files (e.g. png or jpeg images): |
| 87 | + |
| 88 | +```jsx |
| 89 | +import { Dropzone, FileItem } from "@dropzone-ui/react"; |
| 90 | +import { useState } from "react"; |
| 91 | +export default function App() { |
| 92 | + const [files, setFiles] = useState([]); |
| 93 | + const updateFiles = ([...files,...incommingFiles]) => { |
| 94 | + setFiles(incommingFiles); |
| 95 | + }; |
| 96 | + const onDelete = (id) => { |
| 97 | + setFiles(files.filter((x) => x.id !== id)); |
| 98 | + }; |
| 99 | + return ( |
| 100 | + <Dropzone |
| 101 | + onChange={updateFiles} |
| 102 | + value={files} |
| 103 | + onClean |
| 104 | + > |
| 105 | + {files.map((file) => ( |
| 106 | + <FileItem |
| 107 | + {...file} |
| 108 | + key={file.id} |
| 109 | + onDelete={onDelete} |
| 110 | + info |
| 111 | + /> |
| 112 | + ))} |
| 113 | + </Dropzone> |
| 114 | + ); |
| 115 | +} |
| 116 | +``` |
| 117 | + |
| 118 | +The result, after dropping some files id the following: |
| 119 | + |
| 120 | + |
| 121 | +As you can see, the first 2 files are images and the default icon is showed. The image preview is not generated because we didn´t include the ``. This can be useful when there is no need to show the image and also when you think you can experiment performance issues due to internet connection or the web page is already heavy. |
| 122 | + |
| 123 | +# Conclusion |
| 124 | + |
| 125 | +In conclusion, this is an amazing library for drag and drop files with image previews. This time we've seen `FileItem` component in deep. Next posts will show more about this great package. You can find more info in the documentation https://www.npmjs.com/package/dropzone-ui. |
0 commit comments