Blueimp File Upload: Remove a file from file list before upload

Question

How can I remove a file from the selected files list in Blueimp plugins before submitting the form to upload. I tried this SO answer but its just remove file from UI not from queue.

Here is my code

$(function(){
            $("#UploadPhotos").click(function(){
                $("#ItemPhotos").click();
            });
            $('#ItemPhotos').fileupload({
                    url: "${pageContext.servletContext.contextPath}/XYZ",
                    //dataType: 'json',
                    autoUpload: false,
                    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
                    maxFileSize: 5000000, // 5 MB
                    // Enable image resizing, except for Android and Opera,
                    // which actually support image resizing, but fail to
                    // send Blob objects via XHR requests:
                    disableImageResize: /Android(?!.*Chrome)|Opera/
                        .test(window.navigator.userAgent),
                    previewMaxWidth: 171,
                    singleFileUploads:false,
                    previewMaxHeight: 180,
                    previewCrop: true
                }).on('fileuploadadd', function (e, data) {
                    data.context = $('<div/>').appendTo('#FilesListThumb');
                    $.each(data.files, function (index, file) {
                        var node = $('<div><h6>X</h6></div>').addClass("thumbnail-ib");
                        node.appendTo(data.context);
                        node.find("h6").click(function(){
                            node.remove();
                        });
                    });
                    $("#itemSellForm").submit(function(){
                        data.formData = $("#itemSellForm").serializeArray();
                        data.submit();
                        return false;
                    });                        
                }).on('fileuploadprocessalways', function (e, data) {
                    var index = data.index,
                        file = data.files[index],
                        node = $(data.context.children()[index]);
                    if (file.preview) {
                        node
                            .addClass("thumbnail")
                            .append(file.preview);
                    }
                    if (file.error) {
                        node
                            .addClass("thumbnail")
                            .append($('<span class="text-danger"/>').text("Upload Failed"));
                    }
                }).on('fileuploadfail', function (e, data) {
                    $.each(data.files, function (index, file) {
                        var error = $('<span class="text-danger"/>').text('File upload failed.');
                        $(data.context.children()[index])
                            .append('<br>')
                            .append(error);
                    });
                }).on("fileuploaddone",function(e,data){
                  //  sendData = false;
                 alert("done");
                });
        });

here when I click h6 thumbnail is removed from ui only not from the list of ifles

Fractaliste · Accepted Answer · 2014-01-25 12:06:01Z

4

Every BlueImp callback have 2 parameters: an event and a data object.

The data object contains a files array which you can edit in order to alter files that will be uploaded. So if you delete one of these array elements (array.pop, or other methods...) before submitting your request, it can be considered as removed.

answered Jan 25, 2014 at 12:06

Fractaliste

5,99511 gold badges47 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Manish Kumar Over a year ago

Oh yes it worked i added data.files.splice(index,1); inside node.find("h6").click

Fractaliste Over a year ago

Be careful, I think the index of the data.files array is recalculate when you delete one of the object in the middle of the array.

Manish Kumar Over a year ago

so what care should i take.if i delete an element from data.files it recalculate the index.So i think its Ok cos next time again when I click delete button it will take index from new recalculated array.Right?

Manish Kumar Over a year ago

One more thing in my case can u tell me how to remove all files from queue after submit form?

Fractaliste Over a year ago

@Manish If you add 3 file at once, then you delete them from the 1-indexed to the last indexed, the index value on your splice function won't be updated. To check it just write a console.log(index) and test it.

|

Kaster · Accepted Answer · 2015-03-04 14:48:58Z

0

Maybe helps additionally click event(s) for button UploadPhotos to delete/unbind.

$("#UploadPhotos").unbind("click")

answered Mar 4, 2015 at 14:48

Kaster

891 silver badge7 bronze badges

Collectives™ on Stack Overflow

Blueimp File Upload: Remove a file from file list before upload

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related