Media Uploader

MediaUploader is a FileInput wrapper with a few extra bells and whistles for image and video files. It validates file size, checks the file against a configurable list of supported file types, and shows a preview of the uploaded image or video. Plus, it supports uploading files via presigned URLs.

Note: when not making use of the presigned URL upload, the enclosing form must have encType="multipart/form-data"


Media Uploader Props
Name:buttonLabelType:stringDefault:Choose FileDescription:the text of the input button
Name:classNameType:stringDefault:noneDescription:className applied to the outer wrapper
Name:defaultPreviewType:stringDefault:noneDescription:the url of the original file if it exists (for populating edit forms)
Name:getS3InfoType:functionDefault:noneDescription:a function that takes a file and returns an object (see example above)
Name:helpTextType:stringDefault:noneDescription:help text to guide the user in selecting an appropriate file
Name:imageClassNameType:stringDefault:noneDescription:custom className for styling the image preview container
Name:labelType:stringDefault:noneDescription:label for the input
Name:maxFileSizeType:numberDefault:5Description:the maximum file size in MB
Name:maxFileSizeMessageType:stringDefault:Please choose a smaller fileDescription:error message shown to the user when the file is too large
Name:nameType:stringDefault:noneDescription:the name attribute for the form input
Name:placeholderType:stringDefault:Choose file...Description:the placeholder text within the file input
Name:requiredType:boolDefault:noneDescription:the required attribute
Name:supportedFileTypesType:array of stringsDefault:['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'video/mp4']Description:an array of the supported file types for validation
Name:supportedFileTypesMessageType:stringDefault:Please choose a supported file typeDescription:error message shown to the user when the file type is not supported