UBOS Community

AC
AC

Posted on • Updated on

Working with FileManager (part 2)

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

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

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

Отримання посилання на зображення

Image description

Файли, завантаження в сховище Node-red, можна використовувати для зовнішніх ресурсі, отримавши посилання. Реалізуємо для цього endpoint.

  • В http-in вибираємо метод GET та вказуємо шлях /img
    Сюди необіхідно буде передати параметр 'file' із назвою (шлях + назва, у випадку додаткових папок).

  • Функція set msg.filename

msg.filename = `/data/storage/${msg.payload.file}`
return msg;
Enter fullscreen mode Exit fullscreen mode
  • Вузол read file (node-red : file in):

Image description

  • Функція set headers:

Для того, щоб побачити файл, в headers йому необхідно передати його тип. Більше про це можна дізнатись тут.

msg.headers = { 
    "content-type": "image/png", 
}
return msg;
Enter fullscreen mode Exit fullscreen mode
  • Результат Переходимо в середовище UI та додаємо віджет image. Image description

Копіюємо посилання на Node-red для подальшого формування посилання.

Image description

В налаштуваннях віджета image формуємо посилання за формулою:
_NodeRedLink_/img?file=_filename_

В даному випадку, вставляємо значення, яке обрали із FileManager.
Image description

Це посилання можна використовувати не лише в UBOS, до прикладу відкриємо зображення в браузері:
Image description

Редагування назви файлу

Встановимо необхідні модулі:

node-red-contrib-fs-ops
Image description

Image description

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

  • Функція set path

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

  • У вузлі fs-ops-move встановлюємо змінні, які за замовчуванням приходитимуть із UI:
    Image description

  • Функція set path - передаємо змінений шлях

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

  • Вузол File Lister - налаштування залишаються незмінними:
    Image description

  • Вузол set properties:

let result = {}; 

result.payload = msg.payload.map(elem=>{
    let patch;
    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

Переходимо в середовище UI, обираємо файл та змінюємо назву:
Image description

Видалення файлів

Встановимо необхідні модулі:

*node-red-contrib-loop-processing *
Image description

Image description

  • В http-in вибираємо метод PUT, вказуємо шлях /fm/remove/image.

  • Вузол counter-loop
    Оскільки є можливіть видалити масив елементів, використовуємо цикл, для їх перебору

Image description

Тіло циклу:

  • Function Для кожного елементу, який приходить в поточну ітерацію встановлюємо шлях: 
msg.filename = "/data/storage/"+msg.req.query.path+"/"+msg.payload.payload[msg.index];

return msg;
Enter fullscreen mode Exit fullscreen mode
  • Вузол delete Передаємо сюди назву файлу та обираємо дію delete file Image description

По аналогії зі зміною назви, далі потрібно отримати нову структуру папки.

  • Функція set path 
msg.payload.start = "/data/storage/"+msg.req.query.path;
return msg;
Enter fullscreen mode Exit fullscreen mode

  • File Lister:
    Image description

  • Вузол set properties:

let result ={};

result = msg.payload.map(elem=>{
    return{
        "isDirectory":elem.stat.isDirectory,
        "name":elem.name,
        "path":elem.name,
        "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

Додаткова інформація

  • Завантажувати можна не лише зображення, а й файли із різним розширенням (.pdf, .doc, .xlsx, .csv, etc.)

  • Для отримання файлу із стору, необхідно змінили headers:

msg.headers = {
    "content-disposition": "inline",
    'content-Type': 'application/pdf',
    "charset": 'utf-8',
    "content-transfer-encoding": "binary"
}
Enter fullscreen mode Exit fullscreen mode

  • Змінивши значення "content-disposition": "attachment", файл буде скачуватись.

  • Важливо! Тимчасово назви ендпоінтів /fm/upload/image, /fm/remove/image, /fm/rename/image - налаштування самого віджета, тому їх змінювати не можна, навіть якщо завантажуємо файл, а не зображення.

Top comments (0)