sp-app-react/lib/controls/SPLibraryUpload.js

React based Controls and Utilities for building applications in SharePoint

"use strict";
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SPLibraryUpload = void 0;
var react_1 = __importDefault(require("react"));
var react_2 = require("@fluentui/react");
var formik_1 = require("formik");
var SPList_1 = require("../SPList");
var SPLibraryUpload = function (props) {
    var listContext = useContext(SPList_1.SPListContext);
    var _a = __read(formik_1.useField(props.name), 3), field = _a[0], meta = _a[1], helpers = _a[2];
    //const [field, meta, helpers, spProps] = useSPField(props);  
    var error = meta.touched && meta.error && typeof (meta.error) == 'string' ? meta.error : undefined;
    function _onChange(event) {
        var setValue = helpers.setValue;
        var value = (field.value) ? field.value : [];
        event.target.files && Array.prototype.forEach.call(event.target.files, function (file) {
            if (!(file.name.match('[\~\#\%\&\*\{\}\\\:\<\>\?\/\+\|]')) && (file.name.substr(0, file.name.lastIndexOf('.')).slice(-1) != '.')) {
                var spAttachment = {
                    __metadata: {
                        fileObj: file,
                        unsaved: true
                    },
                    FileName: file.name
                };
                var index = value.map(function (i) { return i.FileName; }).indexOf(file.name);
                if (index > -1) {
                    value[index].__metadata.fileObj = file;
                    if (!value[index].__metadata.unsaved)
                        value[index].__metadata.updated = true;
                }
                else
                    value.push(spAttachment);
                setValue(value);
            }
            else
                alert("File " + file.name + " contains invalid characters (~ # % & * { } : \\ < > ? + |) or ends with a period and cannot be uploaded. Please remove these character from the file name and upload again.");
        });
        event.target.value = '';
        if (!/safari/i.test(navigator.userAgent)) {
            event.target.type = '';
            event.target.type = 'file';
        }
        //   if (event.target.files && typeOf(event.target.files) === array ){
        //       const files = event.target.files.map(i => {return i});
        //   }          
        //   const fileInput:HTMLElement | null = document.getElementById('AttachmentUpload-' + name);
        //   fileInput.files
    }
    function _delete(item) {
        var setValue = helpers.setValue;
        var value = (field.value) ? field.value : [];
        var index = value.indexOf(item);
        if (item.__metadata.unsaved)
            value.splice(index, 1);
        else
            value[index].__metadata.deleted = true;
        setValue(value);
    }
    function _onClick() {
        var fileInput = document.getElementById("AttachmentUpload-" + name);
        if (fileInput)
            fileInput.click();
    }
    return (react_1.default.createElement(react_2.Stack, null,
        react_1.default.createElement(react_2.Text, { variant: "large", styles: { root: { fontWeight: react_2.FontWeights.semibold } } }, "Upload Document"),
        react_1.default.createElement("input", { type: "file", style: { display: "none" }, onChange: _onChange, id: "AttachmentUpload-" + name, title: "Name", multiple: true }),
        field.value && field.value
            .filter(function (i) { return !i.__metadata.deleted && i.__metadata.unsaved; })
            .map(function (i, index) {
            return (react_1.default.createElement(react_2.Stack, { horizontal: true, verticalAlign: "center", key: index },
                react_1.default.createElement("img", { width: "16", height: "16", style: { marginRight: 5 }, title: i.FileName, alt: i.FileName.split('.').pop() + " File", src: "/_layouts/15/images/ic" + i.FileName.split('.').pop() + ".png" }),
                (i.ServerRelativeUrl) ? react_1.default.createElement("a", { className: 'ms-fontWeight-regular', href: i.ServerRelativeUrl },
                    react_1.default.createElement(react_2.Text, null, i.FileName)) : react_1.default.createElement(react_2.Text, null, i.FileName),
                react_1.default.createElement(react_2.IconButton, { iconProps: { iconName: 'Delete' }, title: "Delete", ariaLabel: "Delete", onClick: function () { return _delete(i); } })));
        }),
        react_1.default.createElement(react_2.ActionButton, { iconProps: { iconName: 'Add' }, text: "Add Documents", onClick: _onClick }),
        (meta.touched && meta.error) ? (react_1.default.createElement("span", { id: "TextFieldDescription2" },
            react_1.default.createElement("div", { role: "alert" },
                react_1.default.createElement("div", { className: "ms-TextField-errorMessage errorMessage" },
                    react_1.default.createElement("span", { "data-automation-id": "error-message" }, error))))) : null));
};
exports.SPLibraryUpload = SPLibraryUpload;
function useContext(SPListContext) {
    throw new Error('Function not implemented.');
}