0

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,

})

2

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...

| improve this answer | |
  • Tried that, but didn't appear to work. Also the controller doesn't have any mention of that post variable. The expressUpload controller method looks more promising, but I've not been able to get a decent response from it yet. – GlennJ May 15 '15 at 14:29
  • Are you posting this as an entry, so your action is entries/saveEntry ? – Alec Ritson May 15 '15 at 14:32
  • No, sending it as AJAX to /actions/assets/uploadFile – GlennJ May 15 '15 at 14:33
  • Are you able to edit your answer to show the code you are using? – Alec Ritson May 15 '15 at 14:36
  • Done, see above. Getting a 500 error from the expressUpload controller method, so not sure what is wrong there. – GlennJ May 15 '15 at 14:40
1

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 :)

| improve this answer | |
  • Glad you figured it out :) – Alec Ritson May 15 '15 at 15:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.