Allow uploading of asset with same name as existing asset

Question

I have an upload form working in my templates (on the frontend), however if I try to upload a file with the same name as an existing asset the file isn't uploaded.

I notice instead a prompt message comes back.

1) I'm not sure how to deal with this, I presume some AJAX call is required.

2) I would prefer it if I could send a value which tells Craft to keep both files without prompting.

What would be the best way of handling this?

The code I've tried is below, using jquery fileupload.

---

var url = '/actions/assets/uploadFile',
    uploadButton = $('<button/>')
        .addClass('btn btn-primary')
        .prop('disabled', true)
        .text('Processing...')
        .on('click', function () {
            var $this = $(this),
                data = $this.data();
            $this
                .off('click')
                .text('Abort')
                .on('click', function () {
                    $this.remove();
                    data.abort();
                });
            data.submit().always(function () {
                $this.remove();
            });
        });

$('#images-upload').fileupload({
    url: url,
    dataType: 'json',
    formData: [
        { name: 'folderId', value: 1 }
    ],
    autoUpload: true,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    maxFileSize: 7000000, // 7 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: 100,
    previewMaxHeight: 100,
    previewCrop: true,

})

---

And also

---

    window.csrfTokenName = "{{ craft.config.get('csrfTokenName') }}";
    window.csrfTokenValue = "{{ craft.request.getCsrfToken }}";


var url = '/actions/assets/expressUpload',
    uploadButton = $('<button/>')
        .addClass('btn btn-primary')
        .prop('disabled', true)
        .text('Processing...')
        .on('click', function () {
            var $this = $(this),
                data = $this.data();
            $this
                .off('click')
                .text('Abort')
                .on('click', function () {
                    $this.remove();
                    data.abort();
                });
            data.submit().always(function () {
                $this.remove();
            });
        });

$('#images-upload').fileupload({
    url: url,
    dataType: 'json',
    formData: [
        { name: 'elementId', value: $('input[name=entryId]').val() }, 
        { name: 'fieldId', value: 8 },
        { name: window.csrfTokenName, value: window.csrfTokenValue }
    ],
    autoUpload: true,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    maxFileSize: 7000000, // 7 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: 100,
    previewMaxHeight: 100,
    previewCrop: true,

})

---

Answer 1

I haven't tested this but from a brief look into how assets are uploaded you might be able to pass a userResponse value through post, it seems the options you can pass are:

keepBoth, replace, cancel

So I guess you would need to include the field in the form you are using to upload the asset like:

<input type="hidden" name="userResponse" value="keepBoth">

As I said I haven't tried this before and i'm assuming you're hitting the UploadFile action on the assets controller...

Answer 2

Turns out the original code was working fine and uploading the asset. It just wasn't returning a 'data.result.success' value.

But you still get the fileId... so just check for that instead :)