UBOS Community

AC
AC

Posted on • Updated on

Working with FileManager (part 1)

Необхідні умови:

  1. Обліковий запис на UBOS
  2. Воркспейс UBOS
  3. UI Editor UBOS
  4. Flow Builder UBOS

Необхідні кроки:

Додати віджет FileManagerна робочу поверхню:
Image description
А поле API url додати посилання на створений flow builder(node-red), додавши символ "/" в кінець, Token = 1:
Image description

В node-red встановити модуль node-red-contrib-fs
Для обміну файлами будемо використовувати вузол fs-file-lister
Image description

FileManager дає можливість завантажувати не тільки зображення, а й файли та проектувати зручну структуру даних (папки, вкладені папки і тд.)

Для початку просимулюємо відображення списку зображень із кореневої папки та додавання нових.

В якості сховища використовуємо можливості node-red.

Відображення списку всіх файлів із storage

Image description

  • В http-in вибираємо метод GET та вказуємо шлях /fm/list/image
    Image description

  • В наступному вузлі functionвказуємо шлях до папки, в якій зберігаються файли, та динамічну змінну msg.payload.path - шлях та назва файлу, який ми отримуємо автоматично із UI editor.

msg.payload.start = "/data/storage" + msg.payload.path;
return msg;
Enter fullscreen mode Exit fullscreen mode
  • Вузол fs-file-lister - вказуємо початкові дані, які сформували раніше, та змінюємо значення в полях як показано тут:
    Image description

  • У другому вузлі function після fs-file-lister формуємо відповідь із інформацією про дані, які ми отримуємо із файлового сховища node-red за вказаним шляхом:

let result, patch; 
result = msg.payload.map(elem => {
    if (!elem.stat.isDirectory) {
        patch = msg.req.query.path + "/" + elem.name;
    } else {
        patch = elem.name;
    }
    return {
        "isDirectory": elem.stat.isDirectory,
        "name": elem.name,
        "path": patch,
        "size": (elem.stat.size / 1048576).toFixed(3) + "Мb",
        "editedAt": elem.stat.created,
    }
})

msg.payload = {
    success: true,
    payload: result
};
return msg;

Enter fullscreen mode Exit fullscreen mode
  • Додаємо вузол http response

Завантаження файлу в сховище

Image description

  • В http-in вибираємо метод POST, вказуємо шлях /fm/upload/image та обираємо Accept file uploads?

Image description

  • Далі у вузлі function із даних, які отримуємо автоматично із UI editor, формуємо назву файлу filename, записуємо буфер в змінну та передаємо цю інформацію далі.
msg.filename ="/data/storage/"+msg.req.query.path+"/"+ msg.req.files[0].originalname;

msg.payload.file = msg.req.files[0].buffer;
msg.payload = msg.payload.file;
return msg;
Enter fullscreen mode Exit fullscreen mode
  • З переліку вузлів обираємо write file, який перетворює буфер у файл із заданою назвою та записує це в сховище.
    Image description

  • Далі у function задаємо шлях для filelister:

msg.payload.start = "/data/storage/"+msg.req.query.path;
return msg;
Enter fullscreen mode Exit fullscreen mode

Наступні кроки за аналогією:

  • Вузол fs-file-lister
    Image description

  • Останній function:

let result, patch;
result = msg.payload.map(elem => {
    if (!elem.stat.isDirectory) {
        patch = msg.req.query.path + "/" + elem.name;
    } else {
        patch = elem.name;
    }
    return {
        "isDirectory": elem.stat.isDirectory,
        "name": elem.name,
        "path": patch,
        "size": (elem.stat.size / 1048576).toFixed(3) + "Мb",
        "editedAt": elem.stat.created,
    }
})

msg.payload = {
    success: true,
    payload: result
};
return msg;
Enter fullscreen mode Exit fullscreen mode
  • Додаємо вузол http response

Переходимо в UI editor для завантаження:
Image description

Після натискання кнопки Upload відкриється модальне вікно, де можна обрати зображення:
Image description

Результат:
Image description

Top comments (0)