A must have component if you need to upload files. It allows multiple file upload, droppable area and image preview.
This component uses just one block. This block has a placeholder where you can put the drop area suited to your needs. Also has 3 input parameters: the first one allows you to define the accepted types, for example, if you want to upload only images of the type png you can put “image/png” and only png files will be accepted (Note: Some files have the same extension but different mime-type so make sure you put all the mime-types that you want); the second parameter allows to set the max file size to the files to upload (Note: You should indicate the size in bytes); The last one allows to have a preview list of the files as it’s info like name, type, size and content. To receive the files, this block has an event that sends the file info as well as if the upload file was successful or not.To prevent big upload files. The max files size allowed is 500Mb. This is possible to change through the SiteProperty MaxFileSizeAllowed however the tests made were with 500Mb max size allowed.
The class .drop-area is available to do any CSS customizations needed. For example, if you need to customize the shadown that is shown when the drag ends, use:
.drop-area.dragover {
box-shadow: 0px 0px 5px 5px var(--color-primary);
}
1. Add this component to your application
2. Create your drop-area container and put inside the DropArea placeholder.
3. Define if you want specific types or size of files and also if you want to show a preview of the files dropped
4. Define the handler for the OnDropFile event of the component block and add your logic to process the file, e.g. save it to your database.
Images: JPEG, JPG, PNG, TIFF, SVG, GIF, ICO, WEBP, CR2, DNG, DDSVideoAVI, MOV, MP4, OGG, WMV, MPG, FLV, SWF, WEBM, MKV
Audio: MP3, WAV, OGG, AAC, FLAC, MIDI, AC3, MKA, VMA, VOC, AU, AMR, AIFF, RA
Document: DOC, DOCX, XLS, XLSX, PPT, PPTX, PDF, ODT, ODS, ODP, RTF
Other: CSV, JSON, XML, HTML, ZIP, EXE, OML, OAP, OSP, TXT, DAT, XSD, TTF, OTF, WOFF, CSS, JS, PHP
Files that don't support image preview: TIFF, CR2, DNG, DDS, SVG (Preview with the binary content is not possible however if you use the base64 URL it's possible to preview the svg file)Files that don't have the file typeOML, OAP, OSP, DAT, XSD, TTF, OTF, VOC, AMR, RA
File extensions and corresponding mime-types
CSS - text/css
HTML/HTML - text/html
JavaScript - text/javascript
WOFF - application/woff
AVI - video/avi or application/x-troff-msvideo or video/msvideo or video/x-msvideo
DOC, DOCX: application/doc or application/ms-doc or application/msword or application/vnd.openxmlformats-officedocument.wordprocessingml.document