# Upload, thư mục và storage

Tải ảnh lên project, sắp xếp trong thư mục, tìm lại và quản lý các file đang dùng trong mẫu.

**Assets** là nơi giữ ảnh dùng trong các mẫu của project. Bạn có thể gom logo, ảnh nền và các hình minh họa vào thư mục, rồi chọn lại chúng từ editor khi cần.

File trong Assets thuộc project đang mở. Hãy mở đúng project trước khi upload để ảnh xuất hiện trong bộ chọn của những mẫu bạn đang làm.

## 1. Tạo thư mục để sắp xếp ảnh

Mở **Assets**, bấm **New folder** và đặt tên, chẳng hạn `Brand` hoặc `Backgrounds`. App sẽ mở thư mục vừa tạo để bạn thêm file vào đó.

Dùng đường dẫn thư mục phía trên danh sách để quay về cấp trước hoặc về thư mục gốc. Thư mục giúp sắp xếp file trong project; nó không tạo một bộ quyền truy cập riêng.

<figure class="doc-sim data-assets-illustration" aria-label="Assets → New folder → chọn thư mục trước khi upload">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Assets</strong><span class="sim-control sim-focus">＋ New folder</span></div><div class="ds-breadcrumb">Assets / Brand</div><div class="ds-folder-list"><span>▱ Brand</span><span>▱ Backgrounds</span></div></div></div>
<figcaption>Assets → New folder → chọn thư mục trước khi upload</figcaption>
</figure>

## 2. Upload và xác nhận danh sách file

Trong thư mục đích, bấm **Upload** để chọn ảnh hoặc kéo thả file vào vùng Assets.

App hiện danh sách **Review upload** trước khi tải lên. Tại đây, bạn có thể xem đường dẫn và kích thước các file sắp thêm. Nếu có file không được hỗ trợ, thông báo sẽ cho biết chúng đã bị loại khỏi danh sách.

Các đuôi file hiện được nhận là **PNG, JPG/JPEG, GIF, WebP, SVG và AVIF**. Bấm nút xác nhận upload để bắt đầu, rồi theo dõi số file đã hoàn tất.

<figure class="doc-sim data-assets-illustration" aria-label="Upload → xem danh sách file → xác nhận tải lên">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Review upload</strong></div><div class="ds-rows"><div><span>Brand/logo.png</span><small>24 KB</small></div><div><span>Brand/cover.jpg</span><small>180 KB</small></div></div><div class="sim-form-footer ds-pad"><span class="sim-control">Cancel</span><span class="sim-control sim-dark sim-focus">Upload 2 files</span></div></div></div>
<figcaption>Upload → xem danh sách file → xác nhận tải lên</figcaption>
</figure>

## 3. Tìm và xem ảnh đã lưu

Ô tìm kiếm lọc file trong thư mục đang mở. Chuyển giữa **Grid** và **List** để xem ảnh thu nhỏ hoặc danh sách; bấm vào file để mở phần xem trước.

Để dùng file trong mẫu, mở editor và chọn ảnh qua field kiểu **Asset**. Cách này lưu tham chiếu tới file của project. Xem [Dùng ảnh trong template](/docs/vi/assets/images/) cho phần HTML và nền.

Nút sao chép URL trên thẻ file dùng đường dẫn xem ảnh hiện tại; bộ chọn Asset là cách phù hợp khi gắn ảnh vào prop của mẫu.

<figure class="doc-sim data-assets-illustration" aria-label="Tìm trong thư mục hiện tại, đổi Grid/List và mở ảnh để xem trước">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Assets</strong></div><div class="ds-search sim-focus">⌕ &nbsp; logo</div><div class="ds-breadcrumb">Assets / Brand</div><div class="ds-asset-grid"><div class="ds-asset"><div class="ds-thumb"><span>T</span></div><strong>logo.png</strong><small>PNG</small></div><div class="ds-asset"><div class="ds-thumb"><span>T</span></div><strong>logo-dark.png</strong><small>PNG</small></div></div><div class="ds-view-mode"><span>Grid</span><span>List</span></div></div></div>
<figcaption>Tìm trong thư mục hiện tại, đổi Grid/List và mở ảnh để xem trước</figcaption>
</figure>

## 4. Dọn file và xem trạng thái storage

Bạn có thể xóa từng file từ thẻ ảnh hoặc chọn nhiều file rồi bấm **Delete**. Đọc tên file trong phần xác nhận trước khi hoàn tất. Thư mục cũng có thao tác xóa riêng.

Xóa một ảnh đang được prop tham chiếu có thể làm những lần tạo PDF sau không tải được ảnh đó. Nếu muốn thay ảnh, hãy chọn ảnh thay thế trong các mẫu liên quan trước khi xóa bản cũ.

Khi Upload bị khóa hoặc workspace hết dung lượng, xem thông báo storage trong Assets. Các lựa chọn tiếp theo phụ thuộc trạng thái hiện tại của workspace; phần [Giới hạn theo gói](/docs/vi/plans/limits/) giải thích quyền lưu trữ và sử dụng tài nguyên.

<figure class="doc-sim data-assets-illustration" aria-label="Chọn file → Delete → xác nhận">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Assets</strong></div><div class="ds-selected-file"><span>☑ logo.png</span><span class="sim-control sim-focus">Delete</span></div><div class="ds-delete"><strong>Delete file?</strong><div class="sim-form-footer"><span class="sim-control">Cancel</span><span class="sim-control">Delete</span></div></div></div></div>
<figcaption>Chọn file → Delete → xác nhận</figcaption>
</figure>