5.12.0

Deleting Files

Enabling the deletion of files means your users can delete files after they have been uploaded. If you upload a file, leave the page, and come back then you cannot delete that file through Fine Uploader unless you have enabled the initial file list feature.

Overview

A file is eligible for deletion only after it has been successfully uploaded. In UI mode, if this feature is enabled, a customizable delete link will appear next to the file after it has successfully uploaded.

When the user clicks on this link, first, your onSubmitDelete callback will be invoked. You may return false in your callback handler if you want to abort the request (or a promise that you may resolve later). If not the user will see a (customizable) confirm dialog (if the deleteFile.forceConfirm property has been set). If they click “ok” (or if the deleteFile.forceConfirm option has been disabled), a DELETE request will be sent to the server after Fine Uploader invokes your onDelete callback.

In UI mode, a status message, along with a spinner, will appear next to the file while Fine Uploader is waiting for the server response. Once the response is received, Fine Uploader will invoke your onDeleteComplete callback. If the server indicates success in its response, the file will be removed from the UI and its status will be updated. If the server indicates failure, a failure status message will be displayed next to the file (in UI mode). If an error has been detected in the response, your onError callback will also be invoked.

In core mode, you can order a delete request via the new deleteFile API function. All of the callbacks invoked while in UI mode will also be invoked in core mode if you order a delete via this API function.

The Request (and server-side handling)

Fine Uploader sends a separate DELETE request for each file marked for deletion. The UUID of the file is passed as the last item in the request URI. For example, if the UUID of a file, ordered for deletion, is “6a9955d3-8f1e-4c70-ae47-b01b35dd1562″, and the endpoint property specified in the deleteFile option object is “/server/upload” and the domain is http://mysite.com, Fine Uploader will send a DELETE request to the following endpoint:

http://mysite.com/server/upload/6a9955d3-8f1e-4c70-ae47-b01b35dd1562.

Note

Fine Uploader appends a _method parameter to the request object with a value of DELETE when the HTTP method is POST instead of DELETE. This makes it easier to determine the intended semantics of the request server-side.

Note that you can specify custom parameter and additional headers that are sent along with this request as well. If you specify custom parameters, they will be sent as part of the query string, NOT the request payload. This is due to the fact that many servers will either rip out any request body associated with a DELETE request, or simply throw an error/reject the request. In other words, a DELETE request is much like a GET request.

The (Expected) Response

You may return any response you like, as the XMLHttpRequest object will be passed to your onDeleteComplete handler for further examination. However, the response code you return is important to Fine Uploader, as it uses this to determine if the delete has succeeded or not. The following response codes indicate success for this specific request: 200, 202, and 204. Any other response code indicates a failure.

Enabling the Feature

The following is an example of a VERY basic setup that enables you to use the new delete files feature.

var uploader = new qq.FineUploader({
    element: document.getElementById('myUploader'),
    request: {
        endpoint: 'server/upload'
    }
    deleteFile: {
        enabled: true,
        forceConfirm: true,
        endpoint: 'server/file'
    }
});