Picture/file upload

The data form generates an image/file upload form with the following calls, supporting both local and cloud storage file uploads. The uploading component is based on webuploader, please refer to the webuploader official documentation for specific configuration. .html)

{tip} Please do not set the accessor and mutator splicing domain name in the file or image upload form fields in the model, please refer to File/Image Domain Splicing for related requirements.

$form->file('file_column');
$form->image('image_column');

Local Upload

First add the storage configuration, config/filesystems.php and add a disk:


'disks' => [
    ... ,

    'admin' => [
        'driver' => 'local',
        'root' => public_path('uploads'),
        'visibility' => 'public',
        'url' => env('APP_URL').'/uploads',
    ],
],

Set the upload path to public/uploads(public_path('uploads')).

Then select the uploaded disk, open config/admin.php and find


'upload'  => [

    'disk' => 'admin',

    'directory'  => [
        'image'  => 'images',
        'file'   => 'files',
    ]
],

Set disk to admin added above, and directory.image and directory.file to the upload directories for images and files uploaded with $form->image($column) and $form->file($column), respectively.

Of course, you can also specify disk in the code:

$form->file('file')->disk('your disk name');

Cloud uploads

If you need to upload to cloud storage, you need to install an adapter for laravel storage.

First install zgldh/qiniu-laravel-storage

With the disk configured as well, add an entry to config/filesystems.php:

'disks' => [
    ... ,
    'qiniu' => [
        'driver'  => 'qiniu',
        'domains' => [
            'default'   => 'xxxxx.com1.z0.glb.clouddn.com', //你的七牛域名
            'https'     => 'dn-yourdomain.qbox.me',         //你的HTTPS域名
            'custom'    => 'static.abc.com',                //你的自定义域名
         ],
        'access_key'=> '',  //AccessKey
        'secret_key'=> '',  //SecretKey
        'bucket'    => '',  //Bucket名字
        'notify_url'=> '',  //持久化处理回调地址
        'url'       => 'http://of8kfibjo.bkt.clouddn.com/',  // 填写文件访问根url
    ],
],

Then modify the dcat-admin upload configuration by opening config/admin.php and find:


'upload'  => [

    'disk' => 'qiniu',

    'directory'  => [
        'image'  => 'image',
        'file'   => 'file',
    ],
],

disk select qiniu as configured above, or:

$form->file('file')->disk('qiniu');

Public methods

Storage drive (disk)

Modify file upload source

$form->file('file')->disk('your disk name');

Upload path (move)

Modify the upload path

$form->file('file')->move('public/upload/image1/');

File name (name)

Modify the upload file name

$form->file('file')->name('test.text');

$form->image('picture')->name(function ($file) {
    return 'test.'.$file->guessExtension();
});

randomName (uniqueName)

Using randomly generated filenames (md5(uniqid()).extension)

$form->image('picture')->uniqueName();

Disable page delete files (replace upload)

By using the removeable method, you can prohibit users from clicking to delete files from the server from the page, which can achieve the effect of image overlay upload.

$form->file($column[, $label])->removeable(false);

AutoUpload

When this function is enabled, the file will be uploaded automatically immediately after selection, and the page will no longer show the Upload button.

$form->file('file')->autoUpload();

$form->image('img')->autoUpload();

Disable removal (recallable)

Files will not be deleted from the server after this feature is enabled.

$form->file('file')->retainable();

$form->image('img')->retainable();

storagePermission

Setting Permissions for Uploading Files

$form->image('picture')->storagePermission(777);

Restrict file upload types

Restrict the types of files to be uploaded

$form->file('file')->accept('jpg,png,gif,jpeg');

// can specify mimeTypes, multiple comma-separated
$form->file('file')->accept('jpg,png,gif,jpeg', 'image/*');

disableChunked

Enable chunked Upload

$form->file('file')->chunked();

chunkSize

Set the block size in KB, default 5MB.

{tip} Calling this method will automatically enable block uploads.

// Set to 1MB
$form->file('file')->chunkSize(1024);

File size(maxSize)

Set the maximum size of a single file in Kb, the default size is 10M.

{tip} Also make sure that the upload_max_filesize parameter in the php.ini configuration file must be greater than the value set by this method.

// Set the maximum size of a single file to 1Mb
$form->file('file')->maxSize(1024);

Number of concurrent upload threads (threads)

Set the number of concurrent upload threads, default 3

$form->file('file')->threads(5);

Custom upload interface (url)

Custom upload interfaces can be set via url.

$form->file('file')->url('users/files');

A trait, Dcat\Admin\Traits\HasUploadedFile, is provided to help developers handle uploaded files more easily, as follows

<?php

namespace App\Admin\Controllers;

use Dcat\Admin\Traits\HasUploadedFile;

class FileController
{
    use HasUploadedFile;

    public function handle()
    {
        $disk = $this->disk('local');

        // Determine if it is a file deletion request
        if ($this->isDeleteRequest()) {
            // Delete files and respond
            return $this->deleteFileAndResponse($disk);
        }

        // Get uploaded files
        $file = $this->file();

        // Get the name of the uploaded field
        $column = $this->uploader()->upload_column;

        $dir = 'my-images';
        $newName = $column.'-MyFileName.'.$file->getClientOriginalExtension();

        $result = $disk->putFileAs($dir, $file, $newName);

        $path = "{$dir}/$newName";

        return $result
            ? $this->responseUploaded($path, $disk->url($path))
            : $this->responseErrorMessage('File upload failed');
    }
}

To your routing file app\Admin\routes.php add the following

$router->any('users/files', 'FileController@handle');

deleteUrl

Modify and delete the path of uploaded files, this method generally does not need to be modified

$form->file('file')->deleteUrl('file/delete');

AutoSave field values (autoSave)

Set whether to automatically save the file path to the database after uploading a file, this method is enabled by default.

$form->file('file')->autoSave(false);

Configure (options)

customization configuration webuploader

$form->file('file')->options(['disableGlobalDnd' => true]);

Sortable (sortable)

This method is only available for multiple image/file upload forms.

$form->multipleImage('images')->sortable();

Compress pictures (compress)

Not enabled by default

// Enable image compression.

$form->multipleImage('images')->compress();

$form->image('avatar')->compress([
    'width' => 1600,
    'height' => 1600,

    // Image quality, only valid if type is `image/jpeg`.
    'quality' => 90,

    // This option should be set to false if you want to generate small images without distortion.
    'allowMagnify' => false,

    // Whether cropping is allowed.
    'crop' => false,

    // Whether to keep the header meta information.
    'preserveHeaders' => true,

    // If you find that the compressed file size is even larger than the original, use the original image.
    // This property may affect the image auto-correct function.
    'noCompressIfLarger' => false,

    // Unit byte, if the image size is smaller than this value, compression will not be applied.
    'compressSize' => 0
]);

File/image domain splicing

Please do not set the accessor and mutator to splice the domain name in the model. If you need to splice the full domain name at the time of access, you can define a public method in the model.

<?php

use Illuminate\Support\Str;
use Illuminate\Support\Facades\Storage;

class YourModel extends Model
{
    // Define a public method to access an image or file
    public function getImage()
    {
        if (Str::contains($this->image, '//')) {
            return $this->image;
        }

        return Storage::disk('admin')->url($this->image);
    }
}

Save the domain name

If you need to save a file domain name to a datasheet, you can use the saveFullUrl method.

$form->image('avatar')->saveFullUrl();

$form->file('...')->saveFullUrl();

Picture uploading built-in method

Compressing, cropping, adding watermarks, etc.

Compression, cropping, watermarking and other methods can be used, which requires installation intervention/image.

For more information on how to use it, please refer to [Intervention]：

$form->image($column[, $label]);

// Modify image upload path and file name
$form->image($column[, $label])->move($dir, $name);

// Cropping pictures
$form->image($column[, $label])->crop(int $width, int $height, [int $x, int $y]);

// add a watermark
$form->image($column[, $label])->insert($watermark, 'center');

Limit the size of uploaded images

Set file upload size limit

Parameters: array in pixels

width Specify the width
height Specify the height
min_width Minimum width
min_height Minimum height
max_width Maximum width
max_height Maximum height
ratio Aspect ratio (width/height)

// Upload an image between 100-300 pixels wide.
$form->image('img')->dimensions(['min_width' = 100, 'max_width' => 300]);

Save image/file paths to other data tables

The following method allows you to save the path of an image or file in a separate attachment table, while the current image/file field saves only the ID.

{tip} The example here uses a single image upload form, so you can adjust it yourself if it's multiple images.

Image/File Table Structure

CREATE TABLE `images` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `path` varchar(191) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '',
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

use

$form->image('image1')
    ->saving(function ($value) use ($form) {
        if ($form->isEditing() && ! $value) {
            // Editing Pages, Deleting Image Logic
            Image::destroy($form->model()->image1);

            return;
        }

        // Add or edit images to a page
        if ($value) {
            $model = Image::where('path', $value)->first();
        }

        if (empty($model)) {
            $model = new Image();
        }

        $model->path = $value;

        $model->save();

        return $model->getKey();
    })
    ->customFormat(function ($v) {
        if (! $v) {
            return;
        }

        return Image::find((array) $v)->pluck('path')->toArray();
    });

File upload failed or inaccessible?

If you find that you are unable to upload a file, then there are usually several reasons for this.

Laravel file upload is not configured correctly, check the admin.upload.disk parameter. If you are not familiar with the laravel file upload feature, please read the documentation Laravel - File Storage.
Files are too large, need to adjust upload_max_filesize parameter of php.ini.
File upload directory without write permissions
php is not installed or the fileinfo extension is not enabled

If your file uploads success but can't be accessed properly, then the APP_URL parameter in the .env configuration file may not be set correctly.

Beginners

Data tables

Data Sheet

Data details

Action

Extensions

Page components

Update Log