Upload files using JavaScript
This sample demonstrates a usage of a new Flmngr API. The sample of legacy API usage can be found here.
Play on CodePen All samples on CodePen
<div style="display:none">
<div id="editor"></div>
</div>
<h1 class="h5 mb-3">Flmngr: upload images</h1>
<div id="btn" class="btn btn-primary" style="opacity:0.2;cursor:default">Select images...</div>
<div id="loading" style="font-size:12px">Loading file manager...</div>
<h2 class="h5 mt-5">Upload images</h2>
<div id="images">
No images uploaded yet.
</div>
// In real app replace with:
// import Flmngr from "flmngr";
import Flmngr from "https://cdn.skypack.dev/flmngr";
Flmngr.load({
apiKey: "FLMNFLMN",
urlFileManager: 'https://fm.flmngr.com/fileManager',
urlFiles: 'https://fm.flmngr.com/files'
}, {
onFlmngrLoaded: () => {
attachOnClickListenerToButton();
}
});
function attachOnClickListenerToButton() {
let elBtn = document.getElementById("btn");
// Style button as ready to be pressed
elBtn.style.opacity = 1;
elBtn.style.cursor = "pointer";
let elLoading = document.getElementById("loading");
elLoading.parentElement.removeChild(elLoading);
// Add a listener for uploading files
elBtn.addEventListener("click", () => {
uploadFiles();
});
}
function uploadFiles() {
Flmngr.selectFiles({
acceptExtensions: ["png", "jpg", "jpeg", "webp", "gif"],
isMultiple: true,
onFinish: (files) => {
Flmngr.upload({
filesOrLinks: files,
dirUploads: "/",
onFinish: (uploadedFiles) => {
showUploadedImages(uploadedFiles);
}
});
}
});
}
function showUploadedImages(uploadedFiles) {
let elImages = document.getElementById("images");
elImages.innerHTML = "";
let elP = document.createElement("p");
elP.textContent = uploadedFiles.length + " images uploaded";
elImages.appendChild(elP);
for (let uploadedFile of uploadedFiles) {
let el = document.createElement("div");
el.className = "image";
elImages.appendChild(el);
let elImg = document.createElement("img");
elImg.src = uploadedFile.url;
elImg.alt = "Image selected in Flmngr";
el.appendChild(elImg);
let elP = document.createElement("p");
elP.textContent = uploadedFile.url;
el.appendChild(elP);
}
}
body {
padding: 20px;
background-color: #F4F4F4;
}
#images .image {
border: 1px solid #DDD;
box-shadow: 5px 5px 0 0 #DDD;
background-color: white;
padding: 10px;
display: inline-flex;
flex-direction: column;
margin: 0 25px 25px 0;
}
#images .image img {
max-height: 350px;
border: 1px solid #DDD;
}
#images .image p {
margin: 5px 0 0 0;
font-size: 14px;
color: #444;
}
The upload feature is an essential feature of Flmngr file manager. You can do it right from file manager dialog but sometimes you need to programmatically upload some files to the server. Flmngr API provides such a feature.
There is Flmngr.upload({params})
method that can upload passed files or links (a set of URLs) into the desired directory.
You pass there as filesOrLinks
array these types of object:
- Files selected by user using
Flmngr.selectFiles
method.File
type. - Files selected by user somewhere in your app.
File
type. - External URLs selected by user using
Flmngr.selectUrls
method.string
type. - External URLs specified by your app.
string
type. - Blob objects from your app.
Blob
type.
The directory where wish to place uploaded files should be set as dirUploads
parameter. Note that it starts not from the root of the server, but from the root of the storage folder, see its description on the API page to know more.
The mode (rename/overwrite) is set by the mode
parameter.
If you upload images, you might want to create some image formats for them after uploading (i. e. previews), you can do this with Flmngr.createImageFormats({params})
method.
This sample shows how to combine Flmngr.selectFiles
and Flmngr.upload({params})
methods and let the user upload files from his computer.
NPM
React
Snippet
TinyMCE
CKEditor 4
CKEditor 5
import Flmngr from "flmngr";
Flmngr.selectFiles({
apiKey: "FLMN24RR1234123412341234", // default free key
urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
urlFiles: 'https://fm.flmngr.com/files', // demo file storage
acceptExtensions: ["png", "jpg", "jpeg", "webp", "gif"],
isMultiple: true,
onFinish: (files) => {
// Files were selected, let's upload them
Flmngr.upload({
filesOrLinks: files,
dirUploads: "/",
onFinish: (urls) => {
console.log("Files uploaded. Their URLs are:");
console.log(urls);
}
});
}
});