``` \n\nWhere ```bkstar123-ajaxuploader``` is a prefix that you can change by ```prefix``` key in the ```settings``` argument. \n\nYou can also add more class to the wrapping element by ```outerClass``` key in the ```settings``` argument. \n\nThere are two callback hooks that you can use, that are, ```beforeSend(xhr)``` and ```onResponse(response)```: \n\n- ```beforeSend(xhr)``` hook is called right before sending files to the server, and it is passed with the whole XmlHttpRequest object. You can use this hook to modify the behavior of XHR object before it start sending files to the server, for example to add more request header like ```xhr.setRequestHeader(header, value)```. \n\n- ```onResponse(response)``` hook is called when the uploading process is completed (xhr.readystate = 4, no matter success or failure). It is passed with the whole server response. \n\n**Example**: \n```javascript\n$('#image-upload').bkstar123_ajaxuploader({\n allowedExtensions: ['png','jpg','jpeg'],\n batchSize: 5,\n outerClass: 'col-md-12',\n uploadUrl: '/api/upload',\n beforeSend: (xhr) => {\n xhr.setRequestHeader('X-AUTHOR', 'TUANHA');\n },\n onResponse: (response) => {\n let res = JSON.parse(response)\n if (res.data) {\n $('#gallery').append(`
![](\"${res.data.url}\")
`);\n }\n }\n});\n```\n\n## 4. Demo\n\nThis section will demonstrate how to build a completed system (both backend & frontend) for handling Ajax file upload. \n\n**Backend**:\n- Built from a new & clean Laravel application with the use of ***bkstar123/laravel-uploader*** package (written by myself) \n(See its full documentation at https://github.com/bkstar123/laravel-uploader) \n\n**Frontend**:\n- Built with this JQuery plugin ***@bkstar18/jquery-ajax-uploader***, of course :-) \n\n### 4.1 Preparation\n\n**a) Create a new Laravel application** \n```laravel new testproject``` \n\n**b) Create a symlink between ```public/storage``` and ```storage/app/public```** \n```cd testproject & php artisan storage:link``` \n\n**c) Create a photos migration** \n```php artisan make:migration create_photos_table --table```\n\nPlace the following lines in the ```up()``` function: \n```php\nbigIncrements('id');\n $table->string('filename');\n $table->string('path');\n $table->string('url');\n $table->string('disk');\n $table->timestamps();\n});\n...\n``` \n\n**d) Create ```App\\Photo``` model** \n```php artisan make:model Photo``` \n\nPlace the following lines: \n```php\nhandle($request, 'image', ['allowedExtensions' => ['jpg', 'png', 'jpeg']]);\n if (!$data) {\n return response()->json(['error' => $fileupload->uploadError], 422);\n }\n\n Photo::create($data);\n return response()->json(['success' => \"{$data['filename']} has been successfully uploaded\", 'data' => $data], 200);\n }\n}\n```\n\n**e) In ```resources/views/upload.blade.php```** \n\nPlace the following code: \n```html\n@extends('layouts.app')\n\n@section('content')\n
\n
\n
\n
\n \n\n
\n @if (session('status'))\n
\n {{ session('status') }}\n
\n @endif\n\n
\n \n
\n
\n
\n
\n
\n@endsection\n\n@push('js')\n\n@endpush\n```\n\n**Note:** In ```resources/views/layouts/app.blade.php```, you may need to remove ```defer``` from \n```html\n\n \n``` \n\nand add ```@stack('js')``` before the closing body tag ```