Delete Button about file-upload-with-preview HOT 4 CLOSED

Hey there,

I assume you are talking about the multiple-image version? Yup, for that one, we designed it to have 2 clear buttons.

The first clear button, shown next to the label, is to clear the entire plugin. We found that users would find this useful if they have to clear many images at once.

The second type of button is found on each individual image - that is for when you want to clear that specific image. This is useful for when the user just wants to clear one image.

I find that there is a need for both of these buttons as they both solve a problem for the user.

I would add - you can customize this yourself by removing this from your implementation - this will let you remove the clear button near the input at least:

// Remove this
<a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">&times;</a></label>

Does that clear things up for you? Let me know - thank you.

from file-upload-with-preview.

(Ya, the problem was when you want to delete it via ajax using clear button. (Single image) . A changed a little big via nasty hack(** not familiar with createClass concept). not sure the best way but if you can suggest it much better. E.g You cannot clear the image unless the server official deleted the file.

window.addEventListener('fileUploadWithPreview:imageDeleted', function (e) {
        switch (e.detail.uploadId) {

            case "imageFirstPreview":
                swal({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No, cancel!',
                    reverseButtons: true
                }).then((result) => {
                    if (result.value) {
                        deleteImage(1);
                    } else if (
                        // Read more about handling dismissals
                        result.dismiss === swal.DismissReason.cancel
                    ) {
                        let el = document.querySelector('.custom-file-container[data-upload-id="' + e.detail.uploadId + '"]');
                        let input = el.querySelector('input[type="file"]');
                        let inputLabel = el.querySelector('.custom-file-container__custom-file__custom-file-control');
                        let imagePreview = el.querySelector('.custom-file-container__image-preview');

                        input.value = '';
                        inputLabel.innerHTML = 'Choose file...';
                        imagePreview.style.backgroundImage = 'url("' + this.baseImage + '")';
                        imagePreview.classList.remove('custom-file-container__image-preview--active');
                        this.cachedFileArray = [];
                        imagePreview.innerHTML = '';
                        this.selectedFilesCount = 0;
                        swal(
                            'cancel',
                            'warning',
                            'error'
                        )

                    }
                });
                break;
}

from file-upload-with-preview.

Hey bud -

I reviewed your code. I think I see what you are trying to do - are you trying to show an alert to the user before deleting the image? Answering this will make this a bit clearer. Also a jsfiddle would help.

Sorry - it's a bit tough to figure out what you're looking to do here exactly. I will say - this tool is more for before the actual upload to the server happens. So the user should be able to delete items as they wish from the panel without interruption before the actual upload.

Thanks

from file-upload-with-preview.

Hello - just wanted to update you on a recent change we made that may help the issue you were having.

Now you can use the exposed deleteImageAtIndex(selectedFileIndex) function to specifically remove a file from your cachedFileArray. To use it, just provide the index of the image you would like to remove from your cachedFileArray. The image will be removed and the preview panel will be updated.

This will allow you to gather all the user's selected images, try to upload them, and then delete any specific ones that weren't working - which I think may be the flow you were going for.

Closing this for now - let us know if we can help further. Thank you.

from file-upload-with-preview.