# رافع الملفات: تعديل سجل

> Show the files a record already has in the slotsmith FileUploader: pass their URLs as defaultValue, then save the URLs onUrlsChange gives back.

To edit a record that already has files, pass their stored URLs to the file uploader as `defaultValue`. Each becomes a finished item, with a preview for images, that can be removed like any other. `onUrlsChange` gives back the URLs to save: the ones left plus the new uploads.

```tsx
import { useState } from "react";
import { FileUploader } from "slotsmith/file-uploader";
import { fakeUpload } from "../shared/fake-upload";

/** The record being edited, as the server returned it: images are stored URLs. */
const product = { id: 42, images: ["/samples/avatar.jpg"] };

export default function EditingARecord() {
  // What the form would save: the URLs that are left, plus the new uploads'.
  const [images, setImages] = useState<string[]>(product.images);

  return (
    <div style={{ display: "grid", gap: "0.75rem" }}>
      <FileUploader
        multiple
        accept="image/*"
        maxFiles={4}
        // The stored URLs become finished items, with previews for images.
        defaultValue={product.images}
        upload={fakeUpload}
        onUrlsChange={setImages}
      />
      <p>Saves images: {images.length ? images.join(", ") : "none"}</p>
    </div>
  );
}
```

The record starts with one stored image. Remove it, or add another: the line under the uploader shows what the form would save.

## From URLs to items

[`defaultValue`](https://slotsmith.dev/ar/components/file-uploader/api/#prop-defaultValue) takes stored URLs, `File` objects or full items. A URL becomes an item that is already `done`:

- Its name is the last part of the URL path, decoded.
- Its type is guessed from the extension, so a `.jpg`, `.png`, `.webp` or other image extension shows a preview. Anything else shows the file glyph.
- Its size is unknown, so none is shown. It has no file, so it cannot be retried.

`defaultValue` is read once, when the uploader mounts. To change the items later, control them with [`value`](https://slotsmith.dev/ar/components/file-uploader/api/#prop-value) and [`onValueChange`](https://slotsmith.dev/ar/components/file-uploader/api/#prop-onValueChange).

## Saving

[`onUrlsChange`](https://slotsmith.dev/ar/components/file-uploader/api/#prop-onUrlsChange) is called after every change with the URLs of the stored items and of the finished uploads, in list order. A file still uploading has no URL yet, so it joins the list when it finishes. That array is what a record usually keeps.