Features

• Single and multiple file upload
• Droppable area so files can be uploaded by dragging them to that area
• Image preview
• Restrict the allowed file types
• Define the max size per file

This asset 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 Setting MaxFileSizeAllowed however the tests made were with 500Mb max size allowed.

CSS Customizations

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);

}

How to use

1. Add this asset 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 asset block and add your logic to process the file, e.g. save it to your database.

Types of files that were tested

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

What is not supported

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

Extra

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