Image Upload Handling

In ImageField: QuillJS transforms images in a base64 encoded file by default to save your files. However, you can specify a custom endpoint to handle image uploading and pass in response the entire public URL to display the image.

Currently handling 2 methods

1: Data sending in base64 inside a application/json request

In JSON mode data will look like this by calling $request->getContent() and application/json in content-type headers:

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAJYCAQAAAAUb1BXAAAABGdBTUEAALGPC/xhBQAAACyygyyioiBqFCUIKC64x..."

2: Sending in a multipart/form-data request

In form mode you will find a multipart/form-data in content-type headers and file will be present in $request->files named file as a Symfony\Component\HttpFoundation\File\UploadedFile. Then you can handle it like you would do with a FileType and access the file like this:

/** @var \Symfony\Component\HttpFoundation\Request $request */
/** @var \Symfony\Component\HttpFoundation\File\UploadedFile $file */
$file = $request->files->get('file'))

Upload mode configuration

Example of a JSON configuration to send a request to the upload endpoint that returns a JSON response containing the URL to the uploaded image.

'quill_extra_options' => [
    'upload_handler' => [
        'type' => 'json',
        'upload_endpoint' => '/my-custom-endpoint/upload',
        'json_response_file_path' => 'file.url'
    ]
],

Available options in upload handler

upload_handler option name	type	default value	possible values
type	string	form	json, form
upload_endpoint	string	null	the endpoint of your upload handler exemple : /upload or https://my-custom-upload-endpoint/upload
json_response_file_path	string	null	if you specify this option, that mean your upload endpoint will return you a json response. The value must be the path inside the json (this option will be ignored if the content type of the upload endpoint response is not application/json)
security	array	null	see below for available options

Upload endpoint security

security options	type	used with	default values	possible values	explaination
type	string		null	jwt, basic, custom_header	with jwt a header will be added in the post request 'authorization' => 'Bearer MY_JWT_TOKEN', with basic a header will be added in the post request 'authorization' => 'Basic YmFiYXI6cGFzcy1iYWJhcg==' with custom_header a header will be added in the post request 'custom_header' => 'custom_header_value=='
jwt_token	string	jwt	null		pass a valid JWT token for your upload endpoint (don't specify Bearer, it will be added automatically)
username	string	basic	null		the username of your basic http user
password	string	basic	null		the password of your basic http user
custom_header	string	custom_header	null		the key used for your custom header
custom_header_value	string	custom_header	null		the value that will be passed in your custom header

Example of a JSON configuration with jwt security.

'quill_extra_options' => [
    'upload_handler' => [
        'type' => 'json',
        'upload_endpoint' => '/my-custom-endpoint/upload',
        'json_response_file_path' => 'file.url',
        'security' => [
            'type' => 'jwt',
            'jwt_token' => 'my_jwt_token',
        ],
    ]
],

Response Examples

• If your response in a classic simple Symfony\Component\HttpFoundation\Response, you can simply return a response like this one for exemple and do not need to specify the json_response_file_path option.

return new Response('https://my-website/public/assets/my-uploaded-image.jpg');

• If your response is a JSON response like a Symfony\Component\HttpFoundation\JsonResponse, the json_response_file_path option can be used to specify the url inside the json response. In the exemple below json_path_file_response must be 'file.url'.

return new JsonResponse([
    'file' => [
        'url' => 'https://my-website/public/assets/my-uploaded-image.jpg',
    ]
]);

• If your response is a JSON response like a Symfony\Component\HttpFoundation\JsonResponse, and the json_response_file_path is null.

return new JsonResponse('https://my-website/public/assets/my-uploaded-image.jpg');