Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@s-ui/react-molecule-photo-uploader
Advanced tools
`MoleculePhotoUploader` is a component that lets you drag and drop images on it, or click it to add images. Also, on mobile, let you add photos directly taken with the camera.
MoleculePhotoUploader
is a component that lets you drag and drop images on it, or click it to add images. Also, on mobile, let you add photos directly taken with the camera.
Once uploaded into the component, all images will be resized if they are exceeding the max resolution defined by props and/or cropped to fit a given ratio. And JPEG encoded with a little bit of compression.
After they are loaded, the images can be sorted, rotated or deleted from the list.
A set of initial images can be load with an array of URLs passed by props.
Every modification of the list will return a list of Blobs (jpeg encoded!) to be uploaded on a server or whatever you like, and with the Blob, some useful info:
url
(String) if the image is one of the initially passed by props will contain an url, if it's undefined, it's a new image.
id
(String) you could pass an id to identify each image that was initially passed
isNew
(Boolean) if it's a new uploaded image, will be true, if not, will be false and it will have anurl
.
isModified
(Boolean): if an image of the initialPhotos, has been rotated, will beisModified: true
hasErrors
(Boolean) if a initial photo has some kind of error when the component try to download, will havehasErrors: true
file
(Object) it's the new uploaded file.
previewUrl
(String) a preview url to use if you wanna preview the images outside the photoUploader component
$ npm install @s-ui/react-molecule-photo-uploader --save
After importing the component MoleculePhotoUploader
like this
import MoleculePhotoUploader from '@s-ui/react-molecule-photo-uploader'
<MoleculePhotoUploader
// Icons (required props)
addMorePhotosIcon={_addMorePhotosIcon}
deleteIcon={_deleteIcon}
dragPhotosIcon={_dragPhotosIcon}
infoIcon={_infoIcon}
rejectPhotosIcon={_rejectPhotosIcon}
retryIcon={_retryErrorPhotosIcon}
rotateIcon={_rotateIcon}
// Texts (required props)
addPhotoTextButton={'Seleccionalas de tu dispositivo'}
addPhotoTextSkeleton={'Añadir más'}
dragPhotoTextInitialContent={'Arrastra las fotos aquí'}
dropPhotosHereText={'Suelta las fotos aquí'}
errorFileExcededMaxSizeText={
'Las fotografías deben tener un peso máximo de 50 MB'
}
errorFormatPhotoUploadedText={
'Las fotografías deben tener formato JPEG, PNG, GIF, BMP o WEBP'
}
errorInitialPhotoDownloadErrorText={'Error al descargar imágenes'}
notificationErrorFormatPhotoUploaded={
'Sólo se aceptan los formatos: formato JPEG, PNG, GIF, BMP o WEBP'
}
uploadingPhotosText={'Subiendo imágenes...'}
errorCorruptedPhotoUploadedText={'Archivo %{filepath} ha fallado'}
// Not required props
callbackPhotosRejected={rejectedPhotos => console.log(rejectedPhotos)}
callbackPhotosUploaded={acceptedPhotos => console.log(acceptedPhotos)}
callbackUploadPhoto={(file, oldUrl) => console.log(file, oldUrl)}
limitPhotosUploadedText={_limitPhotosUploaded}
limitPhotosUploadedNotification={_limitPhotosUploadedNotification}
mainPhotoLabel={'PRINCIPAL'}
maxPhotos={10}
rotationDirection={'clockwise'}
initialPhotos={[
{url: 'https://images.net/image1.jpg', id: '6c7ee3d8-97db-4142-8520-5136fccfc40b'},
{url: 'https://images.net/image2.jpg}'
]}
/>
Find full description and more examples in the demo page.
FAQs
`MoleculePhotoUploader` is a component that lets you drag and drop images on it, or click it to add images. Also, on mobile, let you add photos directly taken with the camera.
The npm package @s-ui/react-molecule-photo-uploader receives a total of 836 weekly downloads. As such, @s-ui/react-molecule-photo-uploader popularity was classified as not popular.
We found that @s-ui/react-molecule-photo-uploader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 78 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.