Import medias easily and as the most secure way as possible.
Description
This library is used to easily, and securely, create one or more file selection inputs. It is possible to configure according to our wishes such as, for example, specifying the type of authorized file (.pdf, .png ...) The library takes care of all the security aspect, that is to say the verification of the metadata of the selected file to ensure the authenticity of the latter.
Get started
npm i media-selector
Include HTML
To start well include the following html. This permit to media-selector to focus your media input file.
<div class="media-selector--upload-btn-wrapper">
<button class="media-selector--upload-btn">
<label>Select a file</label>
</button>
<input type="file" class="media-selector--input-file" accept="*" />
</div>
By default the file button is stylized. To restyled, just add custom classes or only add the following html :
<input type="file" class="media-selector--input-file" accept="*" />
Include JS
Import library :
import MediaSelector from 'media-selector';
or :
const MediaSelector = require('media-selector');
Use :
Then, you can configure according to your wishes.
Here are the available configuration options :
-
- list of authorized file formats
- is an array of string
-
- minimum authorized file size (Byte. Ex : 2 000 000 = 2MO)
- is a number
-
- maximum authorized file size (Byte)
- is a number
-
- callback if the file have an unauthorized format
- is a function
-
- callback if the file size is too small
- is a function
-
- callback if the file size is too large
- is a function
MediaSelector({
// authorized formats
formats: ["PNG", "JPEG"],
// min size
minSize: 2,
// max size
maxSize: 20000000,
formatError: function(){
/**
* callback if file format unauthorized
*/
console.log("format error");
},
minSizeError: function(){
/**
* callback if max file size too small
*/
console.log("minSize error");
},
maxSizeError: function(){
/**
* callback if max file size exceeded
*/
console.log("maxSize error");
}
}, function(data){
/**
* callback if success
*
* data is an object that contain file infos. Ex :
* {
* base64 : ...,
* mime : "image/png",
* extension : "png"
* }
*/
console.log("success, file uploaded", data);
});
Successful file upload return an object with file infos.
Ex :
{
"base64" : "base64/...",
"mime" : "image/png",
"extension" : "png"
}
Available file formats :
- AVI
- BMP
- DOC,
- DOCX
- DLL
- XLS
- XLSX
- EXE
- FLV
- GIF
- GZ
- ICO
- JPEG
- PNG
- MSI
- MP3
- PPT
- PPTX
- RAR
- TIFF
- TIF
- TAR
- WMV
- WM
- ZIP
- XML
Thanks
Thanks for using my library.
Bug
If you spot any bug contact me : Lucas Estrade (lucas.estrade5@hotmail.fr)
Development
This library may be improve (must).
Do not hesitates to propose some updates via the project github : project github
Licence
MIT