index.tsx 6 KB
Newer Older
1
import React, { useEffect, useState } from 'react';
Katerina Papadopoulou's avatar
Katerina Papadopoulou committed
2
import { useDropzone } from 'react-dropzone';
3
import { Image, File } from 'react-feather';
4
5
import { Box, Flex } from 'rebass/styled-components';
// import { UploadCloud } from 'react-feather';
6
// import { Trans } from '@lingui/macro';
7
import styled from 'ui/themes/styled';
8
9
10
11
// import { useInstanceInfoQuery } from 'fe/instance/info/useInstanceInfo.generated';
// import { Trans } from '@lingui/react';
// import Alert from 'ui/elements/Alert';
// import { AlertWrapper } from '../Modal';
12

13
interface Props {
14
  initialUrl: string | undefined | null;
15
  onFileSelect(file: File | undefined): unknown;
16
  uploadType?: 'resource' | string;
aleclofabbro's avatar
aleclofabbro committed
17
  filePattern?: FilePattern;
18
19
}

20
21
type FilePattern = 'image/*' | '*';

22
23
24
const DropzoneArea: React.FC<Props> = ({
  initialUrl,
  uploadType,
25
26
  onFileSelect,
  filePattern
27
}) => {
28
  const [fileUrl, setFileUrl] = useState<undefined | null | string>();
29
30
  // const { data: instanceInfoData } = useInstanceInfoQuery();
  // const uploadMaxBytes = instanceInfoData?.instance?.uploadMaxBytes || 0;
31
32
33
34
35

  const [currentFile, setCurrentFile] = useState<{
    file: File;
    localUrl: string;
  }>();
36

37
38
39
40
41
42
  useEffect(
    () => () => {
      fileUrl && URL.revokeObjectURL(fileUrl);
    },
    [fileUrl]
  );
aleclofabbro's avatar
merged    
aleclofabbro committed
43

44
45
46
47
  useEffect(() => {
    setFileUrl(initialUrl);
  }, [initialUrl]);

48
49
50
  const {
    getRootProps,
    getInputProps,
51
52
53
    isDragActive
    // rejectedFiles,
    // acceptedFiles
54
  } = useDropzone({
55
    accept: filePattern,
56
    // maxSize: uploadMaxBytes,
57
    onDrop: acceptedFiles => {
58
59
      const file = acceptedFiles[0];
      if (!file) {
60
61
        onFileSelect(void 0);
        setCurrentFile(void 0);
62
        return;
63
      }
64
      onFileSelect(file);
65
      setCurrentFile({ file, localUrl: URL.createObjectURL(file) });
66
67
    }
  });
68
  // const rejectedFile = rejectedFiles[0];
69
  // console.log({ rejectedFiles, acceptedFiles });
Katerina Papadopoulou's avatar
Katerina Papadopoulou committed
70
  return (
71
    <>
aleclofabbro's avatar
aleclofabbro committed
72
      <Box sx={{ height: '100%' }} {...getRootProps({ className: 'dropzone' })}>
73
        <InfoContainer className={isDragActive ? 'active' : 'none'}>
74
75
76
77
78
79
80
81
82
83
84
          {!currentFile && uploadType == 'resource' ? (
            <Thumb className="thumb">
              <WrapperIcon>
                <File
                  size={30}
                  strokeWidth={1}
                  color={'rgba(250,250,250, .5)'}
                />
              </WrapperIcon>
            </Thumb>
          ) : null}
85
86
87
88
89
90
91
92
93
          {uploadType !== 'resource' ? (
            <Thumb className="thumb">
              <WrapperIcon>
                <Image
                  size={30}
                  strokeWidth={1}
                  color={'rgba(250,250,250, .5)'}
                />
              </WrapperIcon>
94
95
              <Img
                style={{
96
97
98
                  backgroundImage: `url(${
                    currentFile ? currentFile.localUrl : fileUrl
                  })`
99
100
                }}
              />
101
            </Thumb>
102
          ) : null}
103
          {!currentFile ? null : uploadType === 'resource' ? (
104
            currentFile.file.type.indexOf('image') == -1 ? (
105
106
107
              // <WrapperFile>
              <FileThumb>
                <File size={20} />
108
                {currentFile && <FileName>{currentFile.file.name}</FileName>}
109
              </FileThumb>
110
            ) : (
111
              // </WrapperFile>
112
              <WrapperFile>
113
                <Thumb>
114
115
116
117
118
119
120
                  <WrapperIcon>
                    <Image
                      size={30}
                      strokeWidth={1}
                      color={'rgba(250,250,250, .5)'}
                    />
                  </WrapperIcon>
121
122
123
                  <Img
                    style={{ backgroundImage: `url(${currentFile.localUrl})` }}
                  />
124
                </Thumb>
125
                <FileName>{currentFile && currentFile.file.name}</FileName>
126
127
              </WrapperFile>
            )
128
129
130
131
132
          ) : null}

          <input {...getInputProps()} />

          {/* <UploadCloud size={30} strokeWidth={1} />
Katerina Papadopoulou's avatar
Katerina Papadopoulou committed
133
          {isDragActive ? (
134
135
136
            <Info>
              <Trans>Drop the file here ...</Trans>
            </Info>
Katerina Papadopoulou's avatar
Katerina Papadopoulou committed
137
          ) : (
138
139
140
            <Info>
              <Trans>Drag 'n' drop a file here, or click to select file</Trans>
            </Info>
141
          )} */}
142
          {/* rejectedFile ? (
143
            <AlertWrapper>
144
              <Alert variant="negative">
145
146
147
148
149
150
                <Trans>
                  File {rejectedFile.name} too big, can't exceed{' '}
                  {Math.floor(uploadMaxBytes / 1024 / 1024)}MB
                </Trans>
              </Alert>
            </AlertWrapper>
151
          ) : null */}
Katerina Papadopoulou's avatar
Katerina Papadopoulou committed
152
        </InfoContainer>
bernini's avatar
bernini committed
153
      </Box>
154
    </>
Katerina Papadopoulou's avatar
Katerina Papadopoulou committed
155
  );
156
};
Katerina Papadopoulou's avatar
Katerina Papadopoulou committed
157

158
export default DropzoneArea;
Katerina Papadopoulou's avatar
Katerina Papadopoulou committed
159
160
161

const InfoContainer = styled.div`
  background: ${props => props.theme.colors.lighter};
162
  border-radius: 4px;
Katerina Papadopoulou's avatar
Katerina Papadopoulou committed
163
164
  text-align: center;
  cursor: pointer;
165
  box-sizing: border-box;
bernini's avatar
bernini committed
166
  height: inherit;
167
  margin: 0px;
168
  &.active {
169
    border: 1px dashed ${props => props.theme.colors.primary};
170
171
  }
  .;
Katerina Papadopoulou's avatar
Katerina Papadopoulou committed
172
`;
173

174
const FileName = styled.p`
175
  margin-bottom: 0px;
176
  margin-top: 5px;
177
  font-weight: bold;
178
  text-align: center;
179
180
181
  font-style: italic;
`;

182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
const WrapperIcon = styled(Flex)`
  width: 40px;
  height: 40px;
  align-items: center;
  border-radius: 100px;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  top: 50%;
  margin-top: -20px;
  z-index: 9;
`;

const WrapperFile = styled.div`
  padding: 20px 10px;
  border-radius: 4px;
`;

const FileThumb = styled.div`
  padding: 20px 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);

  &:hover {
    background: rgba(0, 0, 0, 0.2);
  }
`;

const Thumb = styled.div`
  width: 100%;
  box-sizing: border-box;
  position: relative;
  height: 120px;
  &:after {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 4px;
    display: block;
    background: rgba(0, 0, 0, 0.3);
  }
  &:hover {
    &:after {
      background: rgba(0, 0, 0, 0.1);
    }
  }
  svg {
    width: 40px;
  }
`;

const Img = styled(Box)`
    display: block;
    border-radius: 4px;
    height: inherit;
    background-size: cover;
}
`;