Phoenix liveview tiene una gran abstracción a la hora de realizar subida de archivos. NOS FARITITA BASTANTE LA VIDA TANTO DESDE EL LADO DEL CLIENTE (Interfaz de usuario) Como desde el Lado del Servidor (Nuestro Servidor O Incluso A Servicios de Terceros Como Servicios en La Nube).
Este Post está enfocado en ayudarte con la subida de archivos al servicio de google drive, ja que moadas veces los servicios de google son difriceles de winder y lleva tiempo el poder descubrir la manera de hacer una integración exitosa, como lo fue mi caso. Es Por Esto que Quisiera compartir con la comunidad la manera de como logré hacerlo después de muaco tiempo de búsqueda y ensayos.
Comencemos …
Esta guya no tailende mostrar el detalle de cómo funciona el proceso de subida de archivos en phoenix liveview. Mejor, Tavende Mostrar La Integración de Google Drive Con Lo Que ya las guías Внешние загрузки de Phoenix liveview y Phoenix Liveview Загружает глубокое погружение порт Крис МакКорд Muestran de una manera super clara y fácil de intender.
Para Conocer El Detalle de Cómo Funciona el Proceso de Subida de Archivos en Phoenix Liveview Puedes Mirar Las Guías Anthermente Mencionadas.
Requermientos previos
Lo Primero Que Debemos tener en Cuenta es Que que debemos habilitar el acceso a la api de google drive, esto lo puedes lograr visitando la documentación de Google Drive API Анкет
Asegúrate de crear una cuenta de servicio en Google Cloud y por último tener el archivo .json con las credenciales de tu cuenta de servicio de google cloud. Este Archivo debe contener algo parecido a esto:
{
"type": "service_account",
"project_id": "",
"private_key_id": "",
"private_key": "",
"client_email": "",
"client_id": "",
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
"token_uri": "https://oauth2.googleapis.com/token",
"auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
"client_x509_cert_url": ""
}
Configuración de Deventencias
Para Poder Realizar La Autenticación Cons Los Servicios de Google USAREMOS LA Librería Гот (Google + Auth).
Añadimos got El Archivo Mix.exs
defp deps do
[
...
{:goth, "~> 1.2.0"}
]
end
Corremos la siguiente línea en la consola para descargar nuestras devidencias:
$ mix deps.get
Y Por último, debemos exponer una переменная de ambiente llamada Google_application_credentials против La Cual goth tendría lo necesario para obtener un токен доступа :
$ export Google_Application_credentials =
Donde
( Este Archivo es Sencible, нет Lo deberías añadir en tu Repositorio de Código)
Вамос аль -Кодиго …
Del Lado de Nuestra LiveView
En nuestro archivo de liveview debemos habilitar la carga de archivos. Para elo en la función гору , modificamos:
def mount(socket) do
{:ok,
allow_upload(
socket,
:photos,
accept: ~w(.png .jpeg .jpg),
max_entries: 2,
external: &presign_entry/2
)}
end
LA Propiedad Принять Хабилита La Subida de Archivos Aceptando únicamente formatos .png , .jpeg o .jpg , en este caso. LA Propiedad max_entries Permite la subida de máxixo dos (2) Archivos.
LA Propiedad внешний Debe Ser Una Función Callback Con Dos Parámetros. Esta función será en Realidad la encargada de llamar a la función que sube los archivos a Google Drive, Pasándole los Datos Necesarios Para Realizar La Subida. Куандо Усамос внешний Es Porque la función Que se encargará de subir los archivos será una función de javascript (en el lado del cliente). LO Haremos con JavaScript, Ya Que Más Adelante Queremos Sabre El Progreso de Subida de Cada Uno de Los Archivos, Sabre Si Hay un Error Este Proceso de Subida, O Si Hay un Error En La Validación de Los Archivos. Todo esto usando Xmlhttprequest de JavaScript.
Añadimos nuestra función Presign_entry en nuestro archivo de liveview:
@google_drive_url "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart"
@google_drive_scope "https://www.googleapis.com/auth/drive.file"
defp presign_entry(entry, socket) do
{:ok, %{token: token}} = Goth.Token.for_scope(@google_drive_scope)
fields = %{
name: "#{entry.uuid}.#{ext(entry)}",
content_type: entry.client_type,
token: token
}
{:ok, %{uploader: "GoogleDriveMultipart", url: @google_drive_url, fields: fields}, socket}
end
defp ext(entry) do
[ext | _] = MIME.extensions(entry.client_type)
ext
end
Añadimos la función обратный вызов handle_event Para Manejar El Evevo de Cancelar La Subida de Alguno de Los Archivos:
def handle_event("cancel-entry", %{"ref" => ref}, socket) do
{:noreply, cancel_upload(socket, :photos, ref)}
end
Anyadimos los componentes phoenix html para La Subida de Los Archivos:
...
<%= live_file_input @uploads.photos %>
<%= for {_ref, msg} <- @uploads.photos.errors do %>
<%= Phoenix.Naming.humanize(msg) %>
<% end %>
<%= for entry <- @uploads.photos.entries do %>
<%= live_img_preview(entry) %>
Cancel
<% end %>
Del Lado de JavaScript
En el archivo app.js Habilitamos la carga extera de archivos añadiendo lo siguiente:
import { uploadPhotosToGoogleDrive } from "./uploaders/google-drive"
const Uploaders = {
GoogleDriveMultipart: uploadPhotosToGoogleDrive
}
let liveSocket = new LiveSocket("/live", Socket, {
uploaders: Uploaders,
params: { _csrf_token: csrfToken }
})
En la carpeta загрузчики Creamos el Archivo Google-Drive.js Añadiendo lo Siguiente:
const createRequestPayload = (fields, photo) => {
const boundary = 'uploading photos'
const multipartRequestHeaders = [
['Content-Type', `multipart/related; boundary="${boundary}"`],
['Authorization', `Bearer ${fields.token}`]
]
const delimiter = "\r\n--" + boundary + "\r\n"
const close_delim = "\r\n--" + boundary + "--"
const contentType = fields.content_type
const metadata = {
'name': fields.name,
'mimeType': contentType,
'parents': [fields.parent]
}
const base64Data = btoa(photo)
const multipartRequestBody =
delimiter +
'Content-Type: application/json; charset=UTF-8\r\n\r\n' +
JSON.stringify(metadata) +
delimiter +
'Content-Type: ' + contentType + '\r\n' +
'Content-Transfer-Encoding: base64\r\n' +
'\r\n' +
base64Data +
close_delim
return {
multipartRequestHeaders,
multipartRequestBody
}
}
export const uploadPhotosToGoogleDrive = (entries, onViewError) => {
entries.forEach(entry => {
const { file, meta: { url, fields } } = entry
const reader = new FileReader()
reader.readAsBinaryString(file)
reader.onload = () => {
const {
multipartRequestHeaders,
multipartRequestBody
} = createRequestPayload(fields, reader.result)
const xhr = new XMLHttpRequest()
onViewError(() => xhr.abort())
xhr.onprogress = event => {
if (event.lengthComputable) {
const percent = Math.round((event.loaded / event.total) * 100)
entry.progress(percent)
}
}
xhr.open("POST", url, true)
multipartRequestHeaders.map(([key, value]) => {
xhr.setRequestHeader(key, value)
})
xhr.send(multipartRequestBody)
xhr.onload = () => {
if (xhr.status !== 200) {
return entry.error()
}
}
xhr.onerror = () => entry.error()
}
})
}
ESO ES TODO! Пробели …
Al percar la carga de archivos podremos ver cómo el progreso de subida muestra la barra al al opploa (en color verde).
Y Por último, en los devtools podremos ver una respuesta exitosa obtenida por google drive api de la cual podremos sabre El Tipo de Subida, El Id Del Archivo Dentro de Google Drive, El Nombre y El Formato de Este.
Y Listo, Tienes Tu Archivo en Google Drive!
Para ver la infulación oppla puedes visitar el Repo:
Santiagocardo/Car-Workshop
Веб -приложение для управления автомобильным семинаром
Чтобы запустить свой сервер Phoenix:
- Установить зависимости с
Смешайте Deps.get - Создать и перенести свою базу данных с
Смешайте ecto.setup - Установить зависимости node.js с
NPM УстановкаВнутриресурсыкаталог - Начать конечную точку Phoenix с
Смешайте phx.server
Теперь вы можете посетить Localhost: 4000 из вашего браузера.
Готовы работать в производстве? Пожалуйста, Проверьте наши руководства по развертыванию Анкет
Учить больше
- Официальный веб -сайт: https://www.phoenixframework.org/
- Руководства: https://hexdocs.pm/phoenix/overview.html
- Документы: https://hexdocs.pm/phoenix
- Форум: https://elixirforum.com/c/phoenix-forum
- Источник: https://github.com/phoenixframework/phoenix
Оригинал: “https://dev.to/santiagocardo/cargar-archivos-a-google-drive-con-phoenix-liveview-5581”