File upload
Use the file upload fields to allow users to upload images, documents or any files to your storage solution (Firebase storage by default). This field is in charge of uploading the file and saving the storage path as the value of your property.
You can save the URL of the uploaded file, instead of the Storage pah,
by setting the storeUrl
.
You can also allow the upload of only some file types based on the MIME type , or restrict the file size.
If the file uploaded is an image, you can also choose to resize it before
it gets uploaded to the storage backend, with the imageCompression
prop.
The complete list of params you can use when uploading files:
mediaType
Media type of this reference, used for displaying the preview.storagePath
Absolute path in your bucket. You can specify it directly or use a callbackacceptedFiles
File MIME type that can be uploaded to this reference. Note that you can also use the asterisk notation, soimage/*
accepts any image file, and so on.metadata
Specific metadata set in your uploaded file.fileName
You can specify a fileName callback if you need to customize the name of the filestoragePath
You can specify a storage path callback if you need to customize the path where it is stored.storeUrl
When set totrue
, this flag indicates that the download URL of the file will be saved in Firestore instead of the Cloud storage path. Note that the generated URL may use a token that, if disabled, may make the URL unusable and lose the original reference to Cloud Storage, so it is not encouraged to use this flag. Defaults to false.imageCompression
Use client side image compression and resizing Will only be applied to these MIME types:image/jpeg
,image/png
andimage/webp
You can use some placeholders in the storagePath
and fileName
to
customize the path and name of the file. The available placeholders are:
- {file} - Full file name
- {file.name} - Name of the file without extension
- {file.ext} - Extension of the file
- {rand} - Random value used to avoid name collisions
- {entityId} - ID of the entity
- {propertyKey} - ID of this property
- {path} - Path of this entity
Single file upload
import { buildProperty } from "@firecms/cloud";
buildProperty({
dataType: "string",
name: "Image",
storage: {
storagePath: "images",
acceptedFiles: ["image/*"],
maxSize: 1024 * 1024,
metadata: {
cacheControl: "max-age=1000000"
},
fileName: (context) => {
return context.file.name;
}
}
});
The data type is string
.
Internally the component used
is StorageUploadFieldBinding
.
Multiple file upload
import { buildProperty } from "@firecms/cloud";
buildProperty({
dataType: "array",
name: "Images",
of: {
dataType: "string",
storage: {
storagePath: "images",
acceptedFiles: ["image/*"],
metadata: {
cacheControl: "max-age=1000000"
}
}
},
description: "This fields allows uploading multiple images at once"
});
The data type is array
.
Internally the component used
is StorageUploadFieldBinding
.
Custom support for images, videos and audio
You are free to use the storage
property to upload any kind of file, but
FireCMS also provides some custom support for images, videos and audio.
You don't need to make any specific changes and this behaviour is enabled by default. FireCMS will automatically detect if the file is an image, video or audio and will display the preview accordingly.
The MIME types supported for custom previews are:
image/*
video/*
audio/*
(this includes all file formats related to these categories)