mirror of
https://github.com/10h30/laravel-file-upload-series.git
synced 2026-07-11 18:55:57 +09:00
Complete Part 9
This commit is contained in:
@@ -98,7 +98,6 @@
|
|||||||
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.min.js">
|
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.min.js">
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
//FilePond.registerPlugin(FilePondPluginImagePreview);
|
|
||||||
// Register plugins
|
// Register plugins
|
||||||
FilePond.registerPlugin(
|
FilePond.registerPlugin(
|
||||||
FilePondPluginImagePreview,
|
FilePondPluginImagePreview,
|
||||||
@@ -106,20 +105,35 @@
|
|||||||
FilePondPluginFileValidateType
|
FilePondPluginFileValidateType
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Chọn input HTML có id là "files"
|
||||||
const inputElement = document.querySelector('input[id="files"]');
|
const inputElement = document.querySelector('input[id="files"]');
|
||||||
|
|
||||||
|
// Khởi tạo FilePond trên input đó với các tùy chọn cấu hình
|
||||||
FilePond.create(inputElement, {
|
FilePond.create(inputElement, {
|
||||||
|
// Cho phép chọn nhiều file cùng lúc
|
||||||
allowMultiple: true,
|
allowMultiple: true,
|
||||||
|
// Số lượng tệp tối đa được phép tải lên là 5
|
||||||
maxFiles: 5,
|
maxFiles: 5,
|
||||||
|
// Chỉ chấp nhận các loại tệp hình ảnh (ví dụ: .jpg, .png, .gif)
|
||||||
acceptedFileTypes: ['image/*'],
|
acceptedFileTypes: ['image/*'],
|
||||||
|
// Kích thước tệp tối đa cho phép là 100KB
|
||||||
maxFileSize: '100KB',
|
maxFileSize: '100KB',
|
||||||
|
// Thông báo hiển thị khi tệp vượt quá kích thước tối đa
|
||||||
labelMaxFileSizeExceeded: 'The file is too big',
|
labelMaxFileSizeExceeded: 'The file is too big',
|
||||||
|
// Gửi file lên server bằng phương pháp POST trực tiếp qua form.
|
||||||
storeAsFile: true,
|
storeAsFile: true,
|
||||||
|
// Hàm được gọi khi có cảnh báo từ FilePond
|
||||||
onwarning: (error, file, status) => {
|
onwarning: (error, file, status) => {
|
||||||
|
// Ghi cảnh báo ra console của trình duyệt
|
||||||
console.warn('FilePond warning:', error, file, status);
|
console.warn('FilePond warning:', error, file, status);
|
||||||
|
// Hiển thị thông báo cảnh báo cho người dùng
|
||||||
alert('Warning: ' + error.main);
|
alert('Warning: ' + error.main);
|
||||||
},
|
},
|
||||||
|
// Hàm được gọi khi có lỗi nghiêm trọng từ FilePond
|
||||||
onerror: (error, file, status) => {
|
onerror: (error, file, status) => {
|
||||||
|
// Ghi lỗi ra console của trình duyệt
|
||||||
console.error('FilePond error:', error, file, status);
|
console.error('FilePond error:', error, file, status);
|
||||||
|
// Hiển thị thông báo lỗi cho người dùng
|
||||||
alert('Error: ' + error.main);
|
alert('Error: ' + error.main);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user