@xuda.io/xuda-widget-plugin-file-upload
Version:
Xuda File Upload widget plugin
496 lines (422 loc) • 14.4 kB
JavaScript
import "./filepond/dist/filepond.js";
import "./jquery-filepond/filepond.jquery.js";
import "./@xuda.io/pintura/filepond-plugin-image-editor/FilePondPluginImageEditor.js";
import "./filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js";
import * as pintura from "./@xuda.io/pintura/pintura/pintura.js";
import "./filepond-plugin-file-poster/dist/filepond-plugin-file-poster.min.js";
import "./filepond-plugin-media-preview/dist/filepond-plugin-media-preview.min.js";
import "./filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.min.js";
import "./filepond/dist/filepond.css";
import "./@xuda.io/pintura/pintura/pintura.css";
import "./filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";
import "./filepond-plugin-media-preview/dist/filepond-plugin-media-preview.min.css";
import "./filepond-plugin-file-poster/dist/filepond-plugin-file-poster.min.css";
export async function _default(fields, e) {
fields.method = e.method;
var ret_obj = { app_files: [], addedArr: [], deletedArr: [] };
var init_files = [];
var widget_cssClass = fields.widget_cssClass;
// await func.utils.load_js_on_demand(
// func.common.get_url(
// e.SESSION_ID,
// "dist",
// "runtime/node_modules/filepond/dist/filepond.js"
// )
// );
// await func.utils.load_js_on_demand(
// func.common.get_url(
// e.SESSION_ID,
// "dist",
// "runtime/node_modules/jquery-filepond/filepond.jquery.js"
// )
// );
// await func.utils.load_js_on_demand(
// func.common.get_url(
// e.SESSION_ID,
// "dist",
// "runtime/node_modules/@xuda.io/pintura/filepond-plugin-image-editor/FilePondPluginImageEditor.js"
// )
// );
// await func.utils.load_js_on_demand(
// func.common.get_url(
// e.SESSION_ID,
// "dist",
// "runtime/node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"
// )
// );
// await func.utils.load_js_on_demand(
// func.common.get_url(
// e.SESSION_ID,
// "dist",
// "runtime/node_modules/@xuda.io/pintura/pintura/pintura-iife.js"
// )
// );
// await func.utils.load_js_on_demand(
// func.common.get_url(
// e.SESSION_ID,
// "dist",
// "runtime/node_modules/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.min.js"
// )
// );
// await func.utils.load_js_on_demand(
// func.common.get_url(
// e.SESSION_ID,
// "dist",
// "runtime/node_modules/filepond-plugin-media-preview/dist/filepond-plugin-media-preview.min.js"
// )
// );
// await func.utils.load_js_on_demand(
// func.common.get_url(
// e.SESSION_ID,
// "dist",
// "runtime/node_modules/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.min.js"
// )
// );
// await func.utils.load_css_on_demand(
// func.common.get_url(
// e.SESSION_ID,
// "dist",
// "runtime/node_modules/filepond/dist/filepond.css"
// )
// );
// func.utils.load_css_on_demand(
// func.common.get_url(
// e.SESSION_ID,
// "dist",
// "runtime/node_modules/@xuda.io/pintura/pintura/pintura.css"
// )
// );
// func.utils.load_css_on_demand(
// func.common.get_url(
// e.SESSION_ID,
// "dist",
// "runtime/node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
// )
// );
// func.utils.load_css_on_demand(
// func.common.get_url(
// e.SESSION_ID,
// "dist",
// "runtime/node_modules/filepond-plugin-media-preview/dist/filepond-plugin-media-preview.min.css"
// )
// );
// func.utils.load_css_on_demand(
// func.common.get_url(
// e.SESSION_ID,
// "dist",
// "runtime/node_modules/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.min.css"
// )
// );
var pond = undefined;
var init_files_fn = (files) => {
$.each(files, function (key, val) {
if (val?.server_fileName) val = val.server_fileName;
val = func.utils.get_drive_url(e.SESSION_ID, val).value;
ret_obj.app_files.push(val);
init_files.push({
source: val,
options: {
type: "local",
},
});
});
};
// init files from predefined array
if (!_.isEmpty(fields.file_upload_init_file_array)) {
if (typeof fields.file_upload_init_file_array === "string") {
fields.file_upload_init_file_array = eval(
fields.file_upload_init_file_array
);
}
if (fields.file_upload_init_file_array?.length) {
init_files_fn(fields.file_upload_init_file_array);
}
}
// init files from bind
var initialBindValue;
if (!_.isEmpty(fields["xu-bind"])) {
initialBindValue = await e.api_utils.get_field_value(fields["xu-bind"]);
let value = initialBindValue;
if (typeof value === "string") {
value = value.split(",").filter((e) => e);
}
if (value?.length) {
init_files_fn(value);
}
}
////////////////////////////////////
const do_callback = function (is_remove) {
setTimeout(async () => {
var pond_files = $(`#${input_id}`).filepond("getFiles");
ret_obj.app_files = [];
pond_files.forEach((file) => {
var files = { data: {} };
// if (file.serverId) {
if (is_remove) {
files.data.server_fileName = file.serverId;
} else {
files.data = JSON.parse(file.serverId).data;
}
ret_obj.app_files.push(files.data);
// }
});
if (!_.isEmpty(fields["xu-bind"])) {
var ret = ret_obj.app_files;
if (typeof initialBindValue === "string")
ret = ret_obj.app_files.map((f) => f.server_fileName).join(",");
await e.api_utils.set_field_value(fields["xu-bind"], ret);
}
if (is_remove && fields.event_name_for_successful_remove_callback) {
await e.api_utils.invoke_event(
fields.event_name_for_successful_remove_callback
);
}
if (!is_remove && fields.event_name_for_successful_callback) {
await e.api_utils.invoke_event(
fields.event_name_for_successful_callback
);
}
if (fields.clear_on_file_upload) {
pond.removeFiles();
e.api_utils.set_field_value(fields["xu-bind"], []);
}
}, 100);
};
var $pallet_wrapper = $(
`<div class="image_wrapper" style="border: none !important;">`
);
var input_id = new Date().valueOf();
var $imgInp = $(
`<input class="filepond ${widget_cssClass}" id="${input_id}" />`
).appendTo($pallet_wrapper);
e.$containerP.html($pallet_wrapper);
FilePond.registerPlugin(FilePondPluginImageEditor);
FilePond.registerPlugin(FilePondPluginMediaPreview);
FilePond.registerPlugin(FilePondPluginFilePoster);
FilePond.registerPlugin(FilePondPluginFileValidateType);
const mask_doka = (root, setInnerHTML) => {
setInnerHTML(
root,
`
<mask id="my-mask">
<rect x="0" y="0" width="100%" height="100%" fill="white"/>
<circle cx="50%" cy="50%" r="50%" fill="black"/>
</mask>
<rect fill="rgba(255,255,255,.3125)" x="0" y="0" width="100%" height="100%" mask="url(#my-mask)"/>
<circle cx="50%" cy="50%" r="50%" fill="transparent" stroke-width="1" stroke="#fff"/>
`
);
};
const axios_ajax = function (url, data) {
// const e = new URLSearchParams();
$.each(data, function (key, val) {
e.append(key, val);
});
fetch(url, {
method: "POST",
body: e,
}).then((res) => {
console.log("Request complete! response:", res);
});
};
var opt = {
allowProcess: true,
allowRemove: true,
allowRevert: true,
imageCropAspectRatio: 1,
imageResizeTargetWidth: 200,
// allowProcess: false,
imageEditInstantEdit: false,
credits: false,
allowMultiple: false,
imageEditorSupportImage: (file) => {
// return /^image/.test(file);
return (
file.type !== "image/svg+xml" &&
file.type !== "image/gif" &&
!file.type.includes("audio") &&
!file.type.includes("video")
);
},
imageEditor: {
createEditor: pintura.openEditor,
imageReader: [pintura.createDefaultImageReader],
imageWriter: [pintura.createDefaultImageWriter],
imageProcessor: pintura.processImage,
editorOptions: {
...pintura.getEditorDefaults(),
},
legacyDataToImageState: pintura.legacyDataToImageState,
},
server: {
load: (source, load, error, progress, abort, headers) => {
// you would get the file data from your server here
try {
fetch(source)
.then(function (response) {
try {
if (response.ok) return response.blob();
throw new Error("bad image");
} catch (err) {
error({});
}
})
.then(load)
.catch((e) => {
error({});
});
} catch (err) {
error({});
}
return {
abort: () => {
abort();
},
};
},
process: (
fieldName,
file,
metadata,
load,
error,
progress,
abort,
transfer,
options
) => {
let formData = new FormData();
formData.append("file", file, file.name);
const { app_id, gtp_token, app_token } = SESSION_OBJ[e.SESSION_ID];
formData.append("app_id_reference", APP_OBJ[app_id].app_id_reference);
formData.append("app_id", app_id);
formData.append("gtp_token", gtp_token);
formData.append("app_token", app_token);
formData.append("folder", fields.file_upload_folder);
formData.append("public", fields.public_file);
const request = new XMLHttpRequest();
let _domain = e._session.domain;
if (e._session.is_deployment) {
_domain =
e._session.opt.regional_server === "dev.xuda.io"
? "dev.xuda.io"
: "xuda.io";
}
request.open("POST", `https://${_domain}/rpi/runtime_upload_file`);
request.upload.onprogress = (e) => {
progress(e.lengthComputable, e.loaded, e.total);
};
request.onload = async function () {
const res = JSON.parse(request.responseText);
if (request.status >= 200 && request.status < 300 && res.code > 0) {
// the load method accepts either a string (id) or an object
load(request.responseText);
var key = res.data;
ret_obj.addedArr.push(key);
delete res.code;
ret_obj.app_files.push(key);
// if (fields.instant_file_upload === "N" ? false : true) do_callback();
} else {
// Can call the error method if something is wrong, should exit after
e.report_error(res.data);
}
};
request.send(formData);
// Should expose an abort method so the request can be cancelled
return {
abort: () => {
// This function is entered if the user has tapped the cancel button
request.abort();
// Let FilePond know the request has been cancelled
abort();
},
};
},
revert: (uniqueFileId, load, error) => {
var res = JSON.parse(uniqueFileId);
var key = res.data;
ret_obj.deletedArr.push(key);
var myIndex = ret_obj.app_files.indexOf(key.server_fileName);
if (myIndex !== -1) {
ret_obj.app_files.splice(myIndex, 1);
}
let app_id = SESSION_OBJ[e.SESSION_ID].app_id;
let app_id_reference = APP_OBJ[app_id].app_id_reference;
axios_ajax(
func.common.get_url(e.SESSION_ID, "rpi", "runtime_delete_file_bulk"),
{
app_id,
server_files: ret_obj.deletedArr,
app_id_reference: app_id_reference,
gtp_token: SESSION_OBJ[e.SESSION_ID].gtp_token,
}
);
load();
},
remove: (source, load, error) => {
var source_clean = source.split("/").pop();
ret_obj.deletedArr.push(source_clean);
var myIndex = ret_obj.app_files.indexOf(
(file) => file.server_fileName === source
);
if (myIndex !== -1) {
ret_obj.app_files.splice(myIndex, 1);
}
////////////// CALLBACK
if (fields.instant_file_upload === "N" ? false : true)
do_callback(true);
// Can call the error method if something is wrong, should exit after
// error('oh my goodness');
// Should call the load method when done, no parameters required
load();
},
},
};
if (fields.file_upload_drop_area_label) {
opt.labelIdle = fields.file_upload_drop_area_label;
}
if (fields.file_upload_allow_multiple_files) {
opt.allowMultiple = true;
}
if (init_files) {
opt.files = init_files;
}
opt.instantUpload = fields.instant_file_upload === "N" ? false : true;
if (fields.file_upload_mime_type_preset) {
switch (fields.file_upload_mime_type_preset) {
case "image":
opt.acceptedFileTypes = ["image/*"];
break;
case "video":
opt.acceptedFileTypes = ["video/*"];
break;
case "audio":
opt.acceptedFileTypes = ["audio/*"];
break;
default:
opt.acceptedFileTypes = ["image/*"];
}
} else {
if (fields.file_upload_custom_mime_types) {
opt.acceptedFileTypes = fields.file_upload_custom_mime_types.split(",");
} else {
opt.allowFileTypeValidation = false;
}
}
if (fields.file_upload_mask === "circle") {
opt.imagePreviewHeight = 170;
opt.imageCropAspectRatio = "1:1";
opt.imageResizeTargetWidth = 200;
opt.imageResizeTargetHeight = 200;
opt.stylePanelLayout = "compact circle";
opt.styleLoadIndicatorPosition = "center bottom";
opt.styleProgressIndicatorPosition = "right bottom";
opt.styleButtonRemoveItemPosition = "left bottom";
opt.styleButtonProcessItemPosition = "right bottom";
}
pond = FilePond.create($imgInp[0], opt);
pond.on("processfiles", (e) => {
do_callback();
});
return;
}