Learn how to work with file fields in Nova.
File
, Image
, Avatar
, VaporFile
, and VaporImage
. The File
field is the most basic form of file upload field, and is the base class for both the Image
and Avatar
fields. In the following documentation, we will explore each of these fields and discuss their similarities and differences.
users
database table will have a profile_photo
column. This column will contain the path to the profile photo on disk, or, when using a cloud storage provider such as Amazon S3, the profile photo’s path within its “bucket”.
User
resource. In this example, we will create the field and instruct it to store the underlying file on the public
disk. This disk name should correspond to a disk name in your application’s filesystems
configuration file:
File
field allows the user to download the corresponding file. To disable this, you may call the disableDownload
method on the field definition:
File
field, let’s take a look at an equivalent Laravel route that would store the file in the same way:
Storage
facade:
File
field. To learn more about how to customize its behavior, check out the customization documentation.public
disk in conjunction with the local
driver, you should run the php artisan storage:link
Artisan command to create a symbolic link from public/storage
to storage/app/public
. To learn more about file storage in Laravel, check out the Laravel file storage documentation.
Image
field behaves exactly like the File
field; however, instead of only displaying the path to the file within the Nova dashboard, an Image
field will show a thumbnail preview of the underlying file. All of the configuration and customization options of the Image
field mirror that of the File
field:
Image
field when being displayed, you can use the maxWidth
method:
indexWidth
and detailWidth
methods:
Avatar
field behaves exactly like the File
field; however, instead of only displaying the path to the file within the Nova dashboard, an Avatar
field will show a thumbnail preview of the underlying file. All of the configuration and customization options of the Avatar
field mirror that of the File
field:
Avatar
field will also be automatically displayed in Nova search results. An Avatar
field is not limited to “user” resources - you may attach Avatar
fields to any resource within your Nova application:
storeOriginalName
and storeSize
methods. Each of these methods accept the name of the column you would like to store the file information:
storeOriginalName
method, the file field’s “Download” link within the Nova dashboard will automatically download the file using its original name.deletable
method:
File
field, as well as the Image
and Avatar
fields, may be marked as prunable
. The prunable
method will instruct Nova to delete the underlying file from storage when the associated model is deleted from the database:
store
method of the Illuminate\Http\UploadedFile
class. However, you may fully customize this behavior based on your application’s needs.
path
and storeAs
methods of the File
field:
$requestAttribute
contains the exact payload path to the File field in the request. Most convenient for use within Repeater.
store
method. The store
method accepts a callable which receives the incoming HTTP request and the model instance associated with the request:
store
callback is returning an array of keys and values. These key / value pairs are mapped onto your model instance before it is saved to the database, allowing you to update one or many of the model’s database columns after your file is stored.
Here’s another example of customizing the storage process. In this example, we’re using the store
method to store the original file in public storage, create thumbnails using Laravel’s queue system, and finally populating values in the resource’s media
relationship:
store
method:
__invoke
method:
NULL
into the field’s associated column.
If you would like to override this behavior and provide your own file deletion implementation, you may use the delete
method. Like the store
method discussed above, the delete
method accepts a callable which receives the incoming HTTP request and the model instance associated with the request:
delete
callback is returning an array of keys and values. These key / value pairs are mapped onto your model instance before it is saved to the database, allowing you to update one or many of the model’s database columns after your file is stored. Typically, when deleting a field, you will insert NULL
into the relevant database columns.
delete
method:
__invoke
method:
Storage::url
method to determine the URL that should be used to display image previews on the resource detail page and edit form. However, you may customize the generation of this URL using the preview
method.
The preview
method accepts a callable which should return the preview URL. The field’s underlying column value is passed to the callable as the first parameter, while the name of the field’s storage disk is passed as the second parameter:
Storage::url
method to determine the URL that should be used to display thumbnail previews on the resource index page and within search results (when using the Avatar
field). However, you may customize the generation of this URL using the thumbnail
method.
The thumbnail
method accepts a callable which should return the thumbnail URL. The field’s underlying column value is passed to the callable as the first parameter, while the name of the field’s storage disk is passed as the second parameter:
Storage::download
method to determine the file and filename that should be used for downloading the file. However, you may customize the generation of this URL using the download
method. The download
method accepts a callable which should return the result of your own invocation of the Storage::download
method:
Storage
facade:
File
field will allow any type of file to be uploaded; however, you may customize the accepted file types using the acceptedTypes
method:
acceptedTypes
method, Nova adds the accept
attribute to the file input element; therefore, all of the following media types may be provided to the acceptedTypes
method:
.dmg
.dmg,.exe,.deb
image/*
audio/*
video/*
acceptedTypes
method only performs client-side validation, you should also validate the file type using server-side validation rules.