Return to Question

Added code example

Source Link

edited May 15, 2015 at 14:39

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,

})

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,

})

Source Link

asked May 15, 2015 at 14:05

GlennJ

Allow uploading of asset with same name as existing asset

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.

I'm not sure how to deal with this, I presume some AJAX call is required.
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?

templating assets