feat: datasheet upload and auto-retrieve
- store datasheet PDFs on the server - download PDF automatically when given a link
This commit is contained in:
Schuwi
@@ -1,29 +1,79 @@
|
||||
defmodule ComponentsElixirWeb.FileController do
|
||||
use ComponentsElixirWeb, :controller
|
||||
|
||||
def show(conn, %{"filename" => filename}) do
|
||||
# Security: only allow alphanumeric, dashes, underscores, and dots
|
||||
if String.match?(filename, ~r/^[a-zA-Z0-9_\-\.]+$/) do
|
||||
uploads_dir = Application.get_env(:components_elixir, :uploads_dir)
|
||||
file_path = Path.join([uploads_dir, "images", filename])
|
||||
def show(conn, %{"filename" => encoded_filename}) do
|
||||
case decode_and_validate_filename(encoded_filename) do
|
||||
{:ok, filename} ->
|
||||
uploads_dir = Application.get_env(:components_elixir, :uploads_dir)
|
||||
file_path = Path.join([uploads_dir, "images", filename])
|
||||
|
||||
if File.exists?(file_path) do
|
||||
# Get the file's MIME type
|
||||
mime_type = get_mime_type(filename)
|
||||
if File.exists?(file_path) do
|
||||
# Get the file's MIME type
|
||||
mime_type = get_mime_type(filename)
|
||||
|
||||
conn
|
||||
|> put_resp_content_type(mime_type)
|
||||
|> put_resp_header("cache-control", "public, max-age=86400") # Cache for 1 day
|
||||
|> send_file(200, file_path)
|
||||
else
|
||||
conn
|
||||
|> put_status(:not_found)
|
||||
|> text("File not found")
|
||||
end
|
||||
|
||||
{:error, reason} ->
|
||||
conn
|
||||
|> put_resp_content_type(mime_type)
|
||||
|> put_resp_header("cache-control", "public, max-age=86400") # Cache for 1 day
|
||||
|> send_file(200, file_path)
|
||||
|> put_status(:bad_request)
|
||||
|> text(reason)
|
||||
end
|
||||
end
|
||||
|
||||
def show_datasheet(conn, %{"filename" => encoded_filename}) do
|
||||
case decode_and_validate_filename(encoded_filename) do
|
||||
{:ok, filename} ->
|
||||
uploads_dir = Application.get_env(:components_elixir, :uploads_dir)
|
||||
file_path = Path.join([uploads_dir, "datasheets", filename])
|
||||
|
||||
if File.exists?(file_path) do
|
||||
# Get the file's MIME type
|
||||
mime_type = get_mime_type(filename)
|
||||
|
||||
conn
|
||||
|> put_resp_content_type(mime_type)
|
||||
|> put_resp_header("cache-control", "public, max-age=86400") # Cache for 1 day
|
||||
|> put_resp_header("content-disposition", "inline; filename=\"#{filename}\"")
|
||||
|> send_file(200, file_path)
|
||||
else
|
||||
conn
|
||||
|> put_status(:not_found)
|
||||
|> text("File not found")
|
||||
end
|
||||
|
||||
{:error, reason} ->
|
||||
conn
|
||||
|> put_status(:bad_request)
|
||||
|> text(reason)
|
||||
end
|
||||
end
|
||||
|
||||
defp decode_and_validate_filename(encoded_filename) do
|
||||
try do
|
||||
# URL decode the filename
|
||||
decoded_filename = URI.decode(encoded_filename)
|
||||
|
||||
# Security validation: prevent directory traversal and only allow safe characters
|
||||
# Allow letters, numbers, spaces, dots, dashes, underscores, parentheses, and basic punctuation
|
||||
if String.match?(decoded_filename, ~r/^[a-zA-Z0-9\s_\-\.\(\)\[\]]+$/) and
|
||||
not String.contains?(decoded_filename, "..") and
|
||||
not String.starts_with?(decoded_filename, "/") and
|
||||
not String.contains?(decoded_filename, "\\") do
|
||||
{:ok, decoded_filename}
|
||||
else
|
||||
conn
|
||||
|> put_status(:not_found)
|
||||
|> text("File not found")
|
||||
{:error, "Invalid filename: contains unsafe characters"}
|
||||
end
|
||||
else
|
||||
conn
|
||||
|> put_status(:bad_request)
|
||||
|> text("Invalid filename")
|
||||
rescue
|
||||
_ ->
|
||||
{:error, "Invalid filename: cannot decode"}
|
||||
end
|
||||
end
|
||||
|
||||
@@ -34,6 +84,7 @@ defmodule ComponentsElixirWeb.FileController do
|
||||
".png" -> "image/png"
|
||||
".gif" -> "image/gif"
|
||||
".webp" -> "image/webp"
|
||||
".pdf" -> "application/pdf"
|
||||
_ -> "application/octet-stream"
|
||||
end
|
||||
end
|
||||
|
||||
@@ -47,6 +47,11 @@ defmodule ComponentsElixirWeb.ComponentsLive do
|
||||
max_entries: 1,
|
||||
max_file_size: 5_000_000
|
||||
)
|
||||
|> allow_upload(:datasheet,
|
||||
accept: ~w(.pdf),
|
||||
max_entries: 1,
|
||||
max_file_size: 10_000_000
|
||||
)
|
||||
|> load_components()}
|
||||
end
|
||||
end
|
||||
@@ -350,11 +355,18 @@ defmodule ComponentsElixirWeb.ComponentsLive do
|
||||
{:noreply, cancel_upload(socket, :image, ref)}
|
||||
end
|
||||
|
||||
def handle_event("save_component", %{"component" => component_params}, socket) do
|
||||
# Handle any uploaded images
|
||||
updated_params = save_uploaded_image(socket, component_params)
|
||||
def handle_event("cancel-datasheet-upload", %{"ref" => ref}, socket) do
|
||||
{:noreply, cancel_upload(socket, :datasheet, ref)}
|
||||
end
|
||||
|
||||
case Inventory.create_component(updated_params) do
|
||||
def handle_event("save_component", %{"component" => component_params}, socket) do
|
||||
# Handle any uploaded files
|
||||
updated_params =
|
||||
socket
|
||||
|> save_uploaded_image(component_params)
|
||||
|> save_uploaded_datasheet(socket)
|
||||
|
||||
case Inventory.create_component_with_datasheet(updated_params) do
|
||||
{:ok, _component} ->
|
||||
{:noreply,
|
||||
socket
|
||||
@@ -369,10 +381,13 @@ defmodule ComponentsElixirWeb.ComponentsLive do
|
||||
end
|
||||
|
||||
def handle_event("save_edit", %{"component" => component_params}, socket) do
|
||||
# Handle any uploaded images
|
||||
updated_params = save_uploaded_image(socket, component_params)
|
||||
# Handle any uploaded files
|
||||
updated_params =
|
||||
socket
|
||||
|> save_uploaded_image(component_params)
|
||||
|> save_uploaded_datasheet(socket)
|
||||
|
||||
case Inventory.update_component(socket.assigns.editing_component, updated_params) do
|
||||
case Inventory.update_component_with_datasheet(socket.assigns.editing_component, updated_params) do
|
||||
{:ok, _component} ->
|
||||
{:noreply,
|
||||
socket
|
||||
@@ -804,6 +819,51 @@ defmodule ComponentsElixirWeb.ComponentsLive do
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-base-content">Datasheet Upload</label>
|
||||
<div class="mt-1">
|
||||
<.live_file_input
|
||||
upload={@uploads.datasheet}
|
||||
class="block w-full text-sm text-base-content file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-secondary/10 file:text-secondary hover:file:bg-secondary/20"
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-1 text-xs text-base-content/60">
|
||||
PDF files up to 10MB (or enter URL above to auto-download)
|
||||
</p>
|
||||
|
||||
<%= for err <- upload_errors(@uploads.datasheet) do %>
|
||||
<p class="text-error text-sm mt-1">{Phoenix.Naming.humanize(err)}</p>
|
||||
<% end %>
|
||||
|
||||
<%= for entry <- @uploads.datasheet.entries do %>
|
||||
<div class="mt-2 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="h-10 w-10 rounded-lg bg-secondary/10 flex items-center justify-center">
|
||||
<.icon name="hero-document-text" class="w-6 h-6 text-secondary" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-base-content">{entry.client_name}</p>
|
||||
<p class="text-sm text-base-content/60">{entry.progress}%</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
phx-click="cancel-datasheet-upload"
|
||||
phx-value-ref={entry.ref}
|
||||
aria-label="cancel"
|
||||
class="text-error hover:text-error/80"
|
||||
>
|
||||
<.icon name="hero-x-mark" class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= for err <- upload_errors(@uploads.datasheet) do %>
|
||||
<p class="mt-1 text-sm text-error">{upload_error_to_string(err)}</p>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end space-x-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
@@ -948,6 +1008,64 @@ defmodule ComponentsElixirWeb.ComponentsLive do
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-base-content">Datasheet</label>
|
||||
<%= if @editing_component && @editing_component.datasheet_filename do %>
|
||||
<div class="mt-1 mb-2">
|
||||
<p class="text-sm text-base-content/70">Current datasheet:</p>
|
||||
<a
|
||||
href={"/uploads/datasheets/#{@editing_component.datasheet_filename}"}
|
||||
target="_blank"
|
||||
class="inline-flex items-center text-primary hover:text-primary/80"
|
||||
>
|
||||
<.icon name="hero-document-text" class="w-4 h-4 mr-1" />
|
||||
View PDF
|
||||
</a>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="mt-1">
|
||||
<.live_file_input
|
||||
upload={@uploads.datasheet}
|
||||
class="block w-full text-sm text-base-content file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-secondary/10 file:text-secondary hover:file:bg-secondary/20"
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-1 text-xs text-base-content/60">
|
||||
PDF files up to 10MB (leave empty to keep current, or enter URL above to auto-download)
|
||||
</p>
|
||||
|
||||
<%= for err <- upload_errors(@uploads.datasheet) do %>
|
||||
<p class="text-error text-sm mt-1">{Phoenix.Naming.humanize(err)}</p>
|
||||
<% end %>
|
||||
|
||||
<%= for entry <- @uploads.datasheet.entries do %>
|
||||
<div class="mt-2 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="h-10 w-10 rounded-lg bg-secondary/10 flex items-center justify-center">
|
||||
<.icon name="hero-document-text" class="w-6 h-6 text-secondary" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-base-content">{entry.client_name}</p>
|
||||
<p class="text-sm text-base-content/60">{entry.progress}%</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
phx-click="cancel-datasheet-upload"
|
||||
phx-value-ref={entry.ref}
|
||||
aria-label="cancel"
|
||||
class="text-error hover:text-error/80"
|
||||
>
|
||||
<.icon name="hero-x-mark" class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= for err <- upload_errors(@uploads.datasheet) do %>
|
||||
<p class="mt-1 text-sm text-error">{upload_error_to_string(err)}</p>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end space-x-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
@@ -997,19 +1115,28 @@ defmodule ComponentsElixirWeb.ComponentsLive do
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-center min-w-0 flex-1">
|
||||
<h3 class="text-lg font-semibold text-primary select-text">
|
||||
<%= if component.datasheet_url do %>
|
||||
<a
|
||||
href={component.datasheet_url}
|
||||
target="_blank"
|
||||
class="hover:text-primary/80"
|
||||
>
|
||||
<%= cond do %>
|
||||
<% component.datasheet_filename -> %>
|
||||
<a
|
||||
href={"/uploads/datasheets/#{component.datasheet_filename}"}
|
||||
target="_blank"
|
||||
class="hover:text-primary/80"
|
||||
>
|
||||
{component.name}
|
||||
</a>
|
||||
<% component.datasheet_url -> %>
|
||||
<a
|
||||
href={component.datasheet_url}
|
||||
target="_blank"
|
||||
class="hover:text-primary/80"
|
||||
>
|
||||
{component.name}
|
||||
</a>
|
||||
<% true -> %>
|
||||
{component.name}
|
||||
</a>
|
||||
<% else %>
|
||||
{component.name}
|
||||
<% end %>
|
||||
</h3>
|
||||
<%= if component.datasheet_url do %>
|
||||
<%= if component.datasheet_url || component.datasheet_filename do %>
|
||||
<span class="ml-2 text-primary" title="Datasheet available">📄</span>
|
||||
<% end %>
|
||||
</div>
|
||||
@@ -1119,6 +1246,41 @@ defmodule ComponentsElixirWeb.ComponentsLive do
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= if component.datasheet_filename || component.datasheet_url do %>
|
||||
<div class="flex items-start">
|
||||
<.icon name="hero-document-text" class="w-4 h-4 mr-2 text-base-content/50 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<span class="font-medium text-base-content">Datasheet:</span>
|
||||
<div class="space-y-1 mt-1">
|
||||
<%= if component.datasheet_filename do %>
|
||||
<div>
|
||||
<a
|
||||
href={"/uploads/datasheets/#{component.datasheet_filename}"}
|
||||
target="_blank"
|
||||
class="inline-flex items-center text-primary hover:text-primary/80 text-sm"
|
||||
>
|
||||
<.icon name="hero-document-arrow-down" class="w-4 h-4 mr-1" />
|
||||
View PDF (Downloaded)
|
||||
</a>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= if component.datasheet_url do %>
|
||||
<div>
|
||||
<a
|
||||
href={component.datasheet_url}
|
||||
target="_blank"
|
||||
class="inline-flex items-center text-base-content/70 hover:text-primary text-sm"
|
||||
>
|
||||
<.icon name="hero-link" class="w-4 h-4 mr-1" />
|
||||
Original URL
|
||||
</a>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1185,19 +1347,28 @@ defmodule ComponentsElixirWeb.ComponentsLive do
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-center min-w-0 flex-1">
|
||||
<p class="text-sm font-medium text-primary truncate">
|
||||
<%= if component.datasheet_url do %>
|
||||
<a
|
||||
href={component.datasheet_url}
|
||||
target="_blank"
|
||||
class="hover:text-primary/80"
|
||||
>
|
||||
<%= cond do %>
|
||||
<% component.datasheet_filename -> %>
|
||||
<a
|
||||
href={"/uploads/datasheets/#{component.datasheet_filename}"}
|
||||
target="_blank"
|
||||
class="hover:text-primary/80"
|
||||
>
|
||||
{component.name}
|
||||
</a>
|
||||
<% component.datasheet_url -> %>
|
||||
<a
|
||||
href={component.datasheet_url}
|
||||
target="_blank"
|
||||
class="hover:text-primary/80"
|
||||
>
|
||||
{component.name}
|
||||
</a>
|
||||
<% true -> %>
|
||||
{component.name}
|
||||
</a>
|
||||
<% else %>
|
||||
{component.name}
|
||||
<% end %>
|
||||
</p>
|
||||
<%= if component.datasheet_url do %>
|
||||
<%= if component.datasheet_url || component.datasheet_filename do %>
|
||||
<span class="ml-2 text-primary" title="Datasheet available">📄</span>
|
||||
<% end %>
|
||||
</div>
|
||||
@@ -1421,6 +1592,40 @@ defmodule ComponentsElixirWeb.ComponentsLive do
|
||||
result
|
||||
end
|
||||
|
||||
# Helper function for datasheet upload handling
|
||||
defp save_uploaded_datasheet(component_params, socket) do
|
||||
uploaded_files =
|
||||
consume_uploaded_entries(socket, :datasheet, fn %{path: path}, entry ->
|
||||
filename = "#{System.unique_integer([:positive])}_#{entry.client_name}"
|
||||
uploads_dir = Application.get_env(:components_elixir, :uploads_dir)
|
||||
upload_dir = Path.join([uploads_dir, "datasheets"])
|
||||
dest = Path.join(upload_dir, filename)
|
||||
|
||||
# Ensure the upload directory exists
|
||||
File.mkdir_p!(upload_dir)
|
||||
|
||||
# Copy the file
|
||||
case File.cp(path, dest) do
|
||||
:ok ->
|
||||
{:ok, filename}
|
||||
|
||||
{:error, reason} ->
|
||||
{:postpone, {:error, reason}}
|
||||
end
|
||||
end)
|
||||
|
||||
case uploaded_files do
|
||||
[filename] when is_binary(filename) ->
|
||||
Map.put(component_params, "datasheet_filename", filename)
|
||||
|
||||
[] ->
|
||||
component_params
|
||||
|
||||
_error ->
|
||||
component_params
|
||||
end
|
||||
end
|
||||
|
||||
defp delete_image_file(nil), do: :ok
|
||||
defp delete_image_file(""), do: :ok
|
||||
|
||||
|
||||
@@ -25,8 +25,9 @@ defmodule ComponentsElixirWeb.Router do
|
||||
get "/login/authenticate", AuthController, :authenticate
|
||||
post "/logout", AuthController, :logout
|
||||
|
||||
# File serving endpoint
|
||||
# File serving endpoints
|
||||
get "/uploads/images/:filename", FileController, :show
|
||||
get "/uploads/datasheets/:filename", FileController, :show_datasheet
|
||||
end
|
||||
|
||||
scope "/", ComponentsElixirWeb do
|
||||
|
||||
Reference in New Issue
Block a user