Delete an uploaded file in 3.3

Updates since the original post/feature implementation

Fine Uploader 3.3 has its first new feature: Delete an uploaded file. This has been a highly requested feature, and it’s finally available in 3.3. This feature, if enabled, will allow your users to delete files after they have been uploaded. There are appropriate UI elements for FineUploader mode users (a customizable delete link, status indicators, an optional and customizable confirm dialog) along with a new API function for FineUploaderBasic mode users (and FineUploader mode users), along with a few new callbacks.

Overview

A file is eligible for deletion only after it has been successfully uploaded. In FineUploader 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, the onSubmitDelete callback will be invoked. You may return false in your callback handler if you want to abort the request. If not the user will see a (customizable) confirm dialog (if forceConfirm property has been set). If they click “ok” (or if the forceConfirm option has been disabled), a DELETE request will be sent to the server after Fine Uploader invokes the onDelete callback.

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 the onDeleteComplete callback. If the server indicates success in its response, the file will be removed from the UI. If the server indicates failure, a failure status message will be displayed next to the file. If an error has been detected in the response, the onError callback will also be invoked.

In FineUploaderBasic mode, you can order a delete request via the new deleteFile API function. All of the callbacks invoked while in FineUploader mode will also be invoked in FineUploaderBasic 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.

The W3C spec specifically states that the resource to be deleted must be part of the URI path, similar to a PUT request.

Note that you can specify custom parameter and additional headers that are sent along with this request. 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.

Note that I have already updated the Java server-side example to handle this new feature, and the PHP file will likely be updated as well before 3.3 releases.

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. For more info on the available options, please see the readme.

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

As always, please let me know via the issue tracker or the support forum if you have any ideas that may improve this or any other feature.

-Ray Nicholus

4 thoughts on “Delete an uploaded file in 3.3

  1. dothebart

    could you please add an example howto register a hook for after successfully deleting?
    As I interpret the API documentation this should be possible, however I fail to get it working…
    btw, Fineuploader will be added to the citadel webinterface for managing e-mail attachments 😉

    1. Ray Nicholus Post author

      Simply register a deleteComplete event handler. See the events section of the documentation for more details.

      1. dothebart

        hm, I tried that – and failed. I’m not that much of a js coder, I’m more into c/c++ and if it comes to js/html I’m quick reaching the need for cut’n’paste 😉
        so far I tried all those:
        var uploader = new qq.FineUploader(
        {
        session: {
        endpoint: “do_template?template=edit_message_json_attlist”
        },
        callbacks: {
        onComplete: update_attachment_count,
        delete: update_attachment_count,
        deleteComplete: update_attachment_count
        },
        element: document.getElementById(‘fine-uploader’),
        request: {
        endpoint: ‘upload_attachment?nonce=&template=edit_message_upl_att’
        },
        deleteFile: {
        enabled: true,
        forceConfirm: true,
        endpoint: ‘remove_attachment?nonce=&template=edit_message_upl_att&which_attachment=’
        }
        });

      2. Ray Nicholus Post author

        Please open up a question on stack overflow and tag it fine-uploader. Be sure to include all of your code and a description of the problem. We monitor SO for Fine Uploader questions and it’s much easier to provide support there.

Comments are closed.