Comments (14)
LuchoTurtle
commented on August 22, 2024
1
As discussed, the problem was in the upload function in
image.path
|> ExAws.S3.Upload.stream_file()
|> ExAws.S3.upload("imgup-original", image.filename)
|> ExAws.request!There wasn't a filename prior (the documentation makes it seem that it's just the path, not the filename).
from imgup.
LuchoTurtle
commented on August 22, 2024
It's interesting that a person had a similar idea two weeks ago -> https://elixirforum.com/t/suggestions-for-image-upload-in-json-api/56042.
from imgup.
LuchoTurtle
commented on August 22, 2024
We should start with accepting multipart/form-data files, validating them through the :API pipeline/scope and upload to S3.
The process to upload the files to S3 buckets will probably different, as the other is made through the Javascript client. Because we're doing an API-oriented approach, I think it makes sense to make use of a package like https://github.com/ex-aws/ex_aws_s3 to upload the files to S3 and return the url to the person/client consuming the API.
from imgup.
nelsonic
commented on August 22, 2024
Yeah, this is definitely not a "new" idea.
Glad someone else is asking useful questions.
Though I highly doubt their eventual implementation will be Open Source ...
The direct upload to S3 is fine in JS-land but does it work in Flutter? 🤷♂️
This recent tutorial in Flutter uses a Node.js (Express) server as an HTTP proxy for uploading to S3: https://medium.com/swlh/uploading-images-to-s3-flutter-part-1-92c52ce62432 (GIFs ...)
Definitely use the ex_aws_s3 to do the heavy lifting. 👌
from imgup.
LuchoTurtle
commented on August 22, 2024
I keep getting this error:
You tried to access the AWS EC2 instance meta, but it could not be reached.
This happens most often when trying to access it from your local computer,
which happens when environment variables are not set correctly prompting
ExAws to fallback to the Instance Meta.
Please check your key config and make sure they're configured correctly:
For Example:
ExAws.Config.new(:s3)
ExAws.Config.new(:dynamodb)
Even though I have set the configuration in config.ex :/
config :ex_aws,
access_key_id: [{:system, System.fetch_env!("AWS_ACCESS_KEY_ID")}, :instance_role],
secret_access_key: [{:system, System.fetch_env!("AWS_SECRET_ACCESS_KEY")}, :instance_role]from imgup.
nelsonic
commented on August 22, 2024
@LuchoTurtle want to pair on this for a few mins?
from imgup.
nelsonic
commented on August 22, 2024
Glad you figured it out. 👌
from imgup.
nelsonic
commented on August 22, 2024
test "valid call", %{conn: conn} do
# Stub the ExAws behaviour
stub(ExAws.Request.HttpMock, :request, fn
_method, _url, _body, _headers, _opts ->
{:ok,
%{
body: "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<InitiateMultipartUploadResult xmlns=\"http://s3.amazonaws.com/doc/2006-03-01/\"><Bucket>imgup-original</Bucket><Key>115faa2f5cbe273cfc9fbcffd44b7eab.1000x1000x1.jpg</Key><UploadId>15.wV2G24C474anjHn8O.F8kbDictg1C0IklGV1yH_3wcHL1RnJr08GktO4Ea2dX_2oOFaXFbAQAKYESagZUKfubI4RAfxcROPdpMQDQ9PFRlGrYkbAUHRhD0Sj3cXiH</UploadId></InitiateMultipartUploadResult>",
headers: [
{"x-amz-id-2",
"heguooYPmftY6XoxvaChgSsWobRiNNvR3O4/ze/b4VT1HJ2DVcuan818khKn6CXlMmHDFB6dJGU="},
{"x-amz-request-id", "6NH87ARZVQRFZ48Z"},
{"Date", "Wed, 07 Jun 2023 13:29:14 GMT"},
{"x-amz-abort-date", "Fri, 09 Jun 2023 00:00:00 GMT"},
{"x-amz-abort-rule-id", "delete-after-1-day"},
{"x-amz-server-side-encryption", "AES256"},
{"Transfer-Encoding", "chunked"},
{"Server", "AmazonS3"}
],
status_code: 200
}}
end)
conn = post(conn, ~p"/api/images", @create_attrs)
assert Map.get(Jason.decode!(response(conn, 200)), "url") == "https://s3.eu-west-3.amazonaws.com/imgup-original/phoenix.png"
endfrom imgup.
nelsonic
commented on August 22, 2024
Given that there is zero mention of testing in the api.md #61 (review) I am busy trying to add it retrospectively ... 🧑💻 ⏳ 🔥
from imgup.
nelsonic
commented on August 22, 2024
As @LuchoTurtle noted on standup this morning,
the lib/app_web/components/core_components.ex file
is currently being ignored in the coveralls.json#L10-L11 file:
Lines 10 to 11 in eacf854
That means that the api_test.exs are incomplete.
from imgup.
nelsonic
commented on August 22, 2024
Getting the following error when attempting to test this:
1) test upload succeeds (AppWeb.APITest)
test/app_web/api_test.exs:18
** (ArgumentError) no "400" json template defined for AppWeb.ErrorJSON
code: conn = post(conn, ~p"/api/images", @create_attrs)
stacktrace:
(phoenix_template 1.0.1) lib/phoenix/template.ex:241: Phoenix.Template.render_with_fallback/4
(phoenix_template 1.0.1) lib/phoenix/template.ex:126: Phoenix.Template.render_to_iodata/4
(phoenix 1.7.3) lib/phoenix/controller.ex:1008: anonymous fn/5 in Phoenix.Controller.template_render_to_iodata/4
(telemetry 1.2.1) /Users/n/code/img/deps/telemetry/src/telemetry.erl:321: :telemetry.span/3
(phoenix 1.7.3) lib/phoenix/controller.ex:974: Phoenix.Controller.render_and_send/4
(phoenix 1.7.3) lib/phoenix/endpoint/render_errors.ex:86: Phoenix.Endpoint.RenderErrors.instrument_render_and_send/5
(phoenix 1.7.3) lib/phoenix/endpoint/render_errors.ex:63: Phoenix.Endpoint.RenderErrors.__catch__/5
(phoenix 1.7.3) lib/phoenix/test/conn_test.ex:225: Phoenix.ConnTest.dispatch/5
test/app_web/api_test.exs:20: (test)
Finished in 0.05 seconds (0.00s async, 0.05s sync)
2 tests, 1 failure, 1 excludedfrom imgup.
nelsonic
commented on August 22, 2024
Tests passing. But coverage nowhere near 100% as noted above #53 (comment)
Finished in 1.4 seconds (0.00s async, 1.4s sync)
9 tests, 0 failures
Randomized with seed 324385
----------------
COV FILE LINES RELEVANT MISSED
100.0% lib/app.ex 9 0 0
100.0% lib/app/repo.ex 5 0 0
100.0% lib/app/upload.ex 64 7 0
100.0% lib/app_web/components/layouts.ex 5 0 0
62.5% lib/app_web/controllers/api_controller.e 32 8 3
75.0% lib/app_web/controllers/api_json.ex 24 4 1
100.0% lib/app_web/controllers/page_controller. 9 1 0
100.0% lib/app_web/controllers/page_html.ex 5 0 0
100.0% lib/app_web/endpoint.ex 48 0 0
100.0% lib/app_web/live/imgup_live.ex 96 27 0
100.0% lib/app_web/router.ex 30 4 0
100.0% lib/app_web/s3_upload.ex 127 24 0
[TOTAL] 94.7%
----------------
Generating report...
Saved to: cover/
FAILED: Expected minimum coverage of 100%, got 94.7%.from imgup.
nelsonic
commented on August 22, 2024
Sample screenshot for docs:
from imgup.
nelsonic
commented on August 22, 2024
Of the original requirements the only one that is not met is "Secure" ... right now the API is fully open.
We will fix this in due course. ⏳
from imgup.
Related Issues (20)
- chore: CORS issue when calling the API from `Flutter` web devices
- Discuss: Dedicated Domain for Image Uploading + Hosting? HOT 1
- chore: Build is failing HOT 4
- Chore: Re-do Landing Page - Remove All Non-essential HOT 1
- Feat: Add Button + `JS` To Copy Image URL HOT 2
- add passing an URL and query string params to resize an image? HOT 3
- Ex_AWS update 2.5.0. No more xml parsing needed HOT 1
- Testing Image-To-Text HOT 84
- First tests - Upload to R2 HOT 6
- First tests - upload to B2 from the server seems ok with ExAws.S3
- Chore: @dependabot Builds Fail 😢 HOT 5
- Chore: Remove Image Expiry (Don't delete images from S3) HOT 4
- `imgup` Fly.io App deployment overwriting AWS env vars leading to failure HOT 4
- chore: Have bucket names imported env variables
- BUG: Couldn't upload files to S3. Open an issue on Github and contact the repo owner. HOT 2
- Feat: Logging + Metrics
- `Who` can/should use our image uploading + resizing service?
- EPIC: Clarifying Goals/Roadmap for Image Uploads Project HOT 3
- Chore: Replace `AWS S3` with `Backblaze B2`
- Feat: Dynamic Image Resizing HOT 16
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from imgup.