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"

<MediaUploader />

<MediaUploader />

// This example won't actually work since it's not hooked up
// to a backend. But the getS3Info function should take a file and return
// an object that looks like:
//  {
//    the presigned url for uploading the file
//    signedRequestUrl: 'https://presigned.s3.url/goes/here',
//    the url we can expect for the file once it's uploaded
//    fileUrl: 'https://url.of.the.file/on/s3',
//  }

<MediaUploader getS3Info={async (file) => {
  const response = await fetch(`/images/sign?file_name=${file.name}`)
  const {data} = await response.json()

  return { signedRequestUrl: data.signed_request, fileUrl: data.url}
}} />

// This example won't actually work since it's not hooked up
// to a backend. But the getS3Info function should take a file and return
// an object that looks like:
//  {
//    the presigned url for uploading the file
//    signedRequestUrl: 'https://presigned.s3.url/goes/here',
//    the url we can expect for the file once it's uploaded
//    fileUrl: 'https://url.of.the.file/on/s3',
//  }

<MediaUploader getS3Info={async (file) => {
  const response = await fetch(`/images/sign?file_name=${file.name}`)
  const {data} = await response.json()

  return { signedRequestUrl: data.signed_request, fileUrl: data.url}
}} />

Properties:

Name	Type	Default	Description
Media Uploader Props
Name:buttonLabel	Type:string	Default:Choose File	Description:the text of the input button
Name:className	Type:string	Default:none	Description:className applied to the outer wrapper
Name:defaultPreview	Type:string	Default:none	Description:the url of the original file if it exists (for populating edit forms)
Name:getS3Info	Type:function	Default:none	Description:a function that takes a file and returns an object (see example above)
Name:helpText	Type:string	Default:none	Description:help text to guide the user in selecting an appropriate file
Name:imageClassName	Type:string	Default:none	Description:custom className for styling the image preview container
Name:label	Type:string	Default:none	Description:label for the input
Name:maxFileSize	Type:number	Default:5	Description:the maximum file size in MB
Name:maxFileSizeMessage	Type:string	Default:Please choose a smaller file	Description:error message shown to the user when the file is too large
Name:name	Type:string	Default:none	Description:the name attribute for the form input
Name:placeholder	Type:string	Default:Choose file...	Description:the placeholder text within the file input
Name:required	Type:bool	Default:none	Description:the required attribute
Name:supportedFileTypes	Type:array of strings	Default:['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'video/mp4']	Description:an array of the supported file types for validation
Name:supportedFileTypesMessage	Type:string	Default:Please choose a supported file type	Description:error message shown to the user when the file type is not supported