<commit_before>import * as React from "react";
import UploadImage, { IUploadImageProps, IUploadImageState } from "./UploadImage";
import DropZone from "react-dropzone";
import renderComponentIf from "../global/renderComponentIf";

export default class UploadBanner extends UploadImage<IUploadImageProps, IUploadImageState> {
    constructor(props: {}) {
        super(props);

        this.state = this.createInitialState();

        this.onDrop = this.onDrop.bind(this);
        this.onRejected = this.onRejected.bind(this);
        this.rejectImage = this.rejectImage.bind(this);
        this.createCssImage = this.createCssImage.bind(this);
        this.createSrcImage = this.createSrcImage.bind(this);
        this.getFileInputElement = this.getFileInputElement.bind(this);
    }

    onDrop(accepted: File[], rejected: File[], event: any) {
        this.loadImage(accepted, rejected, event);
    }

    onRejected() {
        this.rejectImage();
    }

    createCssImage(): React.CSSProperties {
        if (this.state.image === null) {
            return {
                backgroundImage: "url(/images/picture.svg)",
                backgroundSize: "120px"
            };
        }
        else {
            return {
                backgroundImage: `url(${this.state.image}`,
                backgroundSize: "cover",
                backgroundPosition: "center"
            };
        }
    }

    createSrcImage(): string {
        return this.state.image as string;
    }

    getFileInputElement(): HTMLInputElement {
        return document.getElementsByName("BannerImageUpload")[0] as HTMLInputElement;
    }

    render() {
        return (
            <div id="project-background" className="col-xs-12 banner" style={this.createCssImage()}>
                <div className="container">
                    <div className="row">
                        <div className="col-md-5 col-xs-12">
                            <div id="banner-upload-card">
                                <div id="banner-image">
                                    <div style={{display: this.state.preview ? "none" : "block"}}>
                                        <DropZone
                                            name="BannerImageUpload"
                                            accept="image/jpeg, image/png, image/gif, image/bmp"
                                            maxSize={1024000}
                                            multiple={false}
                                            disableClick<commit_msg>Make background for banner upload grey. Make resize instuctions transparent<commit_after>import * as React from "react";
import UploadImage, { IUploadImageProps, IUploadImageState } from "./UploadImage";
import DropZone from "react-dropzone";
import renderComponentIf from "../global/renderComponentIf";

export default class UploadBanner extends UploadImage<IUploadImageProps, IUploadImageState> {
    constructor(props: {}) {
        super(props);

        this.state = this.createInitialState();

        this.onDrop = this.onDrop.bind(this);
        this.onRejected = this.onRejected.bind(this);
        this.rejectImage = this.rejectImage.bind(this);
        this.createCssImage = this.createCssImage.bind(this);
        this.createSrcImage = this.createSrcImage.bind(this);
        this.getFileInputElement = this.getFileInputElement.bind(this);
    }

    onDrop(accepted: File[], rejected: File[], event: any) {
        this.loadImage(accepted, rejected, event);
    }

    onRejected() {
        this.rejectImage();
    }

    createCssImage(): React.CSSProperties {
        if (this.state.image === null) {
            return {
                backgroundImage: "url(/images/picture.svg)",
                backgroundColor: "#d8d8d8",
                backgroundSize: "120px"
            };
        }
        else {
            return {
                backgroundImage: `url(${this.state.image}`
            };
        }
    }

    uploadCardStyle() {
        if (this.state.image != null) {
            return {
                opacity: 0.7
            };
        }
        else {
            return {};
        }
    }

    createSrcImage(): string {
        return this.state.image as string;
    }

    getFileInputElement(): HTMLInputElement {
        return document.getElementsByName("BannerImageUpload")[0] as HTMLInputElement;
    }

    render() {
        return (
            <div id="project-background" className="col-xs-12 banner" style={this.createCssImage()}>
                <div className="container">
                    <div className="row">
                        <div className="col-md-5 col-xs-12">
                            <div id="banner-upload-card" style={this.uploadCardStyle()}>
                                <div id="banner-image">
                                    <div style={{display: this.state.preview ? "none" : "block"}}>
                                        <DropZone
                                            name="BannerImageUpload"
                                            accept="image/jpeg, image/png, image/gif, image/bmp"
                                            maxSize={1024000}
                                            multiple={false}
                                            disableClick
{'fraction_non_alphanumeric': 0.10993577635058557, 'fraction_numerical': 0.006989044200982244, 'mean_word_length': 1.6058070866141732, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 26, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7384029', 'n_tokens_mistral': 1357, 'n_tokens_neox': 1299, 'n_words': 246}