# Delete a file

## Delete a file in a jig

{% columns %}
{% column %}
In this example, a list of expenses is displayed with the following:

* The `subtitle` displays the `filename`.
* A `label` is configured with `color` and text to display the status of the file.
* A `left swipeable` action is configured with two actions:
  * The first only deletes the file associated with the record using the `execute-entity` action with the `update` method and the file property set to `null`.
  * The second deletes the entire record in the database using the `execute-entity` action with the `delete` method.
    {% endcolumn %}

{% column %}

<figure><img src="https://1414514342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHcPzbms3kZejTmFd500V%2Fuploads%2FadTNd6JZpgIrRuDWOprw%2FDF-delete-file.gif?alt=media&#x26;token=4d278fe9-1981-48b7-b164-b24251fdb5d9" alt="" width="170"><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="file-expense-list.jigx" %}
{% code fullWidth="true" %}

```yaml
title: Expense Categories
description: List of Expenses
type: jig.list
icon: bill-cross-money-clipboard

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://cdn.pixabay.com/photo/2023/08/22/11/57/finance-8206242_1280.jpg

data: =@ctx.datasources.expenses-ds
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.expenseitem
    # Configure the subtitle to display the document filename.
    subtitle: =@ctx.current.item.filename
    # Use the label to show the status of the file,
    # as shown in the file metadata. 
    label:
      color:
        - when: =@ctx.current.item.status = 'UPLOADED'
          color: color2
        - when: =@ctx.current.item.status = 'PENDING'
          color: primary
        - when: =@ctx.current.item.status = 'PROCESSING'
          color: color3
      title: =@ctx.current.item.status
    leftElement:
      # Configure a left avatar int he list to display the file thumbnail.
      element: avatar
      text: ""
      uri: |
        =@ctx.current.item.thumbnail != null ? 'data:image/png;base64,' & @ctx.current.item.thumbnail :
        @ctx.current.item.localPath != null ? @ctx.current.item.localPath
   # Configure a left swipeable action with two actions, 
   # the first deletes the entire record in the database.
   # The second only deletes the file associated with the record.      
    swipeable:
      left:
        - label: Delete expense
          icon: delete-2
          color: negative
          onPress: 
            # First action deleting entire record.
            type: action.execute-entity
            options:
              provider: DATA_PROVIDER_DYNAMIC
              entity: default/expenses
              method: delete
              goBack: stay
              data:
                id: =@ctx.current.item.id
        - label: Delete receipt
          icon: bin-2-alternate
          color: warning
          onPress: 
            # Second action only deletes the file. 
            # The records still exists. 
            type: action.execute-entity
            options:
              provider: DATA_PROVIDER_DYNAMIC
              entity: default/expenses
              method: update
              goBack: stay
              data:
                id: =@ctx.current.item.id
              file: null
# Action configured to go to the create expense jig, 
# where a file can be uploaded.            
actions:
  - children:
      - type: action.go-to
        options:
          title: Create Expense
          linkTo: files-create-expense 
```

{% endcode %}
{% endtab %}

{% tab title="datasource" %}
{% code fullWidth="true" %}

```yaml
datasources:
  expenses-ds:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - default/expenses
      query: |
        SELECT
          id,
          '$.expenseitem',
          json_extract(file, '$.localPath') as localPath,
          json_extract(file, '$.fileName')  as filename,
          json_extract(file, '$.status') as status,
          json_extract(file, '$.thumbnail.base64') as thumbnail
        FROM [default/expenses]
        ORDER BY '$.expenseitem'
```

{% endcode %}
{% endtab %}
{% endtabs %}

In Management the *Hotel accommodation* record is deleted in the **expense** dynamic data table and the *airplane ticket* file is deleted but the record still exists.

## Delete a file in Jigx Management

Files can be deleted in Management by following these steps:

1. Log in to <https://manage.jigx.com>.
2. Browse to the required solution's **data** tab and select the record containing the file to be deleted.
3. Select the **File** tab, and click the **x** next to file's thumbnail. **Caution:** Clicking the *Delete* button at the bottom of the Edit record pane deletes the entire record and file.