Hướng dẫn check html attachment - kiểm tra tệp đính kèm html

Giới thiệu

Việc cần có upload files luôn là yêu cầu chính đối với nhiều ứng dụng web và di động. Upload file có mặt ở khắp mọi nơi, từ việc cần tải ảnh lên mạng xã hội, hay tải CV lên các website tìm kiếm việc làm.

Là một web developer, chúng ta phải biết rằng HTML có cung cấp native file upload với một chút hỗ trợ từ Javascript. Với HTML5 thì sẽ có File API được add thêm vào DOM, giúp có thể đọc list file và file object bên trong. Điều này sẽ giải quyết với khá nhiều trường hợp liên quan đến files.

Bài viết này sẽ thảo luận về 10 cách sử dụng trình hỗ trợ HTML file upload.

1. Simple file upload

Đây là loại cơ bản nhất thường hay được sử dụng trong các ứng dụng web.

User có thể tải một hoặc nhiều file từ button upload. Mặc định thường sẽ cho tải lên một file duy nhất từ trình duyệt gốc của hệ điều hành.

Khi tải lên thành công, File API có thể giúp đọc File object bằng cách sử dụng một đoạn code JS đơn giản. Để đọc File object, cần lắng nghe sự kiện thay đổi từ file uploader.

Đầu tiên, get file uploader theo id như sau:

const fileUploader = document.getElementById('file-uploader');

Sau đó, add event listener để đọc File object khi quá trình tải lên hoàn tất. Lấy thông tin file đã tải lên từ thuộc tính event.target.files.

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  console.log('files', files);
});

Quan sát output từ console của trình duyệt. Lưu ý rằng mảng FileList với File object có tất cả thông tin siêu dữ liệu về file được tải lên.

Link codepen tham khảo tại đây

2. Multiple file uploads

Có thể tải lên nhiều file cùng một lúc. Để làm điều đó, chỉ cần add thêm một atrribute là multiple vào input file.

Bây giờ, file browser sẽ cho phép tải lên một hoặc nhiều file. Cũng giống như ví dụ trước, có thể add thêm change event handler để nắm bắt thông tin về các file đã tải lên. Để ý rằng FileList ở đây là một mảng, và sẽ có thông tin như sau:

Link codepen tham khảo tại đây

2. Multiple file uploads

Có thể tải lên nhiều file cùng một lúc. Để làm điều đó, chỉ cần add thêm một atrribute là multiple vào input file.

// Get the file uploader by id
const fileUploader = document.getElementById('file-uploader');

// Listen to the change event and read metadata
fileUploader.addEventListener('change', (event) => {
  // Get the FileList array
  const files = event.target.files;

  // Loop through the files and get metadata
  for (const file of files) {
    const name = file.name;
    const type = file.type ? file.type: 'NA';
    const size = file.size;
    const lastModified = file.lastModified;
    console.log({ file, name, type, size, lastModified });
  }
});

Bây giờ, file browser sẽ cho phép tải lên một hoặc nhiều file. Cũng giống như ví dụ trước, có thể add thêm change event handler để nắm bắt thông tin về các file đã tải lên. Để ý rằng FileList ở đây là một mảng, và sẽ có thông tin như sau:

3. File metadata

Bất cứ khi nào chúng tôi tải file lên, File object luôn có thông tin siêu dữ liệu là các file name, size, last update time, type, tên tệp,...Các thông tin này có thể hữu ích cho việc xác nhận và ra quyết định.

Đây là output của một single file upload

Link codepen tham khảo nào.

4. File accept property

Có thể sử dụng attribute accept để giới hạn loại file được tải lên, như việc chỉ được phép hiển thị một loại file ảnh khi cần upload ảnh lên hồ sơ chẳng hạn.

Đoạn code trên, trình duyệt chỉ cho phép upload một số file có đuôi là .jpg và .png.

Lưu ý, trong trường hợp này, file browser sẽ tự tuỳ chỉnh loại file lựa chọn thay vì cho chọn tất cả. Tuy nhiên, luôn có thể back lại việc cho upload all files nếu cần.

Tìm hiểu cụ thể hơn ở đây nhé.

// Get the instance of the FileReader
const reader = new FileReader();

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  const file = files[0];

  // Get the file object after upload and read the
  // data as URL binary string
  reader.readAsDataURL(file);

  // Once loaded, do something with the string
  reader.addEventListener('load', (event) => {
    // Here we are creating an image tag and adding
    // an image to it.
    const img = document.createElement('img');
    imageGrid.appendChild(img);
    img.src = event.target.result;
    img.alt = file.name;
  });
});

5. Quản lý file content

Có thể show file content sau khi upload file thành công. Đối với loại ảnh profile, sẽ khá bối rối nếu không hiểu thị ảnh đã tải lên ngay sau khi user upload.

Vì thế, có thể sử dụng FileReader để convert file sang chuỗi binary (nhị phân). Sau đó add thêm event listener để get chuỗi binary lên file upload thành công.

// Listener for file upload change event
fileUploader.addEventListener('change', (event) => {
  // Read the file size
  const file = event.target.files[0];
  const size = file.size;

  let msg = '';

 // Check if the file size is bigger than 1MB and prepare a message.
  if (size > 1024 * 1024) {
      msg = `The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize(size)}`;
  } else {
      msg = ` A ${returnFileSize(size)} file has been uploaded successfully. `;
  }

  // Show the message to the user
  feedback.innerHTML = msg;
});

Hãy thử với ví dụ tại đây nhé.

6. Validate file size

Có thể đọc size metadata của một file, và thậm chí có thể sử dụng nó để xác định file size. Có thể cho phép user tải lên file image với dụng lượng tối đa 1MB. Hãy thử xem ví dụ dưới đây.

const reader = new FileReader();

Thử upload nhiều file ảnh khác nhau và xem hiệu quả hoạt động của nó tại đây.

reader.addEventListener('progress', (event) => {
  if (event.loaded && event.total) {
    // Calculate the percentage completed
    const percent = (event.loaded / event.total) * 100;
    // Set the value to the progress component
    progress.value = percent;
  }
});

7. Hiển thị file upload progress

Khả năng ổn áp nhất là cho user biết về tiến trình tải file lên đến đâu rồi. Hiện tại thì chúng ta đã biết về FileReader và các event đọc và load file.

FileReader có một sự kiện khác, được gọi là progress để có thể nắm được thời gian tải file. Chúng ta có thể sử dụng HTML5 progress để tạo một progressbar như sau.

Thử tải một file lớn hơn và theo dõi progress bar hoạt động thế nào xem. Link trải nghiệm đây nhé.

const fileUploader = document.getElementById('file-uploader');

8. Directory upload

Có thể tải toàn bộ thư mục lên không? Tất nhiên là có thể, nhưng có hạn chế. Có một loại attributes nhưng không chuẩn lắm (ít nhất là trong bài viết này), gọi là webkitdirectory cho phép tải lên toàn bộ thư mục.

Và File objects sẽ có các webkitRelativePath được điền như sau:

Có thể sử dụng để render bất kì folder hay file theo cấu trúc UI nào mà chúng ta chọn. Khám phá thêm tại đây.

9. Drap & drop

Việc không hỗ trợ kéo thả để tải file lên thì đúng là quá lỗi thời phải không. Hãy làm việc đó với một vài bước đơn giản nào.

Đầu tiên, hãy tạo một drop zone (vùng thả file) và chọn một phần để hiển thị file content tải lên. Chúng ta sẽ sử dụng một file image và kéo thả tại đây.

const fileUploader = document.getElementById('file-uploader');

Khai báo id dropzone và content tương ứng.

const fileUploader = document.getElementById('file-uploader');

Thêm event dragover để hiển thị ảnh hưởng của thứ gì đó được sao chép.

const fileUploader = document.getElementById('file-uploader');

Tiếp đó, xác định những gì mong muốn khi image được drop. Cần sử dụng một event drop để xử lý việc này.

const fileUploader = document.getElementById('file-uploader');

Trải nghiệm thêm về drap & drop tại đây nhé.

10. Xử lý files với objectURLs

Có một phương pháp đặc biệt được gọi là URL.createObjectURL () để tạo một URL duy nhất từ file. Cũng có thể giải phóng nó bằng cách sử dụng phương thức URL.revokeObjectURL ().

Các phương thức DOM URL.createObjectURL () và URL.revokeObjectURL () cho phép tạo chuỗi URL đơn giản có thể được sử dụng để tham chiếu bất kỳ dữ liệu nào có thể được tham chiếu đến bằng cách sử dụng File object DOM, bao gồm các file local trên máy tính của người dùng.

const fileUploader = document.getElementById('file-uploader');

Tham khảo cụ thể hơn tại đây.

Kết luận

Nhiều khi một tính năng HTML cũng có thể đủ để giải quyết các trường hợp cơ bản và phổ biến. Và File upload ở đây khá thú vị khi cung cấp khá nhiều option mặc định để sử dụng trong ứng dụng web.