Get deleted images and files

To check which files or images were deleted in Redactor, there is the Storage service.

Storage helps you maintain control over the files and images uploaded to your servers through Redactor. Use storage if you'd like to always only have current files saved on server, and make cleanup and removal of unused files and images a breeze.

There are three components of the Storage service.

File identification #

With every upload, every file and image along with URL and name should be assigned an id. This id will serve as a unique identification of this particular uploaded file within your application.

Here's how to assign an id attribute:

  • data-image="%id%" - for image uploads
  • data-file="%id%" - for file uploads

getChanges method #

When you've got some Redactor uploading going on in your system, and your customer upload, delete, undo and redo uploads and deletions of their files and images, storage.getChanges helps you keep track of the files in use. Here's how it works:

  1. First, you set up identification system for all file uploads (see above)
  2. For the files that already exist in content upon Redactor initialization, you add data-image="%id%" for images, data-file="%id%" for files (they are usually represented by an 'a' tag).
  3. Whenever you are ready to deal with the files and images that were deleted from Redactor but remain on the server, you call storage.getChanges method, for example, through an autosave callback. This method will return an object of all files and images currently in Redactor).

File status #

Each element in the storage.getChanges list has a status: existing and currently used in Redactor files and images are true, and those deleted by the user are false. Now you know which files can be safely deleted from server (hint: those with false status) and you can delete these files using their ids.

Here's an example of storage.changes method in use:

var changes = $R('#content', 'storage.getChanges');
for (var key in changes)
    if (changes[key].status === false) // element was deleted
    else // element is still in the content

Here's an example of an object that is returned by getChanges:

"some-id: {
    id: "some-id", // an id of a file. This id had been set during upload.
    node: img, // or 'a' DOM node of element
    status: true, // or false if element is deleted
    type: "image" // or file