salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add yet-another-react-lightbox package and update .gitignore to exclude node_modules

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-11-12 18:50:30 +00:00
parent bd2a5570a9
commit c92f4a5edd
9304 changed files with 29 additions and 2008667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
frontend/node_modules/react-dropzone/examples/accept/README.md generated vendored
View File

@@ -1,144 +0,0 @@
By providing `accept` prop you can make the dropzone accept specific file types and reject the others.
The value must be an object with a common [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) as keys and an array of file extensions as values (similar to [showOpenFilePicker](https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker)'s types `accept` option).
```js static
useDropzone({
accept: {
'image/png': ['.png'],
'text/html': ['.html', '.htm'],
}
})
```
For more information see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input.
```jsx harmony
import React from 'react';
import {useDropzone} from 'react-dropzone';
function Accept(props) {
const {
acceptedFiles,
fileRejections,
getRootProps,
getInputProps
} = useDropzone({
accept: {
'image/jpeg': [],
'image/png': []
}
});
const acceptedFileItems = acceptedFiles.map(file => (
<li key={file.path}>
{file.path} - {file.size} bytes
</li>
));
const fileRejectionItems = fileRejections.map(({ file, errors }) => (
<li key={file.path}>
{file.path} - {file.size} bytes
<ul>
{errors.map(e => (
<li key={e.code}>{e.message}</li>
))}
</ul>
</li>
));
return (
<section className="container">
<div {...getRootProps({ className: 'dropzone' })}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here, or click to select files</p>
<em>(Only *.jpeg and *.png images will be accepted)</em>
</div>
<aside>
<h4>Accepted files</h4>
<ul>{acceptedFileItems}</ul>
<h4>Rejected files</h4>
<ul>{fileRejectionItems}</ul>
</aside>
</section>
);
}
<Accept />
```
### Browser limitations
Because of HTML5 File API differences across different browsers during the drag, Dropzone might not be able to detect whether the files are accepted or rejected in Safari nor IE.
Furthermore, at this moment it's not possible to read file names (and thus, file extensions) during the drag operation. For that reason, if you want to react on different file types _during_ the drag operation, _you have to use_ mime types and not extensions! For example, the following example won't work even in Chrome:
```jsx harmony
import React from 'react';
import {useDropzone} from 'react-dropzone';
function Accept(props) {
const {
getRootProps,
getInputProps,
isDragActive,
isDragAccept,
isDragReject
} = useDropzone({
accept: {
'image/jpeg': ['.jpeg', '.png']
}
});
return (
<div className="container">
<div {...getRootProps({className: 'dropzone'})}>
<input {...getInputProps()} />
{isDragAccept && (<p>All files will be accepted</p>)}
{isDragReject && (<p>Some files will be rejected</p>)}
{!isDragActive && (<p>Drop some files here ...</p>)}
</div>
</div>
);
}
<Accept />
```
but this one will:
```jsx harmony
import React from 'react';
import {useDropzone} from 'react-dropzone';
function Accept(props) {
const {
getRootProps,
getInputProps,
isDragActive,
isDragAccept,
isDragReject
} = useDropzone({
accept: {
'image/*': ['.jpeg', '.png']
}
});
return (
<div className="container">
<div {...getRootProps({className: "dropzone"})}>
<input {...getInputProps()} />
{isDragAccept && (<p>All files will be accepted</p>)}
{isDragReject && (<p>Some files will be rejected</p>)}
{!isDragActive && (<p>Drop some files here ...</p>)}
</div>
</div>
);
}
<Accept />
```
### Notes
Mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all.