owncloud/core

View on GitHub
apps/files_sharing/js/PublicUploadView.js

Summary

Maintainability
A
2 hrs
Test Coverage
/*
 * Copyright (c) 2017
 *
 * This file is licensed under the Affero General Public License version 3
 * or later.
 *
 * See the COPYING-README file.
 *
 */

(function(OC, OCA) {
    if (!OCA.Sharing) {
        OCA.Sharing = {};
    }

    var TEMPLATE =
        '<div>' +
        '    <h2>{{title}}</h2>' +
        '    <div id="uploadprogresswrapper">' +
        '        <div id="uploadprogressbar">' +
        '            <em class="label outer" style="display:none">' +
        '                <span class="desktop">{{uploadProgressText}}</span>' +
        '                <span class="mobile">...</span>' +
        '            </em>' +
        '        </div>' +
        '        <input type="button" class="stop icon-close" style="display:none" value="" />' +
        '    </div>' +
        '    <label>' +
        '        <input type="file" id="file_upload_start" class="uploader hiddenuploadfield" name="files[]" />' +
        '        <div class="public-upload-view--dropzone">' +
        '            <span class="icon icon-upload"></span><span>{{uploadButtonLabel}}</span>' +
        '        </div>' +
        '    </label>' +
        '    <div class="public-upload-view--completed hidden">' +
        '        <h3>{{uploadedFilesMessage}}</h3>' +
        '        <ul></ul>' +
        '    </div>' +
        '</div>'
    ;

    var ITEM_TEMPLATE =
        '<li>{{fileName}}</li>';

    /**
     * @namespace
     */
    OCA.Sharing.PublicUploadView = OC.Backbone.View.extend({
        className: 'public-upload-view',

        /**
         * @type OC.Uploader
         */
        _uploader: null,

        initialize: function(options) {
            this._filesClient = new OC.Files.Client({
                host: OC.getHost(),
                userName: options.shareToken,
                // note: password not be required, the endpoint
                // will recognize previous validation from the session
                root: OC.getRootPath() + '/public.php/webdav',
                useHTTPS: OC.getProtocol() === 'https'
            });

            _.bindAll(
                this,
                '_onUploadBeforeAdd',
                '_onUploadDone',
                '_onUploadStop',
                'onUploadCancel',
                '_getUploadUrl'
            );
        },

        _onUploadBeforeAdd: function(upload) {
                       var file = upload.getFile();
                        if (file.isDirectory) {
                               // We don't create folders in PublicUploadView.
                                // One case has been observed, where we enter here:
                                // An empty folder is dropped into the input field.
                                // We can skip this "file" by setting a target folder outside the share.
                                // This triggers a sanity check in the uploader and no MKCOL occurs.
                                upload.setTargetFolder("..");
                        }

            // Flatten out any subdirectories.
            // When the user wants to upload folder via drag and drop, the foldername
            // (and possible further subdirectores) are in relativePath.
            // This will cause uploader.ensureFolderExists() to fail, as it picks up the
            // extra path components via getFullPath().
            // Subdirectories are not needed here. We want all files in the upload folder, flat.
            // To allow folder upload via drag and drop, we only need to clear out relativePath.
            // This works nicely together with the autorename feature.
            upload.getFile().relativePath = '';

            // add autorename header to deduplicate names on the server in case of conflict
            upload.setConflictMode(OC.FileUpload.CONFLICT_MODE_AUTORENAME_SERVER);
        },

        _onUploadDone: function(e, upload) {
            var fileName = upload.getFileName();
            this.$('.public-upload-view--completed').removeClass('hidden');
            this.$('.public-upload-view--completed ul').append(this.itemTemplate({
                fileName: fileName
            }));
        },

        _onUploadStop: function (e, data) {
            this.$('#uploadprogresswrapper .stop, #uploadprogressbar .label').hide();
        },

        onUploadCancel: function () {
            this._uploader.cancelUploads();
        },

        _getUploadUrl: function(fileName) {
            return OC.getRootPath() + '/public.php/webdav/' + encodeURIComponent(fileName);
        },

        /**
         * @returns {Function} from Handlebars
         * @private
         */
        template: function (data) {
            if (!this._template) {
                this._template = Handlebars.compile(TEMPLATE);
            }
            return this._template(data);
        },

        /**
         * @returns {Function} from Handlebars
         * @private
         */
        itemTemplate: function (data) {
            if (!this._itemTemplate) {
                this._itemTemplate = Handlebars.compile(ITEM_TEMPLATE);
            }
            return this._itemTemplate(data);
        },

        render: function () {
            this.$el.html(this.template({
                title: t('files_sharing', 'Anonymous upload'),
                uploadButtonLabel: t('files_sharing', 'Click to select files or use drag & drop to upload'),
                uploadedFilesMessage: t('files_sharing', 'Uploaded files'),
                uploadProgressText: t('core', 'Uploading...')
            }));

            this.$el.find('.has-tooltip').tooltip();
            this.delegateEvents();

            this._uploader = new OC.Uploader(this.$('.uploader'), {
                filesClient: this._filesClient,
                dropZone: this.$('.public-upload-view--dropzone'),
                url: this._getUploadUrl
            });
            this._uploader.on('beforeadd', this._onUploadBeforeAdd);
            this._uploader.on('done', this._onUploadDone);
            this._uploader.on('stop', this._onUploadStop);

            return this;
        },
    });

    $(document).ready(function () {
        // FIXME: replace with OC.Plugins.register()
        if (window.TESTING) {
            return;
        }

        var view = new OCA.Sharing.PublicUploadView({
            shareToken: $('#sharingToken').val()
        });
        $('#preview .uploadForm').append(view.$el);

        view.render();

        $('#uploadprogresswrapper .stop').on('click', function () {
            view.onUploadCancel();
        });
    });

})(OC,OCA);